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
450
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
3k
Parsing Javascript
brn
13
9.1k
JSON & Object Tips
brn
1
440
CA 1Day Youth Bootcamp for Frontend LT
brn
0
870
Modern TypeScript
brn
2
770
javascript - behind the scene
brn
3
710
tc39 proposals
brn
0
830
プロダクト開発とTypeScript
brn
8
2.9k
React-Springでリッチなアニメーション
brn
1
650
Featured
See All Featured
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
21
2.5k
Code Review Best Practice
trishagee
67
18k
GraphQLの誤解/rethinking-graphql
sonatard
68
10k
Why Our Code Smells
bkeepers
PRO
336
57k
The Cost Of JavaScript in 2023
addyosmani
47
7.3k
A designer walks into a library…
pauljervisheath
205
24k
Mobile First: as difficult as doing things right
swwweet
223
9.4k
Bootstrapping a Software Product
garrettdimon
PRO
306
110k
The Power of CSS Pseudo Elements
geoffreycrofte
75
5.5k
Stop Working from a Prison Cell
hatefulcrawdad
267
20k
Designing Experiences People Love
moore
140
23k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
44
7k
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ך㘗כַז厫鮾חזךדծ㘗ך鿇ⴓד♶弫ח䙼ֲ ֿהכְע幾גתׅ 僽ꬊֶ鑐׃ ׀幠耮ָ֮הֲ׀ְׂת׃կ