TypeScript 2 in action

TypeScript 2 in action
Александр Русаков / Techops
a_s_rusakov@mail.ru
github.com/arusakov

Немного истории
TypeScript 1.8 22 февраля 2016 г.
TypeScript 2.0 22 сентября 2016 г.
TypeScript 2.1 7 декабря 2016 г.
TypeScript 2.2 RC 2 февраля 2017 г.
blogs.msdn.microsoft.com/typescript/ 2

О чем пойдет речь
● Защита от Undefined / Null
● Literal Types и что это такое
● Размеченные объединения и Redux
● Типизация для React Component API
3

Undefined / Null
TypeError: Cannot read property 'x' of undefined
TypeError: Cannot read property 'y' of null
5

Undefined / Null
type User = {
name: string
tags?: string[]
}
function getTags(user: User) {
return user.tags.join(', ')
}
6

type User = {
name: string
tags?: string[]
}
}
Undefined / Null
7

type User = {
name: string
tags?: string[]
}
}
Undefined / Null
8

Non-Nullable Types
https://github.com/Microsoft/TypeScript/pull/7140
// tsc --strictNullChecks
}
// ERROR: Object is possibly 'undefined'
9

Non-Nullable Types
function getTagStrict(user: User) {
return user.tags && user.tags.join(', ')
}
10

Non-Null Assertion !
function getTagForce(user: User) {
return user.tags!.join(', ')
}
11

font-weight
13
Какие допустимые значения этого CSS свойства?

font-weight
14
Какие допустимые значения этого CSS свойства?
initial, inherit, unset,
normal, bold, bolder, lighter
100, 200, 300, 400, 500, 600, 700, 800, 900
https://www.w3.org/TR/css-fonts-3/#font-weight-prop

font-weight
15
type fontWeight = number | string
<div style={{ fontWeight: 1000 }} />
<div style={{ fontWeight: 'ligther' }} />

font-weight
16

font-weight
17

Literal Types
18
type fontWeight =
'initial' | 'inherit' | 'unset' |
'normal' | 'bold' | 'bolder' | 'lighter' |
100 | 200 | 300 | 400 | 500 |
600 | 700 | 800 | 900

Literal Types
19
// ERROR: Types of property 'fontWeight' are incompatible.

TypeScript 1 + Redux
import { Action } from 'redux' // Interface
const ACTION_TYPE_1 = 'type1'
interface Action1 extends Action {
data: number
}
20

function reduce(state, action: Action) {
switch (action.type) {
case ACTION_TYPE_1:
action.data
}
}
21

case ACTION_TYPE_1:
action.data
}
}
// ERROR: Property 'data' does not exist on type 'Action'
22

23
case ACTION_TYPE_1:
(action as Action1).data // number
}
}

TypeScript 1 + Redux ≠ ♥
24

Discriminated Union Types
type Action =
{ type: 'type1', id: number } |
{ type: 'type2', name: string }
26https://github.com/Microsoft/TypeScript/pull/9163

const ACTION_TYPE1 = 'type1'
27

type Action =
{ type: typeof ACTION_TYPE1, id: number } |
{ type: typeof ACTION_TYPE2, name: string }
28

TypeScript 2 ♥ Redux
https://spin.atomicobject.com/2016/09/27/typed-redux-reducers-typescript-2-0/
case ACTION_TYPE1:
action.id // number
case ACTION_TYPE2:
action.name // string
}
29

TypeScript 1 + React
type State = { x: number, y: string }
this.state.x = 1
this.setState({ y: e.target.value })
31

this.state.x = 1
// ERROR: Property 'x' is missing
32

this.state.x = 1
this.setState({ y: e.target.value } as State)
33

TypeScript 1 + React ≠ ♥
34

Index+Mapped Types
// react.d.ts
class Component<P, S> {
setState<K extends keyof S>(s: Pick<S, K>): void;
props: Readonly<P>;
state: Readonly<S>;
}
35

TypeScript 2 ♥ React
this.state.x = 1
// ERROR: Cannot assign because it is a read-only property
36

Predefined Mapped Types
// lib.es6.d.ts
Pick<T, K extends keyof T>
Readonly<T>
Partial<T>
Record<K extends string, T>
37

В заключение
38
github.com/Microsoft/TypeScript/wiki/What's-new-in-TypeScript
github.com/Microsoft/TypeScript/wiki/Roadmap

Спасибо за внимание
Вопросы?
Презентация и материалы: bit.ly/2kzGfOP
Александр Русаков / Techops
a_s_rusakov@mail.ru
github.com/arusakov

TypeScript 2 in action

More Related Content

Viewers also liked (13)

Similar to TypeScript 2 in action (20)

Recently uploaded (20)

TypeScript 2 in action