Tweet
Tweet

Slide 1

Slide 1 text

Today's TypeScript Types for beginner

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

const value: string = 1;!

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

interface/class interfaceהclass

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

let value: string | null = null;!

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

Mapped Type 㘗ךⱖ⫷׾⡲䧭ׅ׷

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

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