TypeScript Plugin 2017.04.28 Meguro.es x Gotanda.js

About me • @Quramy (Yosuke Kurami) • Frontend Web Developer at WACUL INC. • develop SPA with TypeScript and Angular • झຯͰTypeScript༻ͷVimϓϥΪϯ։ൃͯ͠·͢ • http://vimawesome.com/plugin/tsuquyomi 


Today’s theme: new TypeScript feature

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

New feature: Plugin support

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͔ΒಡΈ͜·ΕΔ

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

Language Service in TS

Language Service in TS

What’s Language Service • ΤσΟλɾIDEʹछʑͷݴޠ৘ใΛఏڙ͢Δ • ฤूதιʔείʔυͷΤϥʔɺิ׬ɺetc • Language ServiceΛ֦ுͰ͖Δͱ͍͏͜ͱ ͸ɺछผΛ໰ΘͣΤσΟλ͕ڗड͢ΔػೳΛ ֦ுͰ͖Δɺͱ͍͏͜ͱ

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

༇շͳ஥ؒͨͪ

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

·ͩ·ͩগͳ͍….

࡞Ζ͏ʂ

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;

How to create LS plugins • ඞཁͳܕఆٛ͸ typescript/lib/tsserverlibrary ͔Β import • create: (info) => ts.LanguageService Λ࣮૷͢Δ • ඞཁʹԠͯ͡ languageService ͷϝιουΛ্ॻ͖͢Δ • ؆୯ʂ

Thank you !