todays-typescript.pdf

Transcript

1. 1.

   Today's TypeScript Types for beginner

2. 2.

   Name @brn (ꫬꅿ⨳ⵃ) Occupation ؿٗٝزؒٝسؒٝآص،٥ط؎ذ؍ـؒٝآص، Company Cyberagent ،سذؙأةآؔ AI Messenger

   OSS Contributor of V8 About http://info.b6n.ch
3. 3.

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

4. 4.

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

5. 5.

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

6. 6.

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

7. 7.

   const value: string = 1;!

8. 8.

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

9. 9.

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

10. 10.

    interface/class
    interfaceהclass
    

11. 11.

    interface X {! getName(): string;! getAge(): number;! }! ! class

    XImpl implements X {! getName() {return 'Aono';}! getAge() {return 31;}! }!
12. 12.

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

13. 13.

    interface M<T> {! getValue(): T;! }! ! class MImpl implements

    M<string> {! getValue(): string {! return 'foobarbaz'! }! }!
14. 14.

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

15. 15.

    type A = {! a: number,! b: string! } &

    {! c: RegExp! };!
16. 16.

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

    {! a: string,! b: number! };!
17. 17.

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

18. 18.

    let value: string | null = null;!

19. 19.

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

20. 20.

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

21. 21.

    const x: {a: string, b: number} = obj;! const y:

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

    Mapped Type
    㘗ךⱖ⫷׾⡲䧭ׅ׷

23. 23.

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

24. 24.

    type FetchedPerson = {! [P in Person]: Promise<Person[P]>! };! !

    type FetchedPerson = {! name: Promise<string>;! age: Promise<number>;! }!
25. 25.

    type Promisify<T> = {! [P in T]: Promise<T[P]>! };! !

    type FetchedPerson = Promisify<Person>;!
26. 26.

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

27. 27.

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

28. 28.

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

29. 29.

    type MyReturnType<T> = ! T extends (...args: any) => infer

    X? X: T;! ! interface X {! getName(): string! }! ! type R = MyReturnType<X['getName']>! ꟼ侧ך䨱׶⦼׾《䖤
    
30. 30.

    type UnPromisifyField<T> = {! [P in keyof T]:! T[P] extends

    Promise<infer X>? UnPromisify<X>! : UnPromisify<T[P]>;! }! ! type UnPromisify<T> =! T extends Promise<infer X>? UnPromisifyField<X>! : UnPromisifyField<T>; Promise׾䒷׏⶟ָׅ
    
31. 31.

    type X = {! y: {! value: Promise<string>;! };! z:

    Promise<number>! }! ! type Y = UnPromisify<X>;!
32. 32.

    type ArrayElementType<T> = T extends Array<infer R>! ? R! :

    T extends ArrayLike<infer R>! ? R! : T extends NodeListOf<infer R> ? R! : T extends NodeList ? Node[] : T;! ꂁ⴨ך銲稆㘗׾《䖤
    
33. 33.

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

34. 34.

    type X = {! a: string;! b: number;! c: string;!

    };! ! type Y = Pick<X, 'a' | 'b'>;!
35. 35.

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

36. 36.

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