Slide 1

Slide 1 text

TypeScriptͷ֓ཁͱ Language Server Protocol @vvakame Θ͔Ί ·͞ͻΖ #decode17 #MW09

Slide 2

Slide 2 text

Θ͔Ί ·͞ͻΖ @v vakame TypeScript Masahiro Wakame DefinitelyTyped Angular GAE/Go

Slide 3

Slide 3 text

San Francisco

Slide 4

Slide 4 text

Google I/O

Slide 5

Slide 5 text

ؼࠃ͔Β3೔ GCPͱ͔νϣτΘ͔Γ·͢

Slide 6

Slide 6 text

ॻ͍ͨຊ • TypeScriptϦϑΝϨϯε Ver 1.0ରԠ • ΊͬͪΌݹ͍ͷͰࠓͱͳͬͯ͸ΦεεϝͰ͖ͳ͍ • Revised TypeScript in Definitelyland • v2.0.0४ڌ • ແྉެ։ͯ͠·͢ goo.gl/mcF92t

Slide 7

Slide 7 text

Ξϯέʔτ • JavaScript ?? • TypeScript ?? • Language Server Protocol ?? Ͳ͜ʹڵຯ͕ ͋Γ·͔͢ʁ

Slide 8

Slide 8 text

TypeScriptΛ… • ຖ೔࢖ͬͯ·͢ʂ • 1ճࢼ͠·ͨ͠ • ڵຯ͸͋Δ • Babel΍flowtype࢖ͬͯ·͢ʂ શһ࢖͓͏ʂ

Slide 9

Slide 9 text

޷͖উखʹ࿩Λ͢Δͧʂ • ͱࢥ͍ͬͯͨ࣌ظ͕ࢲʹ΋͋Γ·ͨ͠ • "TypeScript" ؚ͕·ΕΔηογϣϯ • 1݅ • ๻͚ͩͰ͔͢ʂʁ গ͠ਅ໘໨ʹ͠Α… Buildʹ΋2ݸ͔͠ͳ͍

Slide 10

Slide 10 text

TypeScript? TypeScript͸͍͍ͧ

Slide 11

Slide 11 text

Why Type ?? • ܕ͕͋ΔͱԿ͕͍͍ͷʁ • ੩తʹղੳͰ͖Δൣғ͕ΊͬͪΌ૿͑Δ • ࣮ߦͤͣʹΘ͔Δ͜ͱ͕ͨ͘͞Μ͋Δ • ܕ͸࠷΋ίʔυʹີணͨ͠ςετͩ • ૣظͷόάݕग़Ͱ։ൃʹඅ΍ͤΔ࣌ؒ++

Slide 12

Slide 12 text

Why Type ?? • IDE΍ΤσΟλ͕࢖͍΍͘͢ͳΔ • ίʔυؒͷؔ܎ੑ͕໌֬ • ఆٛ΁δϟϯϓ΍ਖ਼֬ͳೖྗิ׬ • ָʹ։ൃΛਐΊΒΕΔ • →ߟ͑Δࣄʹ࢖͑Δ࣌ؒ++

Slide 13

Slide 13 text

TypeScript ֓ཁ ·ͣ͸Ξ΢τϥΠϯ͔Β

Slide 14

Slide 14 text

ECMAScript ͱ͸ • ECMAScript͸JavaScriptͷඪ४ن֨ • 3, 5, 2015, 2016, 2017... ͳͲ͕ଘࡏ͢Δ • 6 → 2015 ʹͳΓ·ͨ͠ • 2015Ͱclass, module ͳͲ৽ن࠾༻ ཁ͢Δʹ == JavaScript goo.gl/lZyVX8

Slide 15

Slide 15 text

ECMAScript ͱ͸ • ͪͳΈʹ • TypeScript͸ECMAScriptͷsuperset • →ߏจʹ΄΅׬શͳޓ׵ੑ͕͋Δ • →શͯͷJSίʔυ͸TSͱͯ͠΋ਖ਼͍͠ Ұ෦ಠࣗͷ֦ு͕͋Δ namespace, enum, Ҿ਺ϓϩύςΟએݴ…etc

Slide 16

Slide 16 text

