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.9k
Next.js App Router
quramy
15
3.4k
Fragment Composition of GraphQL
quramy
16
3.6k
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
Ruby on cygwin 2025-02
fd0
0
140
Kanzawa.rbのLT大会を支える技術の裏側を変更する Ruby on Rails + Litestream 編
muryoimpl
0
220
ペアーズでの、Langfuseを中心とした評価ドリブンなリリースサイクルのご紹介
fukubaka0825
2
300
『品質』という言葉が嫌いな理由
korimu
0
160
GitHub Actions × RAGでコードレビューの検証の結果
sho_000
0
240
SwiftUIで単方向アーキテクチャを導入して得られた成果
takuyaosawa
0
260
AWSマネコンに複数のアカウントで入れるようになりました
yuhta28
2
160
『GO』アプリ バックエンドサーバのコスト削減
mot_techtalk
0
130
CNCF Project の作者が考えている OSS の運営
utam0k
5
690
Amazon ECS とマイクロサービスから考えるシステム構成
hiyanger
2
490
社内フレームワークとその依存性解決 / in-house framework and its dependency management
vvakame
1
550
Amazon S3 TablesとAmazon S3 Metadataを触ってみた / 20250201-jawsug-tochigi-s3tables-s3metadata
kasacchiful
0
100
Featured
See All Featured
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
For a Future-Friendly Web
brad_frost
176
9.5k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
12
950
Designing for humans not robots
tammielis
250
25k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
10
1.3k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
99
18k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
129
19k
Adopting Sorbet at Scale
ufuk
74
9.2k
Rebuilding a faster, lazier Slack
samanthasiow
79
8.8k
Building Adaptive Systems
keathley
40
2.4k
Why Our Code Smells
bkeepers
PRO
335
57k
Producing Creativity
orderedlist
PRO
343
39k
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 !