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
540
上手に付き合うコンポーネントテスト
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
250
Precondition with schema directives
quramy
0
1.5k
Other Decks in Programming
See All in Programming
CSS Linter による Baseline サポートの仕組み
ryo_manba
1
140
Pythonでもちょっとリッチな見た目のアプリを設計してみる
ueponx
1
600
DRFを少しずつ オニオンアーキテクチャに寄せていく DjangoCongress JP 2025
nealle
2
180
『GO』アプリ バックエンドサーバのコスト削減
mot_techtalk
0
150
Django NinjaによるAPI開発の効率化とリプレースの実践
kashewnuts
1
150
JavaScriptツール群「UnJS」を5分で一気に駆け巡る!
k1tikurisu
9
1.8k
XStateを用いた堅牢なReact Components設計~複雑なClient Stateをシンプルに~ @React Tokyo ミートアップ #2
kfurusho
1
940
PHP ステートレス VS ステートフル 状態管理と並行性 / php-stateless-stateful
ytake
0
110
『テスト書いた方が開発が早いじゃん』を解き明かす #phpcon_nagoya
o0h
PRO
6
1.9k
AIの力でお手軽Chrome拡張機能作り
taiseiue
0
180
法律の脱レガシーに学ぶフロントエンド刷新
oguemon
5
740
GitHub Actions × RAGでコードレビューの検証の結果
sho_000
0
280
Featured
See All Featured
Build your cross-platform service in a week with App Engine
jlugia
229
18k
The Power of CSS Pseudo Elements
geoffreycrofte
75
5.5k
Raft: Consensus for Rubyists
vanstee
137
6.8k
Optimising Largest Contentful Paint
csswizardry
34
3.1k
Embracing the Ebb and Flow
colly
84
4.6k
The Cult of Friendly URLs
andyhume
78
6.2k
Gamification - CAS2011
davidbonilla
80
5.1k
The Language of Interfaces
destraynor
156
24k
Optimizing for Happiness
mojombo
376
70k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
666
120k
Why Our Code Smells
bkeepers
PRO
336
57k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
33
2.8k
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 !