ͪΐͬͱུޠͷղઆ • ES → ECMAScript • JS → JavaScript • TS → TypeScript • AltJS → Alternative JS AltJS͸ΘΓͱద౰ ୅ସ

Slide 17

Slide 17 text

AltJS͸ඞཁͩͬͨ • લఏɿES 5͸ਏ͍… • Կ͔ to JS Ͱܰݮ͍ͨ͠…ʂ • CoffeeScript • Dart • TypeScript • Babel & Flowtype Babel͸ਖ਼௚ ධՁͰ͖Δ΄Ͳ ࢖ͬͯ·ͤΜ(খ੠

Slide 18

Slide 18 text

Ұ൪༏͍͠AltJS • CoffeeScriptɺES5ΑΓϚγ • Ͱ΋ΊͬͪΌόάΔʢܕແ͍ • ܕʹཔͬͯੜ͖ͯΔϚϯʹ͸ਏ͍… • DartʹυϋϚϦ • Ͱ΋ϩοΫΠϯ͸ා͍… • ίϯύΠϧޙJS͸ਓؒʹ͸ಡΊͳ͍ • ܧଓੑʹ֬৴͕࣋ͯͳ͍ ձࣾͰ࠾༻͸ා͔ͬͨ…

Slide 19

Slide 19 text

Ұ൪༏͍͠AltJS • TypeScriptొ৔ • ϩοΫΠϯා͘ͳ͍ʂ • →ଈ࠾༻ʂ • babelʢ6to5ʣొ৔͸TSͷޙ 2014/10 ͱ͔

Slide 20

Slide 20 text

TypeScript͕ੜ੒͢ΔJSίʔυ • HTML + ES Modules ྫ • Classes ྫ • Types ྫ • Downpile ྫ ϩοΫΠϯ͞Εͳ͍ ཧ༝Λݟͤ·͢ʂ

Slide 21

Slide 21 text

HTML+ES Modules import { hello } from "./sub.js"; alert(hello("es module")); export function hello(word = "world") { return `Hello, ${word}`; }

Slide 22

Slide 22 text

ม׵ޙ import { hello } from "./sub.js"; alert(hello("es module")); export function hello(word = "world") { return `Hello, ${word}`; } ΄΅Ұக

Slide 23

Slide 23 text

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());

Slide 24

Slide 24 text

Classes JS(esnext)ฤ export class Animal { } export class Cat extends Animal { bark() { return "ʹΌʔΜ"; } } const cat = new Cat(); console.log(cat.bark());

Slide 25

Slide 25 text

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());

Slide 26

Slide 26 text

Types TSฤ export interface Container { data: T; } export function unwrap(container: Container): T { return container.data; } type RetStringFunc = () => string; const container: Container = { data: () => "Hello, world", }; const func = unwrap(container); console.log(func());

Slide 27

Slide 27 text

Types JS(esnext)ฤ export function unwrap(container) { return container.data; } const container = { data: () => "Hello, world", }; const func = unwrap(container); console.log(func());

Slide 28

Slide 28 text

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[] ͷΈ

Slide 29

Slide 29 text

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; ৽͠Ίͷ ίʔυͰ ࢮͳͳ͍ʂ

Slide 30

Slide 30 text

࠷ۙͷ৘੎ • Google͕TSΛࣾ಺ඪ४ݴޠʹ௥Ճ • https://goo.gl/eAyx0T • ঝೝϓϩηεʹ2೥͔͔ͬͨΒ͍͠ • Slack͕TypeScriptʹҠߦ • https://goo.gl/S4P7PR • όάݕग़ʹޮՌ༗Γ ΋͸΍࣮੷ͱ͔͍͏ εςʔδ͸ӽ͑ͨ

Slide 31

Slide 31 text

JSͱͷߏจൺֱ • ม਺ʹର͢Δܕ஫ऍ • ؔ਺ʹର͢Δܕ஫ऍ • ߏ଄త෦෼ܕ • type assertion • ͦͷଞࡉ͔͍දݱ͕ͨ͘͞Μ • →JS͕ࣗ༝͗͢ΔͷͰ ੲ͸ؤுΕ͹ ͋Β͔ͨ঺հͰ͖ͨ ࠓ͸΋͏ແཧ…

