Pro Yearly is on sale from $80 to $50! »

todays-typescript.pdf

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