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