TypeScriptの概要とLanguage Server Protocol / About TypeScript & Language Server Protocol

https://www.microsoft.com/ja-jp/events/decode/2017/sessions.aspx
Microsoftのde:code 2017で登壇して喋ったやつです。

Transcript

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

   View Slide

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

   View Slide

3. San Francisco
   

   View Slide

4. Google I/O
   

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

10. TypeScript?
    TypeScript͸͍͍ͧ
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

45. Language Server Protocol
    ུͯ͠LSPͩʂ
    

    View Slide

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

    View Slide

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

    View Slide

48. ΑΖ͍͠ͳΒ͹ίϯύΠϥͩʂ
    • ΤσΟλͱҰ൪஥ྑ͘͢Δ΂͖ͳͷ͸

    ίϯύΠϥͳͷͰ͸ʁ
    • ίϯύΠϥͳͲ͔ΒΤσΟλͰ

    ໾ʹཱͭ৘ใΛऔΓग़ͦ͏ʂ
    ݸผʹؤுΔ
    ͦΜͳͷ͸͍΍ͩ
    

    View Slide

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

    View Slide

50. LSP ಈ࡞Πϝʔδ
    

    View Slide

51. ͜ΕɺTypeScriptʹ͋Γ·͢
    • tsserverίϚϯυ
    • Language ServiceΛϥοϓ
    • ଟ͘ͷΤσΟλͰߴΫΦϦςΟͷ

    TypeScriptαϙʔτ
    • VSCode, Atom, WebStorm, Vim etc..
    • ཪʹ͸tsserver͕ʂ
    • tsserver͸࣮͸LSP४ڌͰ͸ͳ͍…
    • ઌۦऀ͔ͩΒͶ ࢓ํͳ͍Ͷ goo.gl/HD4noG
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

55. • JSX https://jsx.github.io/
    • ͱ͍͏DeNA࢈ͷAltJS͕͋ͬͨ
    • Eclipse༻ϓϥάΠϯ͕ཉ͔ͬͨ͠
    • https://github.com/vvakame/jsx-plugin-for-eclipse
    • ͍͢͝ਏ͍
    • ݴޠ֦ுϓϥάΠϯͷ

    ࡞ΓํͷखҾ͕΄΅ͳ͍
    JSX + EclipseϓϥάΠϯͷࢥ͍ग़
    μϯδϣϯ͔
    Կ͔ʹ͍ۙ
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

67. Language Service Plugin
    ུͯ͠LSPͩʂ
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

75. ͋Γ͕ͱ͏͍͟͝·ͨ͠
    

    View Slide

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

    View Slide