todays-typescript.pdf

Transcript

1. Today's
   TypeScript
   Types for beginner
   

   View Slide

2. Name
   @brn (ꫬꅿ⨳ⵃ)
   Occupation
   ؿٗٝزؒٝسؒٝآص،٥ط؎ذ؍ـؒٝآص،
   Company
   Cyberagent ،سذؙأةآؔ AI Messenger
   OSS
   Contributor of V8
   About
   http://info.b6n.ch
   

   View Slide

3. ➙傈ך鑧כ֮׿ת׶TSח鍗׏גְזְ➂הַ
   ➙䖓⢪ֲֶַה䙼׏גְ׷➂ぢֽדׅկ
   

   View Slide

4. 僴➙ךTypeScript
   㘗ך乼⡲ְָ׏םְדֹ׷״ֲחז׶ת׃׋կ
   Ecmascriptך➬圫חꟼ׃גכ鋉⵱䚍ָ֮ת׶זֻⰅ׏גְ׷ךד満
   殛
   babel⢪׻זֻג׮ְְֻ׵ְחכ㹋鄲ׁ׸ג׷
   

   View Slide

5. TypeScriptך㘗
   ׉׮׉׮javascriptח㢌䳔ׁ׸׷ךדծ㹋遤儗חכ䠐㄂ָ㣟׻׸׷
   ֻ֮תד؝ٝػ؎ٕ儗ח⿫撑ׁ׸ثؑحׁؙ׸׷׌ֽ
   ֽ׸ו׮갹䓸׏ג稢ַֻ剅ֽלծ؝ٝػ؎ٕ儗חٓٝة؎يؒٓ٦
   ׮קר嗚叨דֹ׷
   ׌ַ׵갹䓸׷ך׌
   

   View Slide

6. 㘗?
   㢌侧ח㼎׃ג⦼ָ䭷㹀ׁ׸׋ⵖ秈׾弫׋׃גְ׷ַוֲַ׾嗚鏾ׅ
   ׷׮ך
   

   View Slide

7. const value: string = 1;!
   

   View Slide

8. ⽃秪ז㘗
   ءٝفٕחstringהַnumberהַ剅ֻװא
   ֮הכ荈⡲ךؙٓأהַ
   

   View Slide

9. const value: string = 'string';!
   const value: number = 1;!
   

   View Slide

10. interface/class
    interfaceהclass
    

    View Slide

11. interface X {!
    getName(): string;!
    getAge(): number;!
    }!
    !
    class XImpl implements X {!
    getName() {return 'Aono';}!
    getAge() {return 31;}!
    }!
    

    View Slide

12. Generics
    㘗׾⹛涸ח㢌ִ׵׸׷װא
    

    View Slide

13. interface M {!
    getValue(): T;!
    }!
    !
    class MImpl implements M {!
    getValue(): string {!
    return 'foobarbaz'!
    }!
    }!
    

    View Slide

14. 醱さر٦ة㘗ך琎꧊さ٥锷椚ㄤ
    㘗׾穠さׅ׷װא
    

    View Slide

15. type A = {!
    a: number,!
    b: string!
    } & {!
    c: RegExp!
    };!
    

    View Slide

16. type B = {!
    a: number,!
    b: string!
    } | {!
    a: string,!
    b: number!
    };!
    

    View Slide

17. nullךثؑحؙ
    strictNullCheckהְֲؔفءّٝ׾onחׅ׷ה
    nullableהnonnullable׾׍ׯ׿הثؑحؙׅ׷
    

    View Slide

18. let value: string | null = null;!
    

    View Slide

19. ➙傈鑧׃׋ַ׏׋װא
    ➭ח׮ְ׹ְ׹⤑ⵃז㘗ך堣腉ָ֮׷
    ָծאת׵׿ךד満殛
    ֿ׸ַ׵ָ鑧׃׋ַ׏׋װא
    

    View Slide

20. 㘗׏ג꬗⦜
    㹑鎉涸ד֮׷䗳銲ָ֮׏גծהחַֻ剅ֻךָ꬗⦜
    

    View Slide

21. const x: {a: string, b: number} = obj;!
    const y: {a: number, b: string} = obj;!
    !
    const x: {!
    a: MyClass>,!
    ...!
    } = obj;!
    const y: {!
    a: MyClass>,!
    ...!
    } = obj;!
    

    View Slide

22. Mapped Type
    㘗ךⱖ⫷׾⡲䧭ׅ׷
    

    View Slide

23. type Person = {!
    name: string;!
    age: number;!
    }!
    

    View Slide

24. type FetchedPerson = {!
    [P in Person]: Promise!
    };!
    !
    type FetchedPerson = {!
    name: Promise;!
    age: Promise;!
    }!
    

    View Slide

25. type Promisify = {!
    [P in T]: Promise!
    };!
    !
    type FetchedPerson = Promisify;!
    

    View Slide

26. Conditional Type
    㘗ד♲갪怴皾㶨ַָֽ׷״
    

    View Slide

27. Infer operator
    㘗㢌侧ךفٖ٦أمٕت٦ה׃ג堣腉ׅ׷״խ
    

    View Slide

28. ֿך2אָَغ؎׿דׅ
    ꟼ侧ך䨱׶⦼׾《䖤׃׋׶
    PromiseⰋ鿇䒷׏⶟ָ׃׋׶
    ꂁ⴨ך銲稆㘗《䖤׃׋׶
    

    View Slide

29. type MyReturnType = !
    T extends (...args: any) => infer X? X: T;!
    !
    interface X {!
    getName(): string!
    }!
    !
    type R = MyReturnType!
    ꟼ侧ך䨱׶⦼׾《䖤
    

    View Slide

30. type UnPromisifyField = {!
    [P in keyof T]:!
    T[P] extends Promise? UnPromisify!
    : UnPromisify;!
    }!
    !
    type UnPromisify =!
    T extends Promise? UnPromisifyField!
    : UnPromisifyField;
    Promise׾䒷׏⶟ָׅ
    

    View Slide

31. type X = {!
    y: {!
    value: Promise;!
    };!
    z: Promise!
    }!
    !
    type Y = UnPromisify;!
    

    View Slide

32. type ArrayElementType = T extends
    Array!
    ? R!
    : T extends ArrayLike!
    ? R!
    : T extends NodeListOf ? R!
    : T extends NodeList ? Node[] : T;!
    ꂁ⴨ך銲稆㘗׾《䖤
    

    View Slide

33. ➭ח׮
    㘗ず㡦ך䊴ⴓ׌׏׋׶ծ֮׷㘗ַ׵暴㹀ךفٗػذ؍׌ֽ嶊׃׋׶
    暴㹀ךفٗػذ؍׌ֽ䫙ֹ⳿׃׋㘗׾⡲׏׋׶
    החַֻ㘗דⶴה⡦ד׮דֹ׷鎉铂חז׶ת׃׋կ
    

    View Slide

34. type X = {!
    a: string;!
    b: number;!
    c: string;!
    };!
    !
    type Y = Pick;!
    

    View Slide

35. 劢勻?
    ➙כTupleדbindװapplyך㘗׾邌׉ֲה׃ג׷׫׋ְדׅי
    

    View Slide

36. תה׭
    TypeScriptך㘗כַז׶厫鮾חז׏׋ךדծ㘗ך鿇ⴓד♶弫ח䙼ֲ
    ֿהכ׌ְע幾׏גתׅ
    僽ꬊֶ鑐׃׾
    ׀幠耮֮׶ָהֲ׀ְׂת׃׋կ
    

    View Slide