Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
TypeScriptの概要とLanguage Server Protocol / About TypeScript & Language Server Protocol
Masahiro Wakame
May 24, 2017
Programming
19
3.4k
TypeScriptの概要とLanguage Server Protocol / About TypeScript & Language Server Protocol
https://www.microsoft.com/ja-jp/events/decode/2017/sessions.aspx
Microsoftのde:code 2017で登壇して喋ったやつです。
Masahiro Wakame
May 24, 2017
Tweet
Share
More Decks by Masahiro Wakame
See All by Masahiro Wakame
DatastoreからSpannerに 移行したいぞ途中編 / migrate Datastore to Spanner in progress
vvakame
0
460
Google Cloud Next 2019 わくわく報告会 / Google Cloud Next 2019 WakuWaku Report
vvakame
1
380
メルカリ社員100人に聞いたGoLandの使い方 / JetBrains Night Tokyo 2018
vvakame
26
12k
OSS入門 世界に参加する最初のひと押し / OSS first step
vvakame
7
600
GCP Compute 概要と選定 / DevFest Tokyo 2018
vvakame
12
1.4k
GoでGraphQLサーバを立てるぞ! / Building GraphQL server by go
vvakame
15
4.1k
『Re:VIEW+CSS組版やっていき』を やった話とWebエンジニアが期待する未来 / CSS Publishinng for Web Developers
vvakame
3
7.8k
go.mercari.io/datastore はいいぞ! / go.mercari.io/datastore is pretty good!
vvakame
4
830
最強のDatastoreライブラリを作った / golang.tokyo #11
vvakame
3
8.6k
Other Decks in Programming
See All in Programming
実録mruby組み込み体験
coe401_
0
110
Jakarta EE 10 is Coming Your Way
ivargrimstad
0
3.4k
Unboxing Rails 7
claudiob
1
120
Swift Concurrencyによる安全で快適な非同期処理
tattn
2
340
Reactive Microservices with Spring Boot and JHipster - Spring I/O 2022
mraible
PRO
2
500
Viteはいいぞ/Vite is Good
dojineko
1
110
よりUXに近いSLI・SLOの運用による可用性の再設計
kazumanagano
3
1k
Let's build components, not layers
thombergs
1
150
職場にPythonistaを増やす方法
soogie
0
330
モバイルファーストデザインの爆速実装を考える
tanabee8
0
160
モデリングの費用対効果
masuda220
PRO
4
980
byte列のbit表現を得るencodingライブラリ作った
convto
1
210
Featured
See All Featured
VelocityConf: Rendering Performance Case Studies
addyosmani
316
22k
No one is an island. Learnings from fostering a developers community.
thoeni
9
1.1k
How to Ace a Technical Interview
jacobian
265
21k
Art Directing for the Web. Five minutes with CSS Template Areas
malarkey
196
9.4k
Build your cross-platform service in a week with App Engine
jlugia
219
17k
How to name files
jennybc
39
59k
Happy Clients
brianwarren
89
5.6k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
226
15k
A designer walks into a library…
pauljervisheath
196
16k
Teambox: Starting and Learning
jrom
121
7.6k
Code Reviewing Like a Champion
maltzj
506
37k
Become a Pro
speakerdeck
PRO
3
790
Transcript
TypeScriptͷ֓ཁͱ Language Server Protocol @vvakame Θ͔Ί ·͞ͻΖ #decode17 #MW09
Θ͔Ί ·͞ͻΖ @v vakame TypeScript Masahiro Wakame DefinitelyTyped Angular GAE/Go
San Francisco
Google I/O
ؼࠃ͔Β3 GCPͱ͔νϣτΘ͔Γ·͢
ॻ͍ͨຊ • TypeScriptϦϑΝϨϯε Ver 1.0ରԠ • ΊͬͪΌݹ͍ͷͰࠓͱͳͬͯΦεεϝͰ͖ͳ͍ • Revised TypeScript
in Definitelyland • v2.0.0४ڌ • ແྉެ։ͯ͠·͢ goo.gl/mcF92t
Ξϯέʔτ • JavaScript ?? • TypeScript ?? • Language Server
Protocol ?? Ͳ͜ʹڵຯ͕ ͋Γ·͔͢ʁ
TypeScriptΛ… • ຖͬͯ·͢ʂ • 1ճࢼ͠·ͨ͠ • ڵຯ͋Δ • Babelflowtypeͬͯ·͢ʂ શһ͓͏ʂ
͖উखʹΛ͢Δͧʂ • ͱࢥ͍ͬͯͨ࣌ظ͕ࢲʹ͋Γ·ͨ͠ • "TypeScript" ؚ͕·ΕΔηογϣϯ • 1݅ • ͚ͩͰ͔͢ʂʁ
গ͠ਅ໘ʹ͠Α… Buildʹ2ݸ͔͠ͳ͍
TypeScript? TypeScript͍͍ͧ
Why Type ?? • ܕ͕͋ΔͱԿ͕͍͍ͷʁ • ੩తʹղੳͰ͖Δൣғ͕ΊͬͪΌ૿͑Δ • ࣮ߦͤͣʹΘ͔Δ͜ͱ͕ͨ͘͞Μ͋Δ •
ܕ࠷ίʔυʹີணͨ͠ςετͩ • ૣظͷόάݕग़Ͱ։ൃʹඅͤΔ࣌ؒ++
Why Type ?? • IDEΤσΟλ͕͍͘͢ͳΔ • ίʔυؒͷؔੑ͕໌֬ • ఆٛδϟϯϓਖ਼֬ͳೖྗิ •
ָʹ։ൃΛਐΊΒΕΔ • →ߟ͑Δࣄʹ͑Δ࣌ؒ++
TypeScript ֓ཁ ·ͣΞτϥΠϯ͔Β
ECMAScript ͱ • ECMAScriptJavaScriptͷඪ४ن֨ • 3, 5, 2015, 2016, 2017...
ͳͲ͕ଘࡏ͢Δ • 6 → 2015 ʹͳΓ·ͨ͠ • 2015Ͱclass, module ͳͲ৽ن࠾༻ ཁ͢Δʹ == JavaScript goo.gl/lZyVX8
ECMAScript ͱ • ͪͳΈʹ • TypeScriptECMAScriptͷsuperset • →ߏจʹ΄΅શͳޓੑ͕͋Δ • →શͯͷJSίʔυTSͱͯ͠ਖ਼͍͠
Ұ෦ಠࣗͷ֦ு͕͋Δ namespace, enum, ҾϓϩύςΟએݴ…etc
ͪΐͬͱུޠͷղઆ • ES → ECMAScript • JS → JavaScript •
TS → TypeScript • AltJS → Alternative JS AltJSΘΓͱద ସ
AltJSඞཁͩͬͨ • લఏɿES 5ਏ͍… • Կ͔ to JS Ͱܰݮ͍ͨ͠…ʂ •
CoffeeScript • Dart • TypeScript • Babel & Flowtype Babelਖ਼ ධՁͰ͖Δ΄Ͳ ͬͯ·ͤΜ(খ
Ұ൪༏͍͠AltJS • CoffeeScriptɺES5ΑΓϚγ • ͰΊͬͪΌόάΔʢܕແ͍ • ܕʹཔͬͯੜ͖ͯΔϚϯʹਏ͍… • DartʹυϋϚϦ •
ͰϩοΫΠϯා͍… • ίϯύΠϧޙJSਓؒʹಡΊͳ͍ • ܧଓੑʹ֬৴͕࣋ͯͳ͍ ձࣾͰ࠾༻ා͔ͬͨ…
Ұ൪༏͍͠AltJS • TypeScriptొ • ϩοΫΠϯා͘ͳ͍ʂ • →ଈ࠾༻ʂ • babelʢ6to5ʣొTSͷޙ 2014/10
ͱ͔
TypeScript͕ੜ͢ΔJSίʔυ • HTML + ES Modules ྫ • Classes ྫ
• Types ྫ • Downpile ྫ ϩοΫΠϯ͞Εͳ͍ ཧ༝Λݟͤ·͢ʂ
HTML+ES Modules <html> <body> <script type="module" src="./lib/index.js"></script> </body> </html> import
{ hello } from "./sub.js"; alert(hello("es module")); export function hello(word = "world") { return `Hello, ${word}`; }
มޙ <html> <body> <script type="module" src="./lib/index.js"></script> </body> </html> import {
hello } from "./sub.js"; alert(hello("es module")); export function hello(word = "world") { return `Hello, ${word}`; } ΄΅Ұக
Classes TSฤ export abstract class Animal { abstract bark(): string;
} export class Cat extends Animal { bark(): string { return "ʹΌʔΜ"; } } const cat = new Cat(); console.log(cat.bark());
Classes JS(esnext)ฤ export class Animal { } export class Cat
extends Animal { bark() { return "ʹΌʔΜ"; } } const cat = new Cat(); console.log(cat.bark());
Classes JS(es5)ฤ "use strict"; var __extends = (this && this.__extends)
|| (function () { var extendStatics = Object.setPrototypeOf || ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) || function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; }; return function (d, b) { extendStatics(d, b); function __() { this.constructor = d; } d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __()); }; })(); Object.defineProperty(exports, "__esModule", { value: true }); var Animal = (function () { function Animal() { } return Animal; }()); exports.Animal = Animal; var Cat = (function (_super) { __extends(Cat, _super); function Cat() { return _super !== null && _super.apply(this, arguments) || this; } Cat.prototype.bark = function () { return "ʹΌʔΜ"; }; return Cat; }(Animal)); exports.Cat = Cat; var cat = new Cat(); console.log(cat.bark());
Types TSฤ export interface Container<T> { data: T; } export
function unwrap<T>(container: Container<T>): T { return container.data; } type RetStringFunc = () => string; const container: Container<RetStringFunc> = { data: () => "Hello, world", }; const func = unwrap(container); console.log(func());
Types JS(esnext)ฤ export function unwrap(container) { return container.data; } const
container = { data: () => "Hello, world", }; const func = unwrap(container); console.log(func());
Downpile TSฤ function* primes() { const primes: number[] = [];
for (let i = 2; ; i++) { if (primes.some(prime => i % prime === 0)) { continue; } primes.push(i); yield i; } } for (const prime of primes()) { if (100 < prime) { break; } console.log(prime); } ΄΅શʹ ੜJSʂ : number[] ͷΈ
Downpile JS(es5)ฤ "use strict"; var __generator = (this && this.__generator)
|| function (thisArg, body) { var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g; return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g; function verb(n) { return function (v) { return step([n, v]); }; } function step(op) { if (f) throw new TypeError("Generator is already executing."); while (_) try { if (f = 1, y && (t = y[op[0] & 2 ? "return" : op[0] ? "throw" : "next"]) && !(t = t.call(y, op[1])).done) return t; if (y = 0, t) op = [0, t.value]; switch (op[0]) { case 0: case 1: t = op; break; case 4: _.label++; return { value: op[1], done: false }; case 5: _.label++; y = op[1]; op = [0]; continue; case 7: op = _.ops.pop(); _.trys.pop(); continue; default: if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; } if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; } if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; } if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; } if (t[2]) _.ops.pop(); _.trys.pop(); continue; } op = body.call(thisArg, _); } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; } if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true }; } }; var __values = (this && this.__values) || function (o) { var m = typeof Symbol === "function" && o[Symbol.iterator], i = 0; if (m) return m.call(o); return { next: function () { if (o && i >= o.length) o = void 0; return { value: o && o[i++], done: !o }; } }; }; function primes() { var primes, _loop_1, i; return __generator(this, function (_a) { switch (_a.label) { case 0: primes = []; _loop_1 = function (i) { return __generator(this, function (_a) { switch (_a.label) { case 0: if (primes.some(function (prime) { return i % prime === 0; })) { return [2 /*return*/, "continue"]; } primes.push(i); return [4 /*yield*/, i]; case 1: _a.sent(); return [2 /*return*/]; } }); }; i = 2; _a.label = 1; case 1: return [5 /*yield**/, _loop_1(i)]; case 2: _a.sent(); _a.label = 3; case 3: i++; return [3 /*break*/, 1]; case 4: return [2 /*return*/]; } }); } try { for (var _a = __values(primes()), _b = _a.next(); !_b.done; _b = _a.next()) { var prime = _b.value; if (100 < prime) { break; } console.log(prime); } } catch (e_1_1) { e_1 = { error: e_1_1 }; } finally { try { if (_b && !_b.done && (_c = _a.return)) _c.call(_a); } finally { if (e_1) throw e_1.error; } } var e_1, _c; ৽͠Ίͷ ίʔυͰ ࢮͳͳ͍ʂ
࠷ۙͷ • Google͕TSΛࣾඪ४ݴޠʹՃ • https://goo.gl/eAyx0T • ঝೝϓϩηεʹ2͔͔ͬͨΒ͍͠ • Slack͕TypeScriptʹҠߦ •
https://goo.gl/S4P7PR • όάݕग़ʹޮՌ༗Γ ࣮ͱ͔͍͏ εςʔδӽ͑ͨ
JSͱͷߏจൺֱ • มʹର͢Δܕऍ • ؔʹର͢Δܕऍ • ߏత෦ܕ • type assertion
• ͦͷଞࡉ͔͍දݱ͕ͨ͘͞Μ • →JS͕ࣗ༝͗͢ΔͷͰ ੲؤுΕ ͋Β͔ͨհͰ͖ͨ ࠓ͏ແཧ…
มʹର͢Δܕऍ // ม໊ͷޙʹ : ܕ໊ let str: string = "";
// ܕʹ͢ΔΛೖΕΑ͏ͱ͢ΔͱίϯύΠϧΤϥʔ str = 1; // ઃఆ࣍ୈͰ null undefined νΣοΫՄೳ str = null; str = undefined; let num = 1; // ͔Βܕ͕ਪ͞ΕΔͷͰnumberҎ֎μϝ num = "string"; // ྻͱ͔ unionܕͱ͔ let array: (number | string)[] = [1, "str"];
ؔʹର͢Δܕऍ // ԾҾͷޙʹ : ܕ໊ & ฦΓͷܕ໊ let twice: (num:
number) => number; twice = num => num * 2; console.log(twice(2)); // লུՄೳҾ let helloA = (word?: string) => { word = word || "world"; return `Hello, ${word}`; }; console.log(helloA()); // σϑΥϧτ͖Ҿ (ES2015) let helloB = (word: string = "world") => { return `Hello, ${word}`; }; console.log(helloB());
ؔʹର͢Δܕऍ // ԾҾͷޙʹ : ܕ໊ & ฦΓͷܕ໊ let twice: (num:
number) => number; twice = num => num * 2; console.log(twice(2)); // লུՄೳҾ let helloA = (word?: string) => { word = word || "world"; return `Hello, ${word}`; }; console.log(helloA()); // σϑΥϧτ͖Ҿ (ES2015) let helloB = (word: string = "world") => { return `Hello, ${word}`; }; console.log(helloB());
ߏత෦ܕ class SampleA { name: string; constructor(name: string) { this.name
= name; } } interface SampleB { name: string; } let objA: SampleA = new SampleA("A"); let objB: SampleB = { name: "B" }; // ίϯύΠϧΤϥʔʹͳΒͳ͍ʂ // SampleA ͱ SampleB ಉ͡ੑ࣭Λຬͨ͢ͷͰޓੑ͕͋Δ objA = objB;
type assertion // type assersionΛߦ͏ͱܕΛมͰ͖Δ // ԿͰOKΛද͢ any ΛڬΊ͖ͳ͜ͱ͕Ͱ͖Δ //
ؾܰʹ͍͚ͬͯͳ͍…ʂ let objA: string = new Date() as any as string; // ͜͏͍͏ॻ͖ํͰ͖Δ let objB: string = <string><any>new Date();
Version Up ͷาΈ • 2012/10/01 v0.8.0 • 2014/04/02 v1.0.0 •
2016/09/22 v2.0.3 • ΄΅ܥͰʁ • 2017/04/28 v2.3.2 GMTͰ͢
2.0Ҏ߱ͷTypeScript • ܕͷॊೈ͞ͷ֦େ • JSͷࣗ༝ͷରԠ্ • ৽͍͠ES༷ͷରԠ • ES༷ͷ४ڌ্ •
downpileͷରԠൣғ֦େ • Quick Fixͷ֦ॆ རศੑ ॊೈੑͷ ֦େ͕ϝΠϯ
downpileͷڧԽ • async/awaitͷαϙʔτ • generatorͷdownpile BabelͳΒ Ͱ͖Δͷʹ… ͕ղফʂ
طଘࢿ࢈ͷ׆༻ • JSϥΠϒϥϦΛ͍͍ͨʂ • ܕఆٛϑΝΠϧΛޙ͚ • ·ΔͰܕ͕͋ΔΈ͍ͨʂ • ܕఆٛϑΝΠϧ •
ࣗͰॻ͘ • DefinitelyTypedͰ୳͢ • microsoft.github.io/TypeSearch/ • npm install -D @types/node npmܦ༝ʹ ౷Ұʂ
vs Babel • ݁ہͲͬͪΛ࠾༻͖͢ʂʁ • →νʔϜ࣍ୈ • RubyΑΓJava • →RubyΛબ͠ޭ͢ΔνʔϜ͋Δ
• TSΛ͓͢͢Ί͢Δਓ • IDEϦονͳΤσΟλ΄͍͠ʂ • JavaC#͕͖ʂ • ҆શͳϦϑΝΫλϦϯάʂ ΄΅ फڭઓ૪ σϞΔʁ
vs ੜJavaScript • ݱ࣌Ͱ͍͠ • ͕͍͍࣌ͭͯͳ͍ • bundler͕·ͩඞཁ • IE11͍ͭΔͷ
• ϥΠϑλΠϜ͕·ͩ·ͩ͋Δ • Ҋ݅ͷҒ͍ਓIE11 πʔϧ ͍͠… ΊΖʔʂ
TypeScript ಋೖฤ • npm init —yes • npm install -D
typescript • tsc —init • npm-scripts • "build": “tsc" • VSCodeͷઃఆͳͲ Node.jsࣗମ nodebrew͕͓͢͢Ίʂ Windowsͷ߹…ʁ
TypeScript ܕFight • ܕఆٛϑΝΠϧࣗ࡞Ͱ͖Δͱخ͍͠… • Document & Handbook • www.typescriptlang.org/docs/home.html
• Revised TypeScript in Definitelyland • qiita.com/vvakame • όʔδϣϯࠩ·ͱΊ ॻ͍ͯ·͢ ࣾʹ1ਓ ܕϑΝΠλʔ͕͍Δͱྑ͍ ಘ͍
Language Server Protocol ུͯ͠LSPͩʂ
Language Server Protocol • ͱΓ͋͑ͣLSPͱུ͢ • ͖ͳIDEɾΤσΟλΛ͍͍ͨʂ • ͖ͳݴޠͰ։ൃΛ͍ͨ͠ʂ •
ΑΖ͍͠ɺͳΒLSPͩʂ
LSPͷߟ͑ํ • ݴޠͷࣄΛҰ൪Α͍ͬͯ͘Δͷʁ • ίϯύΠϥͷมߋʹ࠷Ͱ͍͍ͭͯ͘ͷʁ • ίʔυͱܕͷؔΛҰ൪Α͍ͬͯ͘Δͷʁ • ίϯύΠϧΤϥʔʹͳΔ͔֬ೝͰ͖Δͷʁ •
ͦ͏ʂίϯύΠϥࣗମ͕࠷ڧͩʂ ࠷ڧʹͤΔ is ࠷ߴ
ΑΖ͍͠ͳΒίϯύΠϥͩʂ • ΤσΟλͱҰ൪ྑ͘͢Δ͖ͳͷ ίϯύΠϥͳͷͰʁ • ίϯύΠϥͳͲ͔ΒΤσΟλͰ ʹཱͭใΛऔΓग़ͦ͏ʂ ݸผʹؤுΔ ͦΜͳͷ͍ͩ
LSPͷ༷ • Microsoft͕ͬͯΔ • github.com/Microsoft/language-server-protocol • ΤσΟλˠClient • ݴޠଆˠServer •
JSON-RPCͰϓϩηεؒ௨৴ • ΤσΟλͰཱͭใΛΓͱΓ ࣮ݴޠґଘΛ͔ΘͤΔ
LSP ಈ࡞Πϝʔδ
͜ΕɺTypeScriptʹ͋Γ·͢ • tsserverίϚϯυ • Language ServiceΛϥοϓ • ଟ͘ͷΤσΟλͰߴΫΦϦςΟͷ TypeScriptαϙʔτ •
VSCode, Atom, WebStorm, Vim etc.. • ཪʹtsserver͕ʂ • tsserver࣮LSP४ڌͰͳ͍… • ઌۦऀ͔ͩΒͶ ํͳ͍Ͷ goo.gl/HD4noG
TypeScriptͷΞʔΩςΫνϟ github.com/Microsoft/TypeScript/wiki/ Architectural-Overview
ࠓ·Ͱͷ։ൃڥͷߏ http://langserver.org/ ΤσΟλ×ݴޠ ͜Εਏ͍
after LSPͷߏ http://langserver.org/ ΤσΟλ + ݴޠ ݸผ։ൃͩͱϚγ
• JSX https://jsx.github.io/ • ͱ͍͏DeNA࢈ͷAltJS͕͋ͬͨ • Eclipse༻ϓϥάΠϯ͕ཉ͔ͬͨ͠ • https://github.com/vvakame/jsx-plugin-for-eclipse •
͍͢͝ਏ͍ • ݴޠ֦ுϓϥάΠϯͷ ࡞ΓํͷखҾ͕΄΅ͳ͍ JSX + EclipseϓϥάΠϯͷࢥ͍ग़ μϯδϣϯ͔ Կ͔ʹ͍ۙ
εΩϧϛεϚον • ݴޠ։ൃऀ • ػೳ։ൃ͍ͨ͠ • IDEɾΤσΟλ։ൃऀ • શݴޠରԠͱ͔ඇݱ࣮త •
ϓϥάΠϯͰͳΜͱ͔ͯ͠Ͷ • ී௨ʹίʔυॻ͖͍ͨਓ • ↑࣌ʹϓϥάΠϯॻ͔͟ΔΛ͑ͳ͍ • ׳Εͯͳ͍ͷͰଟେͳۤ௧Λ͏ ୭͕టΛ ඃΔͷ͔
LSPͷҙٛ • LSPʹରԠ͍ͯ͠Εݸผ։ൃෆཁʂ • ࠓͷͱ͜Ζӕ • ݸผ։ൃͷ͕େ෯ʹݮΔͷࣄ࣮ • OmniSharp͕ྑ͍ίϯηϓτΛ͍࣋ͬͯͨ •
TypeScripttsserverΛ࣋ͬͨ • "ඪ४"͕͋Δͱ͕ૣ͍
LSPͬͯΈͨ • ࣗͰ࡞ͬͯΈͨ • prhͱ͍͏ٕज़ॻͳͲߍਖ਼༻πʔϧ • ͜ΕΛLSPରԠͤͯ͞ΈΑ͏ʂ • ࣮Ͱ͖ͨػೳ •
ྑ͘ͳ͍දݱͷݕग़ • Quick Fix • จॻதͷશީิΛҰׅFix • ઃఆͷࣗಈ࠶ಡࠐ github.com/prh/ vscode-prh-extention
LSPͬͯΈͨ • ن • languageserver 300ߦ • vscode֦ு 100ߦ •
ࣦͬͨͷ ΰʔϧσϯΟʔΫ • σϞ • VSCode্Ͱಈ༷͘ࢠ Θ͔Ε؆୯ʂ
Type Hierarchyͱ͔ ͋Γͦ͏Ͱͳ͍ͷ goo.gl/aIZBeS
ࢀߟࢿྉ • github.com/prh/prh-languageserver • github.com/Microsoft/vscode-tslint • github.com/Microsoft/vscode-languageserver-node • github.com/Microsoft/vscode-languageserver-node-example
ؔ࿈npmύοέʔδ • Server • vscode-languageserver • vscode-uri • Client (VSCode
ext) • vscode-languageclient • ֤Language Serverͷύε
࣮ͯ͠Έ͍ͨਓ͚ͷઆ໌ • ֤छΠϕϯτϋϯυϥΛŹžŹž͑جຊOK • σόοάׂ͕ΓͱΊΜͲ͍ • Node.jsϓϩηεʹΞλον͍ͨ͠… • ϩάग़ྗͰΓΔ… •
***.trace.server Λඞͣ༻ҙ VSCodeҎ֎ͷ ಈ࡞ݕূ…
ͱ͜ΖͰtsserver • LSP४ڌͰͳ͍ʂ • v1.5.3Ͱొ 2015/7/20 • LSPϦϙδτϦ 2015/9/4 ํͳ͍Ͷ…
github.com/Microsoft/TypeScript/issues/11274
ͦͷଞ • Rust Language Server • github.com/rust-lang-nursery/rls • Jonathand Turnerࢯͱ͔͕࡞ͬͯΔ
• RustࣗମػೳΛϗετͤͣ • ਫ਼ظͨ͠΄ͲͰͳ͍ • list.get(0). Ͱิ͕Ͱͳ͘ͳͬͨΓ Rust+WASMॻ͍ͨ goo.gl/kjMffu
ͦͷଞ • ݴޠࣗମʹLanguage Service͕Έࠐ·ΕͯΔྫ͕ ͦͦগͳ͍ • ࠓޙͲ͏ͳΔʁʁ • TypeScriptଚ͍… ॳظઃܭ͔ΒΈࠐ·ΕͯΔͱڧ͍ʂ
Language Service Plugin ུͯ͠LSPͩʂ
Language Service Plugin • ͱΓ͋͑ͣLSPͱུ… ةݥ͕ةͳ͍ʂ • ΊΜͲ͍ͷͰϓϥάΠϯͱݺ΅͏ • ͜ΕTypeScriptݻ༗ͷػೳ
• Language Serviceͷॲཧʹ1ຕטΊΔ • ͭ·Γtsserverʹ1ຕטΊΔ • tscʹטΊͳ͍ ηογϣϯλΠτϧ ࠷ॳؒҧ͑ͯ·ͨ͠…
࠶ܝ github.com/Microsoft/TypeScript/wiki/ Architectural-Overview
ͭ·Γ…ʁ • ΤσΟλΛ֦ுͰ͖Δʂ • LS→ϓϥάΠϯ→tsserver→ΤσΟλ • TSίʔυதͷผݴޠʹೖྗิΛ͋ͯͨΓ • lintΛಈ͔ͨ͠Γ
Ͱ͖ͳ͍ࣄ • tscͷॲཧʹטΊͳ͍ • ίϯύΠϧ݁ՌΛม͑Δ • ίϯύΠϧͷ͍ͭͰʹtslintΛΒͤΔ tscͰಈ͘ͱ ଟ͘ͷπʔϧ͔Β ແବ͕ݮΒͤͦ͏…ʁ
࣮ੈքͰͷར༻ྫ • @angular/language-service • ts-graphql-plugin github.com/Microsoft/TypeScript/wiki/ Writing-a-Language-Service-Plugin
࣮ࡍʹͬͯΈͨ • github.com/vvakame/typescript-plugin-example • Quick Infoͱೖྗิީิʹ Λ͚ͭΔ • ͚ͩ •
σϞ tsconfig.jsonʹ ઃఆ͕ඞཁͩͧ
͓͞Β͍ • TypeScript • ϩοΫΠϯ͞ΕͮΒ͍ • IDEΤσΟλ͕ߴػೳ • ࠾༻ࣄྫ૿͑ͨ •
Language Server Protocol • ָ͍͠ʂ • ଞݴޠʹঃʑʹ͕Δ͔ ͜ͷޙAsk the speakerͰ ૬ஊͱ͔Ͱ͖·͢ʂ
͋Γ͕ͱ͏͍͟͝·ͨ͠
NOTE • TS ϦϦʔεαΠΫϧͷ • TypeScriptίϯύΠϥTypeScriptͰॻ͔Ε͍ͯΔ • tsfmtͷհ • SalsaͷʢJSͷΤϯδϯΛ݉ͶΔTS
LSͷʣ