TypeScript plugins

Transcript

1. TypeScript Plugin 2017.04.28 Meguro.es x Gotanda.js

2. About me • @Quramy (Yosuke Kurami) • Frontend Web Developer

   at WACUL INC. • develop SPA with TypeScript and Angular • झຯͰTypeScript༻ͷVimϓϥΪϯ։ൃͯ͠·͢ • http://vimawesome.com/plugin/tsuquyomi 


3. Today’s theme: new TypeScript feature

4. TypeScript 2.3 is coming https://blogs.msdn.microsoft.com/typescript/2017/04/27/announcing-typescript-2-3/

5. New feature: Plugin support

6. How to use plugins { "compilerOptions": { "module": "commonjs", "target":

   "es5", "strict": true, "sourceMap": false, "plugins": [ { "name": "hoge-plugin" }, { "name": "foo-plugin" } ] } } • tsconfig.jsonʹpluginsΛࢦఆ͢Δ • node_modules͔ΒಡΈ͜·ΕΔ

7. Plugin͕Ͱ͖Δ͜ͱ • Plugin͸Language ServiceΛproxy͢Δ • τϥϯεύΠϧͷڍಈมߋ͸Ͱ͖ͳ͍ • https://github.com/Microsoft/TypeScript/issues/14419

8. Language Service in TS

9. Language Service in TS

10. What’s Language Service • ΤσΟλɾIDEʹछʑͷݴޠ৘ใΛఏڙ͢Δ • ฤूதιʔείʔυͷΤϥʔɺิ׬ɺetc • Language ServiceΛ֦ுͰ͖Δͱ͍͏͜ͱ

    ͸ɺछผΛ໰ΘͣΤσΟλ͕ڗड͢ΔػೳΛ ֦ுͰ͖Δɺͱ͍͏͜ͱ

11. (ࢀߟ) LSP https://github.com/Microsoft/language-server-protocol

12. ༇շͳ஥ؒͨͪ

13. Plugins: • Angular: ςϯϓϨʔτͷิ׬, ΤϥʔνΣοΫ, etc…
 https://github.com/angular/angular • Vue.js: Single

    File Components αϙʔτ
 https://github.com/sandersn/vue-ts-plugin • tslint: tslintΤϥʔͷ௥Ճ
 https://github.com/angelozerr/tslint-language-service • CSS Modules: .cssϑΝΠϧͷղܾ
 https://github.com/HerringtonDarkholme/ts-css-plugin • GraphQL: GraphQLΫΤϦͷิ׬ɺΤϥʔνΣοΫ
 https://github.com/Quramy/ts-graphql-plugin

14. ·ͩ·ͩগͳ͍….

15. ࡞Ζ͏ʂ

16. Let’s create LS plugins import * as ts from 'typescript/lib/tsserverlibrary';

    function create(info: ts.server.PluginCreateInfo) { const ls = info.languageService; // extend ls object... return ls; } const factory: ts.server.PluginModuleFactory = () => { return { create }; } export = factory;

17. How to create LS plugins • ඞཁͳܕఆٛ͸ typescript/lib/tsserverlibrary ͔Β import

    • create: (info) => ts.LanguageService Λ࣮૷͢Δ • ඞཁʹԠͯ͡ languageService ͷϝιουΛ্ॻ͖͢Δ • ؆୯ʂ

18. Thank you !