Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
todays-typescript.pdf
Search
Taketoshi Aono(青野健利 a.k.a brn)
June 19, 2018
2
420
todays-typescript.pdf
Taketoshi Aono(青野健利 a.k.a brn)
June 19, 2018
Tweet
Share
More Decks by Taketoshi Aono(青野健利 a.k.a brn)
See All by Taketoshi Aono(青野健利 a.k.a brn)
document.write再考
brn
6
2.6k
Parsing Javascript
brn
12
7.4k
JSON & Object Tips
brn
1
300
CA 1Day Youth Bootcamp for Frontend LT
brn
0
690
Modern TypeScript
brn
2
680
javascript - behind the scene
brn
3
610
tc39 proposals
brn
0
660
プロダクト開発とTypeScript
brn
8
2.7k
React-Springでリッチなアニメーション
brn
1
520
Featured
See All Featured
Code Review Best Practice
trishagee
56
15k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
34
8.9k
Writing Fast Ruby
sferik
622
60k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
226
51k
Mobile First: as difficult as doing things right
swwweet
217
8.6k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
188
16k
A designer walks into a library…
pauljervisheath
201
23k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
21
2k
Agile that works and the tools we love
rasmusluckow
325
20k
Docker and Python
trallard
35
2.7k
Adopting Sorbet at Scale
ufuk
69
8.6k
YesSQL, Process and Tooling at Scale
rocio
165
13k
Transcript
Today's TypeScript Types for beginner
Name @brn (ꫬꅿ⨳ⵃ) Occupation ؿٗٝزؒٝسؒٝآص،٥ط؎ذ؍ـؒٝآص، Company Cyberagent ،سذؙأةآؔ AI Messenger
OSS Contributor of V8 About http://info.b6n.ch
➙傈ך鑧כ֮תTSח鍗גְזְ➂הַ ➙䖓⢪ֲֶַה䙼גְ➂ぢֽדׅկ
僴➙ךTypeScript 㘗ך乼⡲ְָםְדֹ״ֲחזת׃կ Ecmascriptך➬圫חꟼ׃גכ鋉䚍ָ֮תזֻⰅגְךד満 殛 babel⢪זֻגְְְֻחכ㹋鄲ׁג
TypeScriptך㘗 javascriptח㢌䳔ׁךדծ㹋遤儗חכ䠐ָ㣟 ֻ֮תד؝ٝػ؎ٕ儗ח撑ׁثؑحֽׁؙ ֽו갹䓸ג稢ַֻ剅ֽלծ؝ٝػ؎ٕ儗חٓٝة؎يؒٓ٦ קר嗚叨דֹ ַ갹䓸ך
㘗? 㢌侧ח㼎׃ג⦼ָ䭷㹀ׁⵖ秈弫׃גְַוֲַ嗚鏾ׅ ך
const value: string = 1;!
⽃秪ז㘗 ءٝفٕחstringהַnumberהַ剅ֻװא ֮הכ荈⡲ךؙٓأהַ
const value: string = 'string';! const value: number = 1;!
interface/class interfaceהclass
interface X {! getName(): string;! getAge(): number;! }! ! class
XImpl implements X {! getName() {return 'Aono';}! getAge() {return 31;}! }!
Generics 㘗⹛涸ח㢌ִװא
interface M<T> {! getValue(): T;! }! ! class MImpl implements
M<string> {! getValue(): string {! return 'foobarbaz'! }! }!
醱さر٦ة㘗ך琎꧊さ٥锷椚ㄤ 㘗穠さׅװא
type A = {! a: number,! b: string! } &
{! c: RegExp! };!
type B = {! a: number,! b: string! } |
{! a: string,! b: number! };!
nullךثؑحؙ strictNullCheckהְֲؔفءّٝonחׅה nullableהnonnullableׯהثؑحؙׅ
let value: string | null = null;!
➙傈鑧׃ַװא ➭חְְ⤑ⵃז㘗ך堣腉ָ֮ ָծאתךד満殛 ַָֿ鑧׃ַװא
㘗ג⦜ 㹑鎉涸ד֮䗳銲ָ֮גծהחַֻ剅ֻךָ⦜
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;!
Mapped Type 㘗ךⱖ⫷⡲䧭ׅ
type Person = {! name: string;! age: number;! }!
type FetchedPerson = {! [P in Person]: Promise<Person[P]>! };! !
type FetchedPerson = {! name: Promise<string>;! age: Promise<number>;! }!
type Promisify<T> = {! [P in T]: Promise<T[P]>! };! !
type FetchedPerson = Promisify<Person>;!
Conditional Type 㘗ד♲갪怴皾㶨ַָֽ״
Infer operator 㘗㢌侧ךفٖ٦أمٕت٦ה׃ג堣腉ׅ״խ
ֿך2אָَغ؎דׅ ꟼ侧ך䨱⦼《䖤׃ PromiseⰋ鿇䒷ָ׃ ꂁך銲稆㘗《䖤׃
type MyReturnType<T> = ! T extends (...args: any) => infer
X? X: T;! ! interface X {! getName(): string! }! ! type R = MyReturnType<X['getName']>! ꟼ侧ך䨱⦼《䖤
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䒷ָׅ
type X = {! y: {! value: Promise<string>;! };! z:
Promise<number>! }! ! type Y = UnPromisify<X>;!
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;! ꂁך銲稆㘗《䖤
➭ח 㘗ず㡦ך䊴ⴓծ֮㘗ַ暴㹀ךفٗػذ؍ֽ嶊׃ 暴㹀ךفٗػذ؍ֽ䫙ֹ⳿׃㘗⡲ החַֻ㘗דⶴה⡦דדֹ鎉铂חזת׃կ
type X = {! a: string;! b: number;! c: string;!
};! ! type Y = Pick<X, 'a' | 'b'>;!
劢勻? ➙כTupleדbindװapplyך㘗邌ֲה׃גְדׅי
תה TypeScriptך㘗כַז厫鮾חזךדծ㘗ך鿇ⴓד♶弫ח䙼ֲ ֿהכְע幾גתׅ 僽ꬊֶ鑐׃ ׀幠耮ָ֮הֲ׀ְׂת׃կ