todays-typescript.pdf

Transcript

1. Today's TypeScript Types for beginner

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

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

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

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

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

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

7. const value: string = 1;!

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

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

10. interface/class
    interfaceהclass
    

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

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

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

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

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

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

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

    {! c: RegExp! };!

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

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

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

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

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

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

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. Mapped Type
    㘗ךⱖ⫷׾⡲䧭ׅ׷

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

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

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

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

    type FetchedPerson = Promisify<Person>;!

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

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

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

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

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

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. type X = {! y: {! value: Promise<string>;! };! z:

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

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

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

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

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

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