Slide 32

Slide 32 text

ม਺ʹର͢Δܕ஫ऍ // ม਺໊ͷޙʹ : ܕ໊ let str: string = ""; // ܕʹ൓͢Δ஋ΛೖΕΑ͏ͱ͢ΔͱίϯύΠϧΤϥʔ str = 1; // ઃఆ࣍ୈͰ null ΍ undefined ΋νΣοΫՄೳ str = null; str = undefined; let num = 1; // ஋͔Βܕ͕ਪ࿦͞ΕΔͷͰnumberҎ֎͸μϝ num = "string"; // ഑ྻͱ͔ unionܕͱ͔ let array: (number | string)[] = [1, "str"];

Slide 33

Slide 33 text

ؔ਺ʹର͢Δܕ஫ऍ // ԾҾ਺ͷޙʹ : ܕ໊ & ฦΓ஋ͷܕ໊ 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());

Slide 34

Slide 34 text

ؔ਺ʹର͢Δܕ஫ऍ // ԾҾ਺ͷޙʹ : ܕ໊ & ฦΓ஋ͷܕ໊ 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());

Slide 35

Slide 35 text

ߏ଄త෦෼ܕ 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;

Slide 36

Slide 36 text

type assertion // type assersionΛߦ͏ͱܕΛม׵Ͱ͖Δ // ԿͰ΋OKΛද͢ any ΛڬΊ͹޷͖ͳ͜ͱ͕Ͱ͖Δ // ؾܰʹ࢖ͬͯ͸͍͚ͳ͍…ʂ let objA: string = new Date() as any as string; // ͜͏͍͏ॻ͖ํ΋Ͱ͖Δ let objB: string = new Date();

Slide 37

Slide 37 text

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Ͱ͢

Slide 38

Slide 38 text

2.0Ҏ߱ͷTypeScript • ܕͷॊೈ͞ͷ֦େ • JSͷࣗ༝౓΁ͷରԠ౓޲্ • ৽͍͠ES࢓༷΁ͷରԠ • ES࢓༷΁ͷ४ڌ౓޲্ • downpileͷରԠൣғ֦େ • Quick Fixͷ֦ॆ རศੑ΍ ॊೈੑͷ ֦େ͕ϝΠϯ

Slide 39

Slide 39 text

downpileͷڧԽ • async/awaitͷαϙʔτ • generatorͷdownpile BabelͳΒ Ͱ͖Δͷʹ… ͕ղফʂ

Slide 40

Slide 40 text

طଘࢿ࢈ͷ׆༻ • JSϥΠϒϥϦΛ࢖͍͍ͨʂ • ܕఆٛϑΝΠϧΛޙ෇͚ • ·ΔͰܕ͕͋ΔΈ͍ͨʂ • ܕఆٛϑΝΠϧ • ࣗ෼Ͱॻ͘ • DefinitelyTypedͰ୳͢ • microsoft.github.io/TypeSearch/ • npm install -D @types/node npmܦ༝ʹ ౷Ұʂ

Slide 41

Slide 41 text

vs Babel • ݁ہͲͬͪΛ࠾༻͢΂͖ʂʁ • →νʔϜ࣍ୈ • ๻͸RubyΑΓ͸Java೿ • →RubyΛબ୒͠੒ޭ͢ΔνʔϜ΋͋Δ • TSΛ͓͢͢Ί͢Δਓ • IDE΍ϦονͳΤσΟλ΄͍͠ʂ • Java΍C#͕޷͖ʂ • ҆શͳϦϑΝΫλϦϯάʂ ΄΅ फڭઓ૪ σϞΔʁ

Slide 42

Slide 42 text

vs ੜJavaScript • ݱ࣌఺Ͱ͸೉͍͠ • ࣌୅͕௥͍͍ͭͯͳ͍ • bundler͕·ͩඞཁ • IE11͍ͭ੾Δͷ໰୊ • ϥΠϑλΠϜ͕·ͩ·ͩ͋Δ • Ҋ݅ͷҒ͍ਓIE11໰୊ ୤πʔϧ ೉͍͠… ΍ΊΖʔʂ

Slide 43

Slide 43 text

