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

Deep Dive Into TypeScript

Deep Dive Into TypeScript

HTML5Conference 2017 Room A
Deep Dive Into TypeScriptの発表資料です。

More Decks by Taketoshi Aono(青野健利 a.k.a brn)

Other Decks in Programming

Transcript

  1. せ⵸: @brn (ꫬꅿ⨳ⵃ)
    耵噟: ؿٗٝزؒٝسؒٝآص،٥ط؎ذ؍ـؒٝآص،
    ⠓爡: Cyberagent ،سذؙأةآؔRightSegment٥AI Messenger
    ـؚٗ: http://abcdef.gets.b6n.ch/
    Twitter: https://twitter.com/brn227
    GitHub: https://github.com/brn


    View full-size slide

  2. Agenda
    -  What is TypeScript? TypeScriptך稱➜
    -  About TypeSystems TypeScriptך㘗חאְג
    -  About LanguageService TypeScriptךIDE؟ه٦زחאְג
    -  About CustomTransformer TypeScriptךAST乼⡲חאְג
    -  Roadmap ➙䖓ךٗ٦سوحفחאְג
    -  Popular Issues 鑧겗ךIssueחאְג

    View full-size slide

  3. What is
    TypeScript? TypeScript׏ג⡦זךׁ

    View full-size slide

  4. In a word.
    ְ׻ײ׷AltJSך♧珏կ
    javascriptח㘗ءأذي׾鷄⸇׃ծEcmascript proposalך堣腉׾
    ⯓《׶׃גزٓٝأػ؎ٕׅ׷կ
    植㖈TypeScriptכGoogle爡ⰻד׮Ⱅ钠鎉铂ה׃ג䱰欽ׁ׸׷זוծ
    ׉ך㖑⡘׾然甧׃אא֮׷կ
    What is TypeScript?

    View full-size slide

  5. Why Type is needed?
    ז׈㘗ָ䗳銲זך
    What is TypeScript?

    View full-size slide

  6. More Robust code
    㘗כ؝٦سך侭さ䚍嗚鏾׾〳腉חׅ׷կ
    ؝ٝػ؎ٕדֹ׷=> ؝٦سח濨湼ָזְկ
    What is TypeScript?

    View full-size slide

  7. It's not mean "No Bugs"
    غָؚזְ׻ֽדכ搀ְկ
    Runtimeךؒٓ٦כ㢌׻׵׆饯ֹ׷կ
    What is TypeScript?

    View full-size slide

  8. But…
    ׉׸ד׮㘗嗚叨׃ג剑⡚ꣲך嗚鏾כ꫼涸ח׃׋ְ׃ծׅ׷ץֹկ
    㘗כ؝٦سח㙵׭鴥ת׸׋剑⡚ꣲךسًُؗٝزד֮׷կ
    What is TypeScript?

    View full-size slide

  9. 3rd Party 㢩鿇ךٌآُ٦ٕך㘗כ
    What is TypeScript?

    View full-size slide

  10. DefinitelyTyped
    3rdParty醡ך㘗㹀纏ؿ؋؎ٕ׾盖椚׃גְ׷GitHub Repoկ
    npm install @types/…
    What is TypeScript?

    View full-size slide

  11. Is DefinitelyTyped Enough?
    㘗ך꧊秈٥3rdParty醡ٓ؎ـٓٔפך㘗➰ֽהְֲ䠐㄂דכ㣐ֹ
    ז䧭卓ה罋ִגְ׷կ
    2017/9/14植㖈@types⟃♴חכ3595ך㘗㹀纏ؿ؋؎ָٕ֮׷կ
    What is TypeScript?

    View full-size slide

  12. Manual Typing
    DefinitelyTypedח㘗㹀纏ָזְַծ荈⡲ٓ؎ـٓٔך㜥さכ
    荈ⴓד㘗㹀纏׾剅ֻկ
    What is TypeScript?

    View full-size slide

  13. import increment from 'increment';!
    !
    increment(1);!

    View full-size slide

  14. declare module 'increment' {!
    export default function increment(!
    a: number!
    ): number;!
    }!

    View full-size slide

  15. TypeSystems About Type of TypeScript

    View full-size slide

  16. ꅾ銲זהֿ׌ֽ

    View full-size slide

  17. Structural Subtyping
    圓鸡涸鿇ⴓ㘗
    ؔـآؙؑزך圓鸡ח岣湡׃׋㘗ءأذيկ
    㘗ך侭さ䚍כ㘗ך圓鸡ך׫ד嗚鏾ׁ׸׷կ
    TypeSystems

    View full-size slide

  18. Why Structural Subtyping?
    javascriptכ⽯儗ؔـآؙؑز׾⢪ֲ걼䏝ָ넝ְկ
    ⽯儗ؔـآؙؑزח㼎׃ג㘗ך㹑鎉׾ׅ׷ךכ撕׻׃ְկ
    TypeSystems

    View full-size slide

  19. interface Point2D {!
    x: number;!
    y: number;!
    }!
    !
    const point = {!
    x: 0,!
    y: 0!
    };!
    !
    function acceptPoint2D(point: Point2D) {}!
    !
    acceptPoint2D(point);!

    View full-size slide

  20. interface Point2D {!
    x: number;!
    y: number;!
    }!
    !
    const point = {!
    x: 0,!
    y: 0,!
    z: 1!
    };!
    !
    function acceptPoint2D(point: Point2D) {}!
    !
    acceptPoint2D(point);!

    View full-size slide

  21. Structural Subtyping
    㘗ך㹑鎉׾ׅ׷䗳銲כזְկ
    圓鸡ָ㘗׾鋉㹀ׅ׷կ
    TypeSystems

    View full-size slide

  22. User Defined Type
    ׮׍׹׿classװinterfaceծenumָ⢪ִ׷կ
    TypeSystems

    View full-size slide

  23. interface MyInterface extends
    OtherInterface,!
    AnotherInterface {!
    prop: number;!
    method(args: string): boolean;!
    optional?: boolean;!
    }!

    View full-size slide

  24. class MyClass extends OtherClass implements
    OtherInterface {!
    public constructor() { super(); }!
    protected methodFoo() { }!
    private property: number = 1;!
    public static methodFoo() { }!
    private static property = 1;!
    public get getter() {}!
    public set setter(value: any) {}!
    public get set prop() {}!
    private readonly immutableProp: string = 'a';!
    }!

    View full-size slide

  25. enum Enum {!
    VALUE_A = 1,!
    VALUE_B, // 2!
    VALUE_C, // 3!
    }!
    !
    enum Enum {!
    VALUE_A = 'value'!
    }!
    !
    Enum.VALUE_A // 'value'!
    Enum[Enum.VALUE_A] // 'VALUE_A'!

    View full-size slide

  26. // const修飾するとコンパイル後にリテラル化される
    const enum ConstEnum {!
    VALUE = 1,!
    ...!
    }!
    const value = ConstEnum.VALUE;!
    // コンパイル後 => const value = 1;

    View full-size slide

  27. Type Inference
    ׮׍׹׿TypeScriptכ㘗䱿锷׮אְג׷կ
    TypeSystems

    View full-size slide

  28. // Simple assignment.!
    const a = 0;!
    !
    // Function return value.!
    const b = () => 1;!
    !
    // Callback!
    const d = (callback: (a: number) => boolean) => {!
    callback(1);!
    };!
    d(x => x === 0);!
    !
    // Best Common Type.!
    const p2d = { x: 0, y: 0 };!
    const p3d = { x: 0, y: 0, z: 1 };!
    const p4d = { x: 0, y: 0, z: 1, t: 0 }!
    const c = [ p2d, p3d, p4d ]; // { x: number; y: number }[];!

    View full-size slide

  29. Generics
    ְ׻ײ׷筨獥㘗կ
    㘗׾ػًٓ٦ة⻉׃㢩鿇ַ׵䭷㹀דֹ׷״ֲחׅ׷կ
    TypeSystems

    View full-size slide

  30. // Generic Array!
    class MyArray {!
    private arr: T[];!
    !
    public push(value: T) { this.arr.push(value); }!
    }!
    const numArr = new MyArray();!
    !
    // Constraints!
    function fn(value: T) {!
    return value.x + 1; // Error!!
    }!
    !
    function fn(value: T) {!
    return value.x + 1;!
    }!

    View full-size slide

  31. Type Conversion and Generation
    㘗׾ֿיֿיׅ׷կ
    TypeSystems

    View full-size slide

  32. // Type Alias!
    type MyString = string;!
    !
    // Insersection Type!
    type A = { x: number };!
    type B = { y: number };!
    type Point2D = A & B;!
    !
    // Union Type!
    type UnionType = string | number;!

    View full-size slide

  33. Special Types ׍׳׏ה㢌׻׏׋㘗
    TypeSystems

    View full-size slide

  34. // String Literal Types!
    type Suit =!
    'diamond'!
    | 'club'!
    | 'spade'!
    | 'heart';!
    !
    const suit: Suit = 'joker';!
    // Error !!!
    !
    // Index Type!
    type StringMap = { [key: string]: string };!

    View full-size slide

  35. Tagged Union
    㘗חةؚ׾אֽ׷կ
    TypeSystems

    View full-size slide

  36. // Tagged Union!
    interface TypeA { kind: 'type-a'; typeAValue: number; }!
    !
    interface TypeB { kind: 'type-b'; typeBValue: string; }!
    !
    function processAB(value: TypeA | TypeB) {!
    switch (value.kind) {!
    case 'type-a':!
    return value.typeAValue;!
    case 'type-b':!
    return value.typeBValue;!
    default:!
    throw new Error('Undefined type.');!
    }!
    }!

    View full-size slide

  37. Type Guard 㘗׾穾׶鴥׬կ
    TypeSystems

    View full-size slide

  38. // Type Guard!
    function fn(!
    x: Element | number | boolean!
    ) {!
    if (x instanceof Element) {!
    console.log(x.tagName);!
    } else if (typeof x === 'boolean') {!
    console.log(x);!
    } else {!
    console.log(x.toFixed(0));!
    }!
    }!

    View full-size slide

  39. // User defined type guard!
    function isString(x: any): x is string {!
    return typeof x === 'string';!
    }!

    View full-size slide

  40. // Type Guard!
    function fn(!
    x: Element | string | number | boolean!
    ) {!
    if (x instanceof Element) {!
    console.log(x.tagName);!
    } else if (typeof x === 'boolean') {!
    console.log(x);!
    } else if (isString(x)) {!
    console.log(x.toUpperCase());!
    } else {!
    console.log(x.toFixed(0));!
    }!
    }!

    View full-size slide

  41. never ⵋ麦♶腉կ
    TypeSystems

    View full-size slide

  42. function test1(): never {!
    throw new Error('error');!
    }!
    !
    function test2(value: string | number) {!
    if (typeof value === 'string') {!
    !
    } else if (typeof value === 'number') {!
    !
    } else {!
    value // value = never!
    }!
    }!

    View full-size slide

  43. never
    neverכֲתֻ⢪ִלծ״׶㘗㸜Ⰻז؝٦س׾剅ֻךח⢪ִ׷կ
    TypeSystems

    View full-size slide

  44. enum Test { KEY_1 = 1, KEY_2, KEY_3 }!
    !
    function test(m: Test) {!
    switch (m) {!
    case Test.KEY_1:!
    return 'key1';!
    case Test.KEY_2:!
    return 'key2';!
    default;!
    const check: never = m;!
    // error Test.KEY_3 is not
    assignable to never.!
    }!
    }!

    View full-size slide

  45. Mapped Type
    㘗ךفٗػذ؍׾⴨䮙׃ծ㘗׾㢌䳔ׅ׷կ
    TypeSystems

    View full-size slide

  46. interface MyInterface {!
    a: string;!
    b: number;!
    c: boolean;!
    }!
    !
    type AKeys = keyof MyInterface;!
    // AKeys = 'a' | 'b' | 'c'!

    View full-size slide

  47. type MyInterfaceClone = {!
    [P in AKeys]: MyInterface[P]!
    };!
    // MyInterfaceClone = {!
    // a: string;!
    // b: number;!
    // c: boolean;!
    // }!

    View full-size slide

  48. type MyPromiseInterface = {!
    [P in AKeys]: Promise;!
    }!
    // MyPromiseInterface = {!
    // a: Promise;!
    // b: Promise;!
    // c: Promise;!
    // }!

    View full-size slide

  49. Variance
    ֮׷㘗הⴽך㘗ך湱✼➿Ⰵ〳腉זꟼ⤘䚍
    TypeSystems

    View full-size slide

  50. class Base {!
    value = 1;!
    }!
    !
    class Derived extends Base {!
    otherValue = 2;!
    }!
    !
    class Another extends Base {!
    anotherValue = 3;!
    }!

    View full-size slide

  51. declare let baseArr: Base[];!
    declare let derivedArr: Derived[];!
    !
    // Covariant 共変!
    baseArr = derivedArr;!
    !
    // Contravariant 反変 Error!
    // TypeScriptでは認められていない
    derivedArr = baseArr;!

    View full-size slide

  52. declare let processDerived: (derived: Derived) => void;!
    declare let processBase: (base: Base) => void;!
    !
    // Bivariant 双変!
    processDerived = processBase;!
    processBase = processDerived;!
    !
    // Runtime Error.!
    processBase(new Another());!

    View full-size slide

  53. TypeScript
    Choose…
    GenericsכⰟ㢌
    ꟼ侧כ⿽㢌
    TypeSystems

    View full-size slide

  54. Why Bivariant?
    ꟼ侧ָBivariantדזְהDerived[] => Base[]ך㢌䳔ָדֹזְկ
    TypeSystems

    View full-size slide

  55. class MyArray {!
    push(value: T);!
    }!
    !
    declare let arr: MyArray;!
    declare let arr2: MyArray;!
    arr2 = arr;!
    // arr = push(value: Derived);!
    // arr2 = push(value: Base);!

    View full-size slide

  56. Because be more PRACTICAL.
    Derived[] => Base[]ך׋׭חBivariantז麣׾鼅׿׌կ
    ָծ
    C#ךin/outך״ֲחCovariance/Contravariance׾鼅䫛〳腉חׅ
    ׷䲿周ָ⳿גְ׷կ
    TypeSystems

    View full-size slide

  57. Only ONE thing
    搀蘠׾ׅ׷ז
    TypeSystems

    View full-size slide

  58. Take care of …
    ثُ٦ؚٔٝ㸣Ⰻ
    㘗ٖكٕ
    TypeSystems

    View full-size slide

  59. TypeScript is NOT a
    language
    like C++ or Scala!!
    ➬✲ד⢪ֲ儗ך鑧דׅ״…?✮꣇简

    View full-size slide

  60. Laguage
    Service TypeScriptךIDE٥ؒر؍ة؟ه٦ز

    View full-size slide

  61. What is Language Service?
    غحؙؚٓٝسד⹛⡲ׅ׷IDE؟ه٦ز欽ך؟٦ؽأկ
    رؿٕؓزדVSCodeָ㼎䘔׃גְ׷կ
    ؟٦غָ饯⹛ׅ׷׌ֽկ
    Emacsד׮vimד׮OK!
    Language Service

    View full-size slide

  62. LanguageService Plugin
    TypeScript 2.2ַ׵㼪Ⰵׁ׸׋կ
    LanguageService׾䭁䓸ׅ׷׋׭ך堣腉
    TypeScriptךCompiler劤⡤ח堣腉׾鷄⸇ׅ׷׻ֽדכזְկ
    LanguageService

    View full-size slide

  63. Scope
    -  lint堣腉ך鷄⸇
    -  㹑鎉Jump堣腉ך㢌刿
    -  string literalװtemplateך圓俑
    ثؑحؙ
    זו

    LanguageService Plugin

    View full-size slide

  64. 植朐
    tsconfig.jsonךpluginsفٗػذ؍ח
    鷄⸇ׅ׸ל⢪ִ׷ָծ
    Angularה
    Quramyׁ׿ךGraphqlךفؚٓ؎ٝ
    ֻ׵ְ׃ַזְկ
    LanguageService Plugin

    View full-size slide

  65. Custom Transformer
    TypeScriptךAST乼⡲חאְג

    View full-size slide

  66. Scope
    AST׾湫䱸㢌刿׃ג⳿⸂׾㢌刿דֹ׷կ
    pluginה麩׏ג湫䱸TypeScriptך؝ٝػ؎ٕ穠卓ח➜Ⰵדֹ׷կ
    TypeScript劤⡤׮ぐ珏Transformerד䕎䧭ׁ׸גְ׷կ
    Custome Transformer

    View full-size slide

  67. 植朐
    TypeScriptךAST׾ְׄ׸ג㴍׃ְֿהָծ
    㘗䞔㜠׾Runtimeח䒷׏䓸׏גֻ׷ֻ׵ְ׃ַזְկ
    Ⱅ䒭דٗ٦س倯岀ָ欽䠐ׁ׸גְזְկ
    儗劍㼿傍זךדכկ
    Custom Transformer

    View full-size slide

  68. Next
    Release 如㔐ٔٔ٦أ✮㹀ך堣腉

    View full-size slide

  69. Next Release(2017/10)
    -  ؔ٦ز؝ٝفٔ٦زדimportך酡㸣
    -  noImplicitAnyךؒٓ٦׾QuickFixד㘗➰ֽׅ׷
    -  Unique-Symbol㘗׾Computed-Propertyה׃גinterface٥type٥
    classךًٝغה׃ג⢪ִ׷
    -  Incremental Compiler APIך䲿⣘
    -  @ts-ignore؝ًٝزדJS׮ؒٓ٦׾䫇ⵖ〳腉ח

    View full-size slide

  70. ؔ٦ز؝ٝفٔ٦زדimportך酡㸣
    ٌآُ٦ٕךせ⵸׾ؔ٦ز؝ٝفٔ٦زד酡㸣ׅ׷הծ荈⹛ד
    import圓俑תד䯏Ⰵ׃גֻ׸׷堣腉կ
    Next Release(2017/10)

    View full-size slide

  71. noImplicitAnyךؒٓ٦׾
    QuickFixד㘗➰ֽׅ׷
    noImplicitAnyָONחז׏גְ׷朐䡾דany㘗׾鋅אֽ׋㜥さծ
    QuickFixד㘗䞔㜠׾✮䟝׃ג䲿周ׅ׷կ
    Next Release(2017/10)

    View full-size slide

  72. Unique-Symbol㘗׾Computed-Property
    ה׃ג㘗ח⢪ִ׷״ֲח
    Unique-Symbolהְֲ嚊䙀ָ㼪Ⰵׁ׸׷կ
    Unique-Symbolהכconstַreadonly⥜귅ׁ׸׋㢌侧٥فٗػ
    ذ؍կ
    ֿךUnique-Symbolז㢌侧׾class٥interface٥typeךفٗػ
    ذ؍ؗ٦ח⢪ֲֿהָדֹ׷կ
    Next Release(2017/10)

    View full-size slide

  73. // main.ts (input)!
    export const x = "literal name";!
    const y = 1;!
    export interface A {!
    [x]: string;!
    [y]: string;!
    // error: Interface 'A' has or is
    using private name '[y]' !
    // (when using --declaration)!
    }!

    View full-size slide

  74. type B {!
    [x]: string;!
    [y]: boolean;!
    }!
    let a: A;!
    let b: B;!
    a = b;!
    // error: Type 'B' is not assignable to type
    'A'. !
    // Types of property '[y]' are incompatible.!

    View full-size slide

  75. Incremental Compiler APIך䲿⣘
    --watchٌ٦سך鸞䏝何㊣կ
    ׁ׵חծcreateWatchModeꟼ侧׾䲿⣘✮㹀կ
    Next Release(2017/10)

    View full-size slide

  76. @ts-ignore؝ًٝزדJS׮
    ؒٓ٦׾䫇ⵖ〳腉ח
    @ts-ignore؝ًٝز׾鎸鶢ׅ׷ֿהדծ
    javascriptؿ؋؎ٕ׮暴㹀ךؒٓ٦׾䫇ⵖ〳腉חկ
    ⟃⵸כTypeScript׃ַ㼎䘔׃גְזַ׏׋կ
    Next Release(2017/10)

    View full-size slide

  77. if (false) {!
    // @ts-ignore: Unreachable code error!
    console.log("hello");!
    }!

    View full-size slide

  78. Roadmap ➙䖓ך㹋鄲ٗ٦سوحف

    View full-size slide

  79. Plans
    -  醱侧ךtsconfig.json׾؟ه٦ز
    -  〳㢌ꞿ㘗ך؟ه٦ز
    -  ➭ך㘗ءأذيך؟ه٦ز
    -  㘗ؿ؋؎ٕך㹑鎉ך꧊秈הؒٓ٦
    ٔه٦ذ؍ؚٝך何㊣

    View full-size slide

  80. Plans
    -  倜׃ְES Decoratorsך㹋鄲
    -  Design Time Decorator e.g.
    deprecated, conditional
    -  Decorators for (arrow) function
    expression
    -  dynamic import׾ろ׭׋import㹑
    鎉⟃㢩ך倯岀דך㘗䱿锷
    -  䕎㹀纏ؿ؋؎ָٕזַ׏׋㜥さחծ
    @typesךQuickFix׾䲿爙

    View full-size slide

  81. 醱侧ךtsconfig.json׾؟ه٦ز
    tsconfig.jsonחdependencyהְֲ갪湡׾⡲׶ծ׉ֿחⴽךفٗ
    آؙؑزפך⿫撑׾鎸鶢ׅ׷ֿהדծ
    ⴽךtsconfig.jsonפⳢ椚׾獳隁ׅ׷ֿהָדֹ׷״ֲחז׷կ
    Roadmap

    View full-size slide

  82. 〳㢌ꞿ㘗ך؟ه٦ز
    ְ׻ײ׷Variadic Typeך؟ه٦زկ
    Genericsך〳㢌ꞿ䒷侧٥Tupleפך㼎䘔ָ〳腉חז׷կ
    Variadic TypeכTupleה✼䳔䚍׾䭯אկ
    Roadmap

    View full-size slide

  83. function makeTuple<...T>(...ts:...T): ...T {!
    return ts;!
    }!
    !
    const ts = makeTuple('a', 1, {x: 1});!
    // ...T = [string, number, {x: number}];!

    View full-size slide

  84. function f<...T,...U>(ts:...T): [...T,...U] {!
    let us: ...U = makeTuple('hello', 'world');!
    return [...ts, ...us];!
    }!
    const ret = f('html', 5, 'conference');!
    // ret = ['html', 5, 'conference', 'hello',
    'world'];!
    // ...T = [string, number, string]!
    // ...U = [string, string];!
    // [...T, ...U] = [string, number, string,
    string, string]!

    View full-size slide

  85. Non Structural Subtypingך؟ه٦ز
    Structural Subtyping⟃㢩Nominal Typing瘝ך㘗ءأذيך
    鷄⸇կ
    ׋׌׃ծוך״ֲח㹋鄲ׅ׷ַךず䠐כה׸גְזְկ
    Symbol.hasInstance׾⢪ֲ⢽ָ䮙־׵׸גְ׷ָծ׉ך׋׭חכ
    Symbol.hasInstanceח״׷TypeGuard׮㹋鄲ׅ׷䗳銲ָ֮׷կ
    Roadmap

    View full-size slide

  86. interface MyNumber extends number {}!
    !
    const Positive = {!
    [Symbol.hasInstance](v) {!
    return typeof v === 'number' && v > 0;!
    }!
    }!
    !
    let value = 1;!
    if (value instanceof Positive) {!
    // value is Positive;!
    }!

    View full-size slide

  87. 㘗ؿ؋؎ٕך㹑鎉ך꧊秈ה
    ؒٓ٦ٔه٦ذ؍ؚٝך何㊣
    植㖈ծmodule/declaration/outךאך؝ٝػ؎ٕؔفءّٝ׾
    䭷㹀ׅ׷הծ♧אחתהת׏׋d.tsָ欰䧭ׁ׸׷ָծ
    ׉ך⚥魦ָぐؿ؋؎ַٕ׵ךؙؒأه٦زחז׏גְ׷ך׾ծ
    1ٌآُ٦ٕחתה׭ծexport * as …ׁ׸גְ׷ٌآُ٦ٕせָ
    עאַ׏׋㜥さחؒٓ٦הׅ׷何⥜周կ
    ׋׌植朐⨡忔׃גֶ׶㼪Ⰵׁ׸׷ַכ♶僇կ
    Roadmap

    View full-size slide

  88. declare module "mylib/a" {!
    export * from "mylib/b";!
    export * from "mylib/c";!
    }!
    declare module "mylib/b" {!
    export interface Foo {}!
    !
    export class Bar {!
    constructor()!
    do(): Foo!
    }!
    }!
    declare module "mylib/c" {!
    export class Baz {}!
    }!
    declare module "mylib" {!
    export * from "mylib/a";!
    }!

    View full-size slide

  89. declare module "mylib" {!
    export interface Foo {}!
    !
    export class Bar {!
    constructor()!
    do(): Foo!
    }!
    !
    export class Baz {}!
    }!

    View full-size slide

  90. 倜׃ְES Decoratorך㹋鄲
    TypeScript2.5儗挿ד㹋鄲ׁ׸גְ׷decoratorכ〢ְproposal׾
    ك٦أח׃גֶ׶ծ植儗挿דך倜׋זproposalחさ׻ׇ׷何⥜周կ
    Roadmap

    View full-size slide

  91. type Constructor = new(...args): {};!
    !
    interface MemberDesciptor {!
    kind: "Property"!
    key: string,!
    isStatic: boolean,!
    descriptor: PropertyDescriptor,!
    extras?: MemberDescriptor[]!
    finisher?(ctor: Constructor): void;!
    }!

    View full-size slide

  92. function classDecorator(!
    ctor: Constructor,!
    parent: Constructor,!
    arrayOfDescriptor: MemberDesciptor[]) {!
    ...!
    }!
    !
    function memberDecorator(!
    memberDescriptor: MemberDesciptor!
    ) {!
    ...!
    }!

    View full-size slide

  93. Design Time Decorator
    ؝ٝػ؎ٕ儗٥Ambient㹑鎉ⰻד鐰⣣ׁ׸׷decorator㹋鄲կ
    deprecatedװconditional瘝կ
    ת׌陽锷⚥ך׋׭ծוך״ֲז䕎ח滠㖑ׅ׷ַכ♶僇կ
    CustomTransformerָדֹ׋ךדծ陽锷ָ♴抟חז׏ג׷䠬׮֮
    ׷կ
    Roadmap

    View full-size slide

  94. interface JQuery { !
    @@deprecated("...", false) !
    selector: string; !
    }!
    !
    @@suppressWarning("disallow-leading-
    underscore") !
    function __init() { !
    }!

    View full-size slide

  95. Decorators for (arrow) function expression
    ꟼ侧䒭ח㼎׃גdecorator׾剅ֽ׷״ֲחׅ׷周կ
    劤㹺tc39/proposal-decoratorד׮⡦䏝׮♳ָ׏גְ׷㉏겗׌ָծ
    ת׌穠锷ָ⳿גְזְկ
    ꟼ侧㹑鎉דכזֻꟼ侧䒭ח׃ַ黝欽דֹזְךכծ
    Function Hoistingָdecoratorהꟼ侧ח㼎׃ג湱✼⡲欽׃ג㉏겗
    ׾䒷ֹ饯ֿׅ׋׭կ
    Roadmap

    View full-size slide

  96. dynamic import׾ろ׭׋
    import㹑鎉⟃㢩ך倯岀דך㘗䱿锷
    dynamic importװ׉ך➭ךimport倯岀דٌآُ٦ٕ׾ٗ٦س׃׋
    㜥さךmoduleך《׶䪔ְ׾何㊣ׅ׷周կ
    植㖈ךהֿ׹module㘗׾㼪Ⰵׅ׷倯ぢד鑧ָ鹌׿דְ׷ָծ
    ㉏겗׮㢳ֻת׌寸㹀涸ז陽锷כ搀ְկ
    Roadmap

    View full-size slide

  97. // 0.ts!
    export interface foo {}!
    export class C {}!
    // 1.ts!
    var p: module("./0");!
    // ここで型と値両方をimportするのか、
    // 型は別でimportするのかとかの問題もある。

    View full-size slide

  98. 䕎㹀纏ؿ؋؎ָٕזַ׏׋㜥さחծ
    @typesךQuickFix׾䲿爙
    ׮׃TypeScript؝ٝػ؎ٓ٦ָ㘗㹀纏׾鋅אֽ׵׸זַ׏׋㜥さ
    ח@typesַ׵installׅ׷״ֲח䲿周ׅ׷何⥜կ
    Roadmap

    View full-size slide

  99. Popular
    Issues 陽锷ך㽴ֹזְծ㣐➂孡זissue麦

    View full-size slide

  100. Support override keyword on class methods
    倜׋חoverrideؗ٦ٙ٦س׾㼪Ⰵ׃גծ
    崢欰ؙٓأדًاحس׾ؔ٦غ٦ٓ؎سׅ׷儗ח鎸鶢ׇׁ׷䲿周կ
    ♧傉鷿⚥דꟗׄ׵׸גֶ׶ծreopenך䥪격ד㣐ꆀך؝ًٝزָא
    ְגְג鷄ֲךָ㣐㢌זissueחז׏גְ׷կ
    㹋鄲ׅ׷ֿהכ寸ת׏גְגծׅדח㹋鄲׮㨣ת׏גְ׷կ
    Popular Issues

    View full-size slide

  101. Request: Class Decorator Mutation
    class decoratorָclassך㘗׾㢌刿דֹזְ׋׭ծ
    decoratorⰻד鷄⸇׃׋فٗػذ؍ח،ؙإأדֹזְկ
    ׉ך׋׭ծdecoratorדclassך㘗׾㢌刿׃׋ְהְֲissueկ
    MetaProgramming崢הDecorator should not change classז➂
    ׋׍ך䨌ְָ粸׶䎢־׵׸גְ׷կ
    儗䫓react-reduxךconnectָreference׃ג圫㶨׾鋅גְ׷կ
    Popular Issues

    View full-size slide

  102. Suggestion: minification
    TypeScript؝ٝػ؎ٓדا٦أךMinifyתדװ׷ץֹהְֲ䲿周կ
    Uglify׾⢪ִהְֲ䠐鋅ָד׷׮ծTypeScriptך㘗䞔㜠׾ְַ׃
    ׋剑黝⻉׾׃׋ְהְֲ䠐鋅ָדגծClosureCompilerתד岚⿹
    ׃ծIssueָ⠼ן׋կ
    植㖈陽锷⚥׌ָת׌ת׌㹋植כ黅ְ䠬ׄկ
    Popular Issues

    View full-size slide

  103. ׀幠耮֮׶ָהֲ׀ְׂת׃׋կ

    View full-size slide

  104. ⿫罋
    •  https://qiita.com/na-o-ys/items/aa56d678cdf0de2bdd79
    •  https://github.com/Microsoft/TypeScript/issues
    •  https://github.com/Microsoft/TypeScript/wiki
    •  http://ufcpp.net/study/csharp/sp4_variance.html
    •  https://speakerdeck.com/vvakame/about-typescript-and-language-
    server-protocol
    •  https://ja.wikipedia.org/wiki/
    %E5%85%B1%E5%A4%89%E6%80%A7%E3%81%A8%E5%8F%8D
    %E5%A4%89%E6%80%A7_(%E8%A8%88%E7%AE%97%E6%A9%9F
    %E7%A7%91%E5%AD%A6)

    View full-size slide