TypeScript plugins

Introduce how to use and create TypeScript LS 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 !