Slide 1

Slide 1 text

TypeScript Plugin 2017.04.28 Meguro.es x Gotanda.js

Slide 2

Slide 2 text

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


Slide 3

Slide 3 text

Today’s theme: new TypeScript feature

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

New feature: Plugin support

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

Language Service in TS

Slide 9

Slide 9 text

Language Service in TS

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

༇շͳ஥ؒͨͪ

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

·ͩ·ͩগͳ͍….

Slide 15

Slide 15 text

࡞Ζ͏ʂ

Slide 16

Slide 16 text

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;

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

Thank you !