Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Александр Русаков - TypeScript 2 in action

327 views

Published on

В докладе речь пойдет об основных нововведениях TypeScript 2.0 и 2.1 (literal types, discriminated unions, mapped types...) и их использовании в реальных проектах.

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Александр Русаков - TypeScript 2 in action

  1. 1. TypeScript 2 in action Александр Русаков / Techops a_s_rusakov@mail.ru github.com/arusakov
  2. 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. 3. О чем пойдет речь ● Защита от Undefined / Null ● Literal Types и что это такое ● Размеченные объединения и Redux ● Типизация для React Component API 3
  4. 4. Undefined everywhere 4
  5. 5. Undefined / Null TypeError: Cannot read property 'x' of undefined TypeError: Cannot read property 'y' of null 5
  6. 6. Undefined / Null type User = { name: string tags?: string[] } function getTags(user: User) { return user.tags.join(', ') } 6
  7. 7. type User = { name: string tags?: string[] } function getTags(user: User) { return user.tags.join(', ') } Undefined / Null 7
  8. 8. type User = { name: string tags?: string[] } function getTags(user: User) { return user.tags.join(', ') } Undefined / Null 8
  9. 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. 10. Non-Nullable Types // tsc --strictNullChecks function getTagStrict(user: User) { return user.tags && user.tags.join(', ') } 10
  11. 11. Non-Null Assertion ! // tsc --strictNullChecks function getTagForce(user: User) { return user.tags!.join(', ') } 11
  12. 12. Literal Types 12 ???
  13. 13. font-weight 13 Какие допустимые значения этого CSS свойства?
  14. 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. 15. font-weight 15 type fontWeight = number | string <div style={{ fontWeight: 1000 }} /> <div style={{ fontWeight: 'ligther' }} />
  16. 16. font-weight 16 type fontWeight = number | string <div style={{ fontWeight: 1000 }} /> <div style={{ fontWeight: 'ligther' }} />
  17. 17. font-weight 17 type fontWeight = number | string <div style={{ fontWeight: 1000 }} /> <div style={{ fontWeight: 'ligther' }} />
  18. 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. 19. Literal Types 19 <div style={{ fontWeight: 1000 }} /> <div style={{ fontWeight: 'ligther' }} /> // ERROR: Types of property 'fontWeight' are incompatible.
  20. 20. TypeScript 1 + Redux import { Action } from 'redux' // Interface const ACTION_TYPE_1 = 'type1' interface Action1 extends Action { data: number } 20
  21. 21. TypeScript 1 + Redux function reduce(state, action: Action) { switch (action.type) { case ACTION_TYPE_1: action.data } } 21
  22. 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. 23. TypeScript 1 + Redux 23 function reduce(state, action: Action) { switch (action.type) { case ACTION_TYPE_1: (action as Action1).data // number } }
  24. 24. TypeScript 1 + Redux ≠ ♥ 24
  25. 25. TypeScript 2 25
  26. 26. Discriminated Union Types type Action = { type: 'type1', id: number } | { type: 'type2', name: string } 26https://github.com/Microsoft/TypeScript/pull/9163
  27. 27. Discriminated Union Types const ACTION_TYPE1 = 'type1' const ACTION_TYPE2 = 'type2' 27
  28. 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. 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. 30. React 30
  31. 31. TypeScript 1 + React type State = { x: number, y: string } this.state.x = 1 this.setState({ y: e.target.value }) 31
  32. 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. 33. TypeScript 1 + React type State = { x: number, y: string } this.state.x = 1 this.setState({ y: e.target.value } as State) 33
  34. 34. TypeScript 1 + React ≠ ♥ 34
  35. 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. 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. 37. Predefined Mapped Types // lib.es6.d.ts Pick<T, K extends keyof T> Readonly<T> Partial<T> Record<K extends string, T> 37
  38. 38. В заключение 38 github.com/Microsoft/TypeScript/wiki/What's-new-in-TypeScript github.com/Microsoft/TypeScript/wiki/Roadmap
  39. 39. Спасибо за внимание Вопросы? Презентация и материалы: bit.ly/2kzGfOP Александр Русаков / Techops a_s_rusakov@mail.ru github.com/arusakov

×