Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
TypeScript plugins
Search
Yosuke Kurami
April 28, 2017
Programming
0
1.7k
TypeScript plugins
Introduce how to use and create TypeScript LS plugins
Yosuke Kurami
April 28, 2017
Tweet
Share
More Decks by Yosuke Kurami
See All by Yosuke Kurami
App Router 悲喜交々
quramy
7
530
上手に付き合うコンポーネントテスト
quramy
4
1.9k
Patched fetch did not work
quramy
6
600
GraphQL あるいは React における自律的なデータ取得について
quramy
18
4.8k
Next.js App Router
quramy
15
3.4k
Fragment Composition of GraphQL
quramy
16
3.5k
reg-viz VRT tools
quramy
4
1.3k
NoInfer
quramy
0
240
Precondition with schema directives
quramy
0
1.5k
Other Decks in Programming
See All in Programming
技術を根付かせる / How to make technology take root
kubode
1
110
令和7年版 あなたが使ってよいフロントエンド機能とは
mugi_uno
12
6.1k
GitHub Actions × RAGでコードレビューの検証の結果
sho_000
0
200
Ruby on cygwin 2025-02
fd0
0
120
定理証明プラットフォーム lapisla.net
abap34
1
1.6k
iOSエンジニアから始める visionOS アプリ開発
nao_randd
3
110
テストをしないQAエンジニアは何をしているか?
nealle
0
110
SRE、開発、QAが協業して挑んだリリースプロセス改革@SRE Kaigi 2025
nealle
3
3.9k
【PHP】破壊的バージョンアップと戦った話〜決断と説得
satoshi256kbyte
0
120
AIの力でお手軽Chrome拡張機能作り
taiseiue
0
150
Pulsar2 を雰囲気で使ってみよう
anoken
0
200
Rubyでつくるパケットキャプチャツール
ydah
1
670
Featured
See All Featured
VelocityConf: Rendering Performance Case Studies
addyosmani
328
24k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
44
7k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
7
240
A Modern Web Designer's Workflow
chriscoyier
693
190k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.4k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
356
29k
Fireside Chat
paigeccino
34
3.2k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Product Roadmaps are Hard
iamctodd
PRO
50
11k
Learning to Love Humans: Emotional Interface Design
aarron
274
40k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
39
1.9k
Scaling GitHub
holman
459
140k
Transcript
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͕Ͱ͖Δ͜ͱ • PluginLanguage 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 !