Александр Русаков - TypeScript 2 in action
0 likes888 views
The document provides an overview of TypeScript's evolution from versions 1.8 to 2.0 and covers essential features such as null safety, literal types, and usage with Redux and React. Key points include the introduction of non-nullable types, discriminated unions, and mapped types. The content is aimed at developers looking to enhance their understanding of TypeScript for better application development.
![Undefined / Null
type User = {
name: string
tags?: string[]
}
function getTags(user: User) {
return user.tags.join(', ')
}
6](https://image.slidesharecdn.com/typescript2inaction-1-170222103825/85/TypeScript-2-in-action-6-320.jpg)
![type User = {
name: string
tags?: string[]
}
function getTags(user: User) {
return user.tags.join(', ')
}
Undefined / Null
7](https://image.slidesharecdn.com/typescript2inaction-1-170222103825/85/TypeScript-2-in-action-7-320.jpg)
![type User = {
name: string
tags?: string[]
}
function getTags(user: User) {
return user.tags.join(', ')
}
Undefined / Null
8](https://image.slidesharecdn.com/typescript2inaction-1-170222103825/85/TypeScript-2-in-action-8-320.jpg)
Александр Русаков - TypeScript 2 in action
- 1. TypeScript 2 in action Александр Русаков / Techops [email protected] github.com/arusakov
- 2. Немного истории 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
- 3. О чем пойдет речь ● Защита от Undefined / Null ● Literal Types и что это такое ● Размеченные объединения и Redux ● Типизация для React Component API 3
- 5. Undefined / Null TypeError: Cannot read property 'x' of undefined TypeError: Cannot read property 'y' of null 5
- 6. Undefined / Null type User = { name: string tags?: string[] } function getTags(user: User) { return user.tags.join(', ') } 6
- 7. type User = { name: string tags?: string[] } function getTags(user: User) { return user.tags.join(', ') } Undefined / Null 7
- 8. type User = { name: string tags?: string[] } function getTags(user: User) { return user.tags.join(', ') } Undefined / Null 8
- 9. Non-Nullable Types https://github.com/Microsoft/TypeScript/pull/7140 // tsc --strictNullChecks function getTags(user: User) { return user.tags.join(', ') } // ERROR: Object is possibly 'undefined' 9
- 10. Non-Nullable Types // tsc --strictNullChecks function getTagStrict(user: User) { return user.tags && user.tags.join(', ') } 10
- 11. Non-Null Assertion ! // tsc --strictNullChecks function getTagForce(user: User) { return user.tags!.join(', ') } 11
- 13. font-weight 13 Какие допустимые значения этого CSS свойства?
- 14. 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
- 15. font-weight 15 type fontWeight = number | string <div style={{ fontWeight: 1000 }} /> <div style={{ fontWeight: 'ligther' }} />
- 16. font-weight 16 type fontWeight = number | string <div style={{ fontWeight: 1000 }} /> <div style={{ fontWeight: 'ligther' }} />
- 17. font-weight 17 type fontWeight = number | string <div style={{ fontWeight: 1000 }} /> <div style={{ fontWeight: 'ligther' }} />
- 18. Literal Types 18 type fontWeight = 'initial' | 'inherit' | 'unset' | 'normal' | 'bold' | 'bolder' | 'lighter' | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 https://github.com/Microsoft/TypeScript/pull/9407
- 19. Literal Types 19 <div style={{ fontWeight: 1000 }} /> <div style={{ fontWeight: 'ligther' }} /> // ERROR: Types of property 'fontWeight' are incompatible.
- 20. TypeScript 1 + Redux import { Action } from 'redux' // Interface const ACTION_TYPE_1 = 'type1' interface Action1 extends Action { data: number } 20
- 21. TypeScript 1 + Redux function reduce(state, action: Action) { switch (action.type) { case ACTION_TYPE_1: action.data } } 21
- 22. TypeScript 1 + Redux function reduce(state, action: Action) { switch (action.type) { case ACTION_TYPE_1: action.data } } // ERROR: Property 'data' does not exist on type 'Action' 22
- 23. TypeScript 1 + Redux 23 function reduce(state, action: Action) { switch (action.type) { case ACTION_TYPE_1: (action as Action1).data // number } }
- 24. TypeScript 1 + Redux ≠ ♥ 24
- 25. TypeScript 2 25
- 26. Discriminated Union Types type Action = { type: 'type1', id: number } | { type: 'type2', name: string } 26https://github.com/Microsoft/TypeScript/pull/9163
- 27. Discriminated Union Types const ACTION_TYPE1 = 'type1' const ACTION_TYPE2 = 'type2' 27
- 28. Discriminated Union Types const ACTION_TYPE1 = 'type1' const ACTION_TYPE2 = 'type2' type Action = { type: typeof ACTION_TYPE1, id: number } | { type: typeof ACTION_TYPE2, name: string } 28
- 29. TypeScript 2 ♥ Redux https://spin.atomicobject.com/2016/09/27/typed-redux-reducers-typescript-2-0/ switch (action.type) { case ACTION_TYPE1: action.id // number case ACTION_TYPE2: action.name // string } 29
- 30. React 30
- 31. TypeScript 1 + React type State = { x: number, y: string } this.state.x = 1 this.setState({ y: e.target.value }) 31
- 32. TypeScript 1 + React type State = { x: number, y: string } this.state.x = 1 this.setState({ y: e.target.value }) // ERROR: Property 'x' is missing 32
- 33. TypeScript 1 + React type State = { x: number, y: string } this.state.x = 1 this.setState({ y: e.target.value } as State) 33
- 34. TypeScript 1 + React ≠ ♥ 34
- 35. 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 https://github.com/Microsoft/TypeScript/pull/11929 https://github.com/Microsoft/TypeScript/pull/12114
- 36. TypeScript 2 ♥ React type State = { x: number, y: string } this.state.x = 1 // ERROR: Cannot assign because it is a read-only property this.setState({ y: e.target.value }) 36
- 37. Predefined Mapped Types // lib.es6.d.ts Pick<T, K extends keyof T> Readonly<T> Partial<T> Record<K extends string, T> 37
- 39. Спасибо за внимание Вопросы? Презентация и материалы: bit.ly/2kzGfOP Александр Русаков / Techops [email protected] github.com/arusakov