Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

0e797080b64e6b03ed00964cf69b5058?s=47 Masahiro Wakame
May 24, 2017
Programming
19
3.3k

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

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

0e797080b64e6b03ed00964cf69b5058?s=128

Masahiro Wakame

May 24, 2017
Tweet

More Decks by Masahiro Wakame

See All by Masahiro Wakame
0e797080b64e6b03ed00964cf69b5058?s=48 vvakame
0
290
0e797080b64e6b03ed00964cf69b5058?s=48 vvakame
1
380
0e797080b64e6b03ed00964cf69b5058?s=48 vvakame
26
12k
0e797080b64e6b03ed00964cf69b5058?s=48 vvakame
7
590
0e797080b64e6b03ed00964cf69b5058?s=48 vvakame
12
1.3k
0e797080b64e6b03ed00964cf69b5058?s=48 vvakame
15
4k
0e797080b64e6b03ed00964cf69b5058?s=48 vvakame
3
7.6k
0e797080b64e6b03ed00964cf69b5058?s=48 vvakame
4
760
0e797080b64e6b03ed00964cf69b5058?s=48 vvakame
3
8.3k

Other Decks in Programming

See All in Programming
8924d254fe8a39021d3822b5d51b6fec?s=48 wiroha
3
190
E0e036f89c14b3e59640318eedf9670b?s=48 bkuhlmann
0
130
42a6a049ac8f5265f31858a9509217fb?s=48 uhooi
3
160
0187ef0e45a8d745eafc223cf2ebb90c?s=48 tosh7
0
270
30e63a1ad21d3944b288fc3d33d1e920?s=48 amrrs
0
130
A1391fea7feb81a26c333c05f831dbf3?s=48 tosh2230
11
2.9k
5f5d4605866c2db411d5e8d3c4859ab4?s=48 haruguchi
0
170
4c0c2a5a353b06c9d0238373872822bb?s=48 jason13f
0
3.6k
82d6167c4d14393c2e20b37a74b363c5?s=48 kasacchiful
0
170
D8ca2261592f73dc422829e1e20feea0?s=48 tawamura1224
2
1k
102398563fd1bf878b35dc2d5ee67cbe?s=48 kamilahsantos
1
100
C90bac78c0fb61105cfd8239767f903d?s=48 o0h
PRO
3
470

Featured

See All Featured
F716e5f737fcfb03f2cf8d1a184f1dbe?s=48 nonsquared
84
3.6k
E190023b66e2b8aa73a842b106920c93?s=48 zenorocha
302
40k
E43f8dfd01057f8304f5f8fb9a294d7d?s=48 jeffersonlam
335
16k
48c098b6579220a67a6ba949be6e4b5a?s=48 revolveconf
204
10k
8081b26e05bb4354f7d65ffc34cbbd67?s=48 chriscoyier
498
130k
1177e050db6bafe62885362edf6e3537?s=48 lauravandoore
443
29k
B3ace07412a5178ea778e7eec161fc0a?s=48 jcasabona
10
750
433acaea1012b25d97ae66da9b998dad?s=48 malarkey
193
9k
433acaea1012b25d97ae66da9b998dad?s=48 malarkey
396
61k
15f2b8221f247985a27a627d2ece72f0?s=48 pauljervisheath
195
16k
F383c6a4dc55e331bbe2987b622cee6b?s=48 stephaniewalter
263
11k
Fe6b81005d1553accd6b2a28f6a2bef1?s=48 phodgson
92
4.2k