TypeScript ಋೖฤ • npm init —yes • npm install -D typescript • tsc —init • npm-scripts • "build": “tsc" • VSCodeͷઃఆͳͲ Node.jsࣗମ͸ nodebrew͕͓͢͢Ίʂ Windowsͷ৔߹…ʁ

Slide 44

Slide 44 text

TypeScript ܕFight • ܕఆٛϑΝΠϧࣗ࡞͸Ͱ͖Δͱخ͍͠… • Document & Handbook • www.typescriptlang.org/docs/home.html • Revised TypeScript in Definitelyland • qiita.com/vvakame • όʔδϣϯࠩ෼·ͱΊ ॻ͍ͯ·͢ ࣾ಺ʹ1ਓ ܕϑΝΠλʔ͕͍Δͱྑ͍ ಘ೉͍

Slide 45

Slide 45 text

Language Server Protocol ུͯ͠LSPͩʂ

Slide 46

Slide 46 text

Language Server Protocol • ͱΓ͋͑ͣLSPͱུ͢ • ޷͖ͳIDEɾΤσΟλΛ࢖͍͍ͨʂ • ޷͖ͳݴޠͰ։ൃΛ͍ͨ͠ʂ • ΑΖ͍͠ɺͳΒ͹LSPͩʂ

Slide 47

Slide 47 text

LSPͷߟ͑ํ • ݴޠͷࣄΛҰ൪Α͘஌͍ͬͯΔͷ͸ʁ • ίϯύΠϥͷมߋʹ࠷଎Ͱ͍͍ͭͯ͘ͷ͸ʁ • ίʔυͱܕͷؔ܎ΛҰ൪Α͘஌͍ͬͯΔͷ͸ʁ • ίϯύΠϧΤϥʔʹͳΔ͔֬ೝͰ͖Δͷ͸ʁ • ͦ͏ʂίϯύΠϥࣗମ͕࠷ڧͩʂ ࠷ڧʹ೚ͤΔ is ࠷ߴ

Slide 48

Slide 48 text

ΑΖ͍͠ͳΒ͹ίϯύΠϥͩʂ • ΤσΟλͱҰ൪஥ྑ͘͢Δ΂͖ͳͷ͸
 ίϯύΠϥͳͷͰ͸ʁ • ίϯύΠϥͳͲ͔ΒΤσΟλͰ
 ໾ʹཱͭ৘ใΛऔΓग़ͦ͏ʂ ݸผʹؤுΔ ͦΜͳͷ͸͍΍ͩ

Slide 49

Slide 49 text

LSPͷ࢓༷ • Microsoft͕΍ͬͯΔ • github.com/Microsoft/language-server-protocol • ΤσΟλˠClient • ݴޠଆˠServer • JSON-RPCͰϓϩηεؒ௨৴ • ΤσΟλͰ໾ཱͭ৘ใΛ΍ΓͱΓ ࣮૷ݴޠґଘΛ͔ΘͤΔ

Slide 50

Slide 50 text

LSP ಈ࡞Πϝʔδ

Slide 51

Slide 51 text

͜ΕɺTypeScriptʹ͋Γ·͢ • tsserverίϚϯυ • Language ServiceΛϥοϓ • ଟ͘ͷΤσΟλͰߴΫΦϦςΟͷ
 TypeScriptαϙʔτ • VSCode, Atom, WebStorm, Vim etc.. • ཪʹ͸tsserver͕ʂ • tsserver͸࣮͸LSP४ڌͰ͸ͳ͍… • ઌۦऀ͔ͩΒͶ ࢓ํͳ͍Ͷ goo.gl/HD4noG

Slide 52

Slide 52 text

TypeScriptͷΞʔΩςΫνϟ github.com/Microsoft/TypeScript/wiki/ Architectural-Overview

Slide 53

Slide 53 text

ࠓ·Ͱͷ։ൃ؀ڥͷߏ଄ http://langserver.org/ ΤσΟλ×ݴޠ ͜Ε͸ਏ͍

Slide 54

Slide 54 text

after LSPͷߏ଄ http://langserver.org/ ΤσΟλ + ݴޠ ݸผ։ൃͩͱϚγ

Slide 55

Slide 55 text

• JSX https://jsx.github.io/ • ͱ͍͏DeNA࢈ͷAltJS͕͋ͬͨ • Eclipse༻ϓϥάΠϯ͕ཉ͔ͬͨ͠ • https://github.com/vvakame/jsx-plugin-for-eclipse • ͍͢͝ਏ͍ • ݴޠ֦ுϓϥάΠϯͷ
 ࡞ΓํͷखҾ͕΄΅ͳ͍ JSX + EclipseϓϥάΠϯͷࢥ͍ग़ μϯδϣϯ͔ Կ͔ʹ͍ۙ

Slide 56

Slide 56 text

εΩϧϛεϚον໰୊ • ݴޠ։ൃऀ • ػೳ։ൃ͍ͨ͠ • IDEɾΤσΟλ։ൃऀ • શݴޠରԠͱ͔ඇݱ࣮త • ϓϥάΠϯͰͳΜͱ͔ͯ͠Ͷ • ී௨ʹίʔυॻ͖͍ͨਓ • ↑࣌ʹ͸ϓϥάΠϯॻ͔͟ΔΛ͑ͳ͍ • ׳Εͯͳ͍ͷͰଟେͳۤ௧Λ൐͏ ୭͕టΛ ඃΔͷ͔

Slide 57

Slide 57 text

LSPͷҙٛ • LSPʹରԠ͍ͯ͠Ε͹ݸผ։ൃෆཁʂ • ࠓͷͱ͜Ζӕ • ݸผ։ൃͷ޻਺͕େ෯ʹݮΔͷ͸ࣄ࣮ • OmniSharp͕ྑ͍ίϯηϓτΛ͍࣋ͬͯͨ • TypeScript΋tsserverΛ࣋ͬͨ • "ඪ४"͕͋Δͱ࿩͕ૣ͍

Slide 58

Slide 58 text

LSP΍ͬͯΈͨ • ࣗ෼Ͱ࡞ͬͯΈͨ • prhͱ͍͏ٕज़ॻͳͲߍਖ਼༻πʔϧ • ͜ΕΛLSPରԠͤͯ͞ΈΑ͏ʂ • ࣮૷Ͱ͖ͨػೳ • ྑ͘ͳ͍දݱͷݕग़ • Quick Fix • จॻதͷશީิΛҰׅFix • ઃఆͷࣗಈ࠶ಡࠐ github.com/prh/ vscode-prh-extention

Slide 59

Slide 59 text

LSP΍ͬͯΈͨ • ن໛ • languageserver ໿300ߦ • vscode֦ு ໿100ߦ • ࣦͬͨ΋ͷ ΰʔϧσϯ΢ΟʔΫ • σϞ • VSCode্Ͱಈ༷͘ࢠ Θ͔Ε͹؆୯ʂ

Slide 60

Slide 60 text

Type Hierarchyͱ͔ ͋Γͦ͏Ͱͳ͍΋ͷ΋ goo.gl/aIZBeS

Slide 61

Slide 61 text

ࢀߟࢿྉ • github.com/prh/prh-languageserver • github.com/Microsoft/vscode-tslint • github.com/Microsoft/vscode-languageserver-node • github.com/Microsoft/vscode-languageserver-node-example

Slide 62

Slide 62 text

ؔ࿈npmύοέʔδ • Server • vscode-languageserver • vscode-uri • Client (VSCode ext) • vscode-languageclient • ֤Language Server΁ͷύε

Slide 63

Slide 63 text

࣮૷ͯ͠Έ͍ͨਓ޲͚ͷઆ໌ • ֤छΠϕϯτϋϯυϥΛŹžŹž࢖͑͹جຊOK • σόοάׂ͕ΓͱΊΜͲ͍ • Node.jsϓϩηεʹΞλον͍ͨ͠… • ϩάग़ྗͰ৐Γ੾Δ… • ***.trace.server Λඞͣ༻ҙ VSCodeҎ֎ͷ ಈ࡞ݕূ͸…

Slide 64

Slide 64 text

ͱ͜ΖͰtsserver͸ • LSP४ڌͰ͸ͳ͍ʂ • v1.5.3Ͱొ৔ 2015/7/20 • LSPϦϙδτϦ 2015/9/4 ࢓ํͳ͍Ͷ… github.com/Microsoft/TypeScript/issues/11274

Slide 65

Slide 65 text

ͦͷଞ • Rust Language Server • github.com/rust-lang-nursery/rls • Jonathand Turnerࢯͱ͔͕࡞ͬͯΔ • Rustࣗମ͸ػೳΛϗετͤͣ • ਫ਼౓͸ظ଴ͨ͠΄ͲͰ͸ͳ͍ • list.get(0). Ͱิ׬͕Ͱͳ͘ͳͬͨΓ Rust+WASMॻ͍ͨ goo.gl/kjMffu

Slide 66

Slide 66 text

ͦͷଞ • ݴޠࣗମʹLanguage Service͕૊Έࠐ·ΕͯΔྫ͕ ͦ΋ͦ΋গͳ͍ • ࠓޙͲ͏ͳΔʁʁ • TypeScriptଚ͍… ॳظઃܭ͔Β૊Έࠐ·ΕͯΔͱڧ͍ʂ

Slide 67

Slide 67 text

Language Service Plugin ུͯ͠LSPͩʂ

Slide 68

Slide 68 text

Language Service Plugin • ͱΓ͋͑ͣLSPͱུ… ةݥ͕ةͳ͍ʂ • ΊΜͲ͍ͷͰϓϥάΠϯͱݺ΅͏ • ͜Ε͸TypeScriptݻ༗ͷػೳ • Language Serviceͷॲཧʹ1ຕטΊΔ • ͭ·Γtsserverʹ΋1ຕטΊΔ • tscʹ͸טΊͳ͍ ηογϣϯλΠτϧ ࠷ॳؒҧ͑ͯ·ͨ͠…

Slide 69

Slide 69 text

࠶ܝ github.com/Microsoft/TypeScript/wiki/ Architectural-Overview

Slide 70

Slide 70 text

ͭ·Γ…ʁ • ΤσΟλΛ֦ுͰ͖Δʂ • LS→ϓϥάΠϯ→tsserver→ΤσΟλ • TSίʔυதͷผݴޠʹೖྗิ׬Λ͋ͯͨΓ • lintΛಈ͔ͨ͠Γ

Slide 71

Slide 71 text

Ͱ͖ͳ͍ࣄ • tscͷॲཧʹ͸טΊͳ͍ • ίϯύΠϧ݁ՌΛม͑Δ • ίϯύΠϧͷ͍ͭͰʹtslintΛ૸ΒͤΔ tscͰ΋ಈ͘ͱ ଟ͘ͷπʔϧ͔Β ແବ͕ݮΒͤͦ͏…ʁ

Slide 72

Slide 72 text

࣮ੈքͰͷར༻ྫ • @angular/language-service • ts-graphql-plugin github.com/Microsoft/TypeScript/wiki/ Writing-a-Language-Service-Plugin

Slide 73

Slide 73 text

࣮ࡍʹ΍ͬͯΈͨ • github.com/vvakame/typescript-plugin-example • Quick Infoͱೖྗิ׬ީิʹ Λ͚ͭΔ • ͚ͩ • σϞ tsconfig.jsonʹ ઃఆ͕ඞཁͩͧ

Slide 74

Slide 74 text

͓͞Β͍ • TypeScript͸ • ϩοΫΠϯ͞ΕͮΒ͍ • IDE΍ΤσΟλ͕ߴػೳ • ࠾༻ࣄྫ΋૿͑ͨ • Language Server Protocol • ָ͍͠ʂ • ଞݴޠʹ΋ঃʑʹ޿͕Δ͔΋ ͜ͷޙAsk the speakerͰ ૬ஊͱ͔Ͱ͖·͢ʂ

Slide 75

Slide 75 text

͋Γ͕ͱ͏͍͟͝·ͨ͠

Slide 76

Slide 76 text

NOTE • TS ϦϦʔεαΠΫϧͷ࿩ • TypeScriptίϯύΠϥ͸TypeScriptͰॻ͔Ε͍ͯΔ • tsfmtͷ঺հ • Salsaͷ࿩ʢJSͷΤϯδϯΛ݉ͶΔTS LSͷ࿩ʣ