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
430
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.7k
Parsing Javascript
brn
12
8k
JSON & Object Tips
brn
1
330
CA 1Day Youth Bootcamp for Frontend LT
brn
0
720
Modern TypeScript
brn
2
700
javascript - behind the scene
brn
3
640
tc39 proposals
brn
0
720
プロダクト開発とTypeScript
brn
8
2.7k
React-Springでリッチなアニメーション
brn
1
540
Featured
See All Featured
We Have a Design System, Now What?
morganepeng
46
7k
What's new in Ruby 2.0
geeforr
338
31k
Unsuck your backbone
ammeep
666
57k
Fontdeck: Realign not Redesign
paulrobertlloyd
79
5.1k
Docker and Python
trallard
37
2.9k
The Straight Up "How To Draw Better" Workshop
denniskardys
229
130k
Clear Off the Table
cherdarchuk
89
320k
StorybookのUI Testing Handbookを読んだ
zakiyama
15
4.9k
Imperfection Machines: The Place of Print at Facebook
scottboms
262
13k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
78
15k
Music & Morning Musume
bryan
43
5.9k
Why Our Code Smells
bkeepers
PRO
332
56k
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ך㘗כַז厫鮾חזךדծ㘗ך鿇ⴓד♶弫ח䙼ֲ ֿהכְע幾גתׅ 僽ꬊֶ鑐׃ ׀幠耮ָ֮הֲ׀ְׂת׃կ