Transcript

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

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

  3. San Francisco

  4. Google I/O

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

  6. ॻ͍ͨຊ • TypeScriptϦϑΝϨϯε Ver 1.0ରԠ • ΊͬͪΌݹ͍ͷͰࠓͱͳͬͯ͸ΦεεϝͰ͖ͳ͍ • Revised TypeScript

    in Definitelyland • v2.0.0४ڌ • ແྉެ։ͯ͠·͢ goo.gl/mcF92t

  7. Ξϯέʔτ • JavaScript ?? • TypeScript ?? • Language Server

    Protocol ?? Ͳ͜ʹڵຯ͕ ͋Γ·͔͢ʁ

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

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

    গ͠ਅ໘໨ʹ͠Α… Buildʹ΋2ݸ͔͠ͳ͍

  10. TypeScript? TypeScript͸͍͍ͧ

  11. Why Type ?? • ܕ͕͋ΔͱԿ͕͍͍ͷʁ • ੩తʹղੳͰ͖Δൣғ͕ΊͬͪΌ૿͑Δ • ࣮ߦͤͣʹΘ͔Δ͜ͱ͕ͨ͘͞Μ͋Δ •

    ܕ͸࠷΋ίʔυʹີணͨ͠ςετͩ • ૣظͷόάݕग़Ͱ։ൃʹඅ΍ͤΔ࣌ؒ++

  12. Why Type ?? • IDE΍ΤσΟλ͕࢖͍΍͘͢ͳΔ • ίʔυؒͷؔ܎ੑ͕໌֬ • ఆٛ΁δϟϯϓ΍ਖ਼֬ͳೖྗิ׬ •

    ָʹ։ൃΛਐΊΒΕΔ • →ߟ͑Δࣄʹ࢖͑Δ࣌ؒ++

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

  14. ECMAScript ͱ͸ • ECMAScript͸JavaScriptͷඪ४ن֨ • 3, 5, 2015, 2016, 2017...

    ͳͲ͕ଘࡏ͢Δ • 6 → 2015 ʹͳΓ·ͨ͠ • 2015Ͱclass, module ͳͲ৽ن࠾༻ ཁ͢Δʹ == JavaScript goo.gl/lZyVX8

  15. ECMAScript ͱ͸ • ͪͳΈʹ • TypeScript͸ECMAScriptͷsuperset • →ߏจʹ΄΅׬શͳޓ׵ੑ͕͋Δ • →શͯͷJSίʔυ͸TSͱͯ͠΋ਖ਼͍͠

    Ұ෦ಠࣗͷ֦ு͕͋Δ namespace, enum, Ҿ਺ϓϩύςΟએݴ…etc

  16. ͪΐͬͱུޠͷղઆ • ES → ECMAScript • JS → JavaScript •

    TS → TypeScript • AltJS → Alternative JS AltJS͸ΘΓͱద౰ ୅ସ

  17. AltJS͸ඞཁͩͬͨ • લఏɿES 5͸ਏ͍… • Կ͔ to JS Ͱܰݮ͍ͨ͠…ʂ •

    CoffeeScript • Dart • TypeScript • Babel & Flowtype Babel͸ਖ਼௚ ධՁͰ͖Δ΄Ͳ ࢖ͬͯ·ͤΜ(খ੠

  18. Ұ൪༏͍͠AltJS • CoffeeScriptɺES5ΑΓϚγ • Ͱ΋ΊͬͪΌόάΔʢܕແ͍ • ܕʹཔͬͯੜ͖ͯΔϚϯʹ͸ਏ͍… • DartʹυϋϚϦ •

    Ͱ΋ϩοΫΠϯ͸ා͍… • ίϯύΠϧޙJS͸ਓؒʹ͸ಡΊͳ͍ • ܧଓੑʹ֬৴͕࣋ͯͳ͍ ձࣾͰ࠾༻͸ා͔ͬͨ…

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

    ͱ͔

  20. TypeScript͕ੜ੒͢ΔJSίʔυ • HTML + ES Modules ྫ • Classes ྫ

    • Types ྫ • Downpile ྫ ϩοΫΠϯ͞Εͳ͍ ཧ༝Λݟͤ·͢ʂ

  21. 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}`; }

  22. ม׵ޙ <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}`; } ΄΅Ұக

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

  24. Classes JS(esnext)ฤ export class Animal { } export class Cat

    extends Animal { bark() { return "ʹΌʔΜ"; } } const cat = new Cat(); console.log(cat.bark());

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

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

  27. Types JS(esnext)ฤ export function unwrap(container) { return container.data; } const

    container = { data: () => "Hello, world", }; const func = unwrap(container); console.log(func());

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

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

  30. ࠷ۙͷ৘੎ • Google͕TSΛࣾ಺ඪ४ݴޠʹ௥Ճ • https://goo.gl/eAyx0T • ঝೝϓϩηεʹ2೥͔͔ͬͨΒ͍͠ • Slack͕TypeScriptʹҠߦ •

    https://goo.gl/S4P7PR • όάݕग़ʹޮՌ༗Γ ΋͸΍࣮੷ͱ͔͍͏ εςʔδ͸ӽ͑ͨ

  31. JSͱͷߏจൺֱ • ม਺ʹର͢Δܕ஫ऍ • ؔ਺ʹର͢Δܕ஫ऍ • ߏ଄త෦෼ܕ • type assertion

    • ͦͷଞࡉ͔͍දݱ͕ͨ͘͞Μ • →JS͕ࣗ༝͗͢ΔͷͰ ੲ͸ؤுΕ͹ ͋Β͔ͨ঺հͰ͖ͨ ࠓ͸΋͏ແཧ…

  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"];

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

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

  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;

  36. type assertion // type assersionΛߦ͏ͱܕΛม׵Ͱ͖Δ // ԿͰ΋OKΛද͢ any ΛڬΊ͹޷͖ͳ͜ͱ͕Ͱ͖Δ //

    ؾܰʹ࢖ͬͯ͸͍͚ͳ͍…ʂ let objA: string = new Date() as any as string; // ͜͏͍͏ॻ͖ํ΋Ͱ͖Δ let objB: string = <string><any>new Date();

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

  38. 2.0Ҏ߱ͷTypeScript • ܕͷॊೈ͞ͷ֦େ • JSͷࣗ༝౓΁ͷରԠ౓޲্ • ৽͍͠ES࢓༷΁ͷରԠ • ES࢓༷΁ͷ४ڌ౓޲্ •

    downpileͷରԠൣғ֦େ • Quick Fixͷ֦ॆ རศੑ΍ ॊೈੑͷ ֦େ͕ϝΠϯ

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

  40. طଘࢿ࢈ͷ׆༻ • JSϥΠϒϥϦΛ࢖͍͍ͨʂ • ܕఆٛϑΝΠϧΛޙ෇͚ • ·ΔͰܕ͕͋ΔΈ͍ͨʂ • ܕఆٛϑΝΠϧ •

    ࣗ෼Ͱॻ͘ • DefinitelyTypedͰ୳͢ • microsoft.github.io/TypeSearch/ • npm install -D @types/node npmܦ༝ʹ ౷Ұʂ

  41. vs Babel • ݁ہͲͬͪΛ࠾༻͢΂͖ʂʁ • →νʔϜ࣍ୈ • ๻͸RubyΑΓ͸Java೿ • →RubyΛબ୒͠੒ޭ͢ΔνʔϜ΋͋Δ

    • TSΛ͓͢͢Ί͢Δਓ • IDE΍ϦονͳΤσΟλ΄͍͠ʂ • Java΍C#͕޷͖ʂ • ҆શͳϦϑΝΫλϦϯάʂ ΄΅ फڭઓ૪ σϞΔʁ

  42. vs ੜJavaScript • ݱ࣌఺Ͱ͸೉͍͠ • ࣌୅͕௥͍͍ͭͯͳ͍ • bundler͕·ͩඞཁ • IE11͍ͭ੾Δͷ໰୊

    • ϥΠϑλΠϜ͕·ͩ·ͩ͋Δ • Ҋ݅ͷҒ͍ਓIE11໰୊ ୤πʔϧ ೉͍͠… ΍ΊΖʔʂ

  43. TypeScript ಋೖฤ • npm init —yes • npm install -D

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

  44. TypeScript ܕFight • ܕఆٛϑΝΠϧࣗ࡞͸Ͱ͖Δͱخ͍͠… • Document & Handbook • www.typescriptlang.org/docs/home.html

    • Revised TypeScript in Definitelyland • qiita.com/vvakame • όʔδϣϯࠩ෼·ͱΊ ॻ͍ͯ·͢ ࣾ಺ʹ1ਓ ܕϑΝΠλʔ͕͍Δͱྑ͍ ಘ೉͍

  45. Language Server Protocol ུͯ͠LSPͩʂ

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

    ΑΖ͍͠ɺͳΒ͹LSPͩʂ

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

    ͦ͏ʂίϯύΠϥࣗମ͕࠷ڧͩʂ ࠷ڧʹ೚ͤΔ is ࠷ߴ

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

  49. LSPͷ࢓༷ • Microsoft͕΍ͬͯΔ • github.com/Microsoft/language-server-protocol • ΤσΟλˠClient • ݴޠଆˠServer •

    JSON-RPCͰϓϩηεؒ௨৴ • ΤσΟλͰ໾ཱͭ৘ใΛ΍ΓͱΓ ࣮૷ݴޠґଘΛ͔ΘͤΔ

  50. LSP ಈ࡞Πϝʔδ

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

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

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

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

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

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

    ͍͢͝ਏ͍ • ݴޠ֦ுϓϥάΠϯͷ
 ࡞ΓํͷखҾ͕΄΅ͳ͍ JSX + EclipseϓϥάΠϯͷࢥ͍ग़ μϯδϣϯ͔ Կ͔ʹ͍ۙ

  56. εΩϧϛεϚον໰୊ • ݴޠ։ൃऀ • ػೳ։ൃ͍ͨ͠ • IDEɾΤσΟλ։ൃऀ • શݴޠରԠͱ͔ඇݱ࣮త •

    ϓϥάΠϯͰͳΜͱ͔ͯ͠Ͷ • ී௨ʹίʔυॻ͖͍ͨਓ • ↑࣌ʹ͸ϓϥάΠϯॻ͔͟ΔΛ͑ͳ͍ • ׳Εͯͳ͍ͷͰଟେͳۤ௧Λ൐͏ ୭͕టΛ ඃΔͷ͔

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

    TypeScript΋tsserverΛ࣋ͬͨ • "ඪ४"͕͋Δͱ࿩͕ૣ͍

  58. LSP΍ͬͯΈͨ • ࣗ෼Ͱ࡞ͬͯΈͨ • prhͱ͍͏ٕज़ॻͳͲߍਖ਼༻πʔϧ • ͜ΕΛLSPରԠͤͯ͞ΈΑ͏ʂ • ࣮૷Ͱ͖ͨػೳ •

    ྑ͘ͳ͍දݱͷݕग़ • Quick Fix • จॻதͷશީิΛҰׅFix • ઃఆͷࣗಈ࠶ಡࠐ github.com/prh/ vscode-prh-extention

  59. LSP΍ͬͯΈͨ • ن໛ • languageserver ໿300ߦ • vscode֦ு ໿100ߦ •

    ࣦͬͨ΋ͷ ΰʔϧσϯ΢ΟʔΫ • σϞ • VSCode্Ͱಈ༷͘ࢠ Θ͔Ε͹؆୯ʂ

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

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

  62. ؔ࿈npmύοέʔδ • Server • vscode-languageserver • vscode-uri • Client (VSCode

    ext) • vscode-languageclient • ֤Language Server΁ͷύε

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

    ***.trace.server Λඞͣ༻ҙ VSCodeҎ֎ͷ ಈ࡞ݕূ͸…

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

    github.com/Microsoft/TypeScript/issues/11274

  65. ͦͷଞ • Rust Language Server • github.com/rust-lang-nursery/rls • Jonathand Turnerࢯͱ͔͕࡞ͬͯΔ

    • Rustࣗମ͸ػೳΛϗετͤͣ • ਫ਼౓͸ظ଴ͨ͠΄ͲͰ͸ͳ͍ • list.get(0). Ͱิ׬͕Ͱͳ͘ͳͬͨΓ Rust+WASMॻ͍ͨ goo.gl/kjMffu

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

  67. Language Service Plugin ུͯ͠LSPͩʂ

  68. Language Service Plugin • ͱΓ͋͑ͣLSPͱུ… ةݥ͕ةͳ͍ʂ • ΊΜͲ͍ͷͰϓϥάΠϯͱݺ΅͏ • ͜Ε͸TypeScriptݻ༗ͷػೳ

    • Language Serviceͷॲཧʹ1ຕטΊΔ • ͭ·Γtsserverʹ΋1ຕטΊΔ • tscʹ͸טΊͳ͍ ηογϣϯλΠτϧ ࠷ॳؒҧ͑ͯ·ͨ͠…

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

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

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

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

  73. ࣮ࡍʹ΍ͬͯΈͨ • github.com/vvakame/typescript-plugin-example • Quick Infoͱೖྗิ׬ީิʹ Λ͚ͭΔ • ͚ͩ •

    σϞ tsconfig.jsonʹ ઃఆ͕ඞཁͩͧ

  74. ͓͞Β͍ • TypeScript͸ • ϩοΫΠϯ͞ΕͮΒ͍ • IDE΍ΤσΟλ͕ߴػೳ • ࠾༻ࣄྫ΋૿͑ͨ •

    Language Server Protocol • ָ͍͠ʂ • ଞݴޠʹ΋ঃʑʹ޿͕Δ͔΋ ͜ͷޙAsk the speakerͰ ૬ஊͱ͔Ͱ͖·͢ʂ

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

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

    LSͷ࿩ʣ