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
Александр Русаков / Techops
a_s_rusakov@mail.ru
github.com/arusakov
Немного истории
TypeScript 1.8 22 февраля 2016 г.
TypeScript 2.0 22 сентября 2016 г.
TypeScript 2.1 7 декабря 2016 г.
Type...
О чем пойдет речь
● Защита от Undefined / Null
● Literal Types и что это такое
● Размеченные объединения и Redux
● Типизац...
Undefined everywhere
4
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(', ')
}...
type User = {
name: string
tags?: string[]
}
function getTags(user: User) {
return user.tags.join(', ')
}
Undefined / Null...
type User = {
name: string
tags?: string[]
}
function getTags(user: User) {
return user.tags.join(', ')
}
Undefined / Null...
Non-Nullable Types
https://github.com/Microsoft/TypeScript/pull/7140
// tsc --strictNullChecks
function getTags(user: User...
Non-Nullable Types
// tsc --strictNullChecks
function getTagStrict(user: User) {
return user.tags && user.tags.join(', ')
...
Non-Null Assertion !
// tsc --strictNullChecks
function getTagForce(user: User) {
return user.tags!.join(', ')
}
11
Literal Types
12
???
font-weight
13
Какие допустимые значения этого CSS свойства?
font-weight
14
Какие допустимые значения этого CSS свойства?
initial, inherit, unset,
normal, bold, bolder, lighter
100, 2...
font-weight
15
type fontWeight = number | string
<div style={{ fontWeight: 1000 }} />
<div style={{ fontWeight: 'ligther' ...
font-weight
16
type fontWeight = number | string
<div style={{ fontWeight: 1000 }} />
<div style={{ fontWeight: 'ligther' ...
font-weight
17
type fontWeight = number | string
<div style={{ fontWeight: 1000 }} />
<div style={{ fontWeight: 'ligther' ...
Literal Types
18
type fontWeight =
'initial' | 'inherit' | 'unset' |
'normal' | 'bold' | 'bolder' | 'lighter' |
100 | 200 ...
Literal Types
19
<div style={{ fontWeight: 1000 }} />
<div style={{ fontWeight: 'ligther' }} />
// ERROR: Types of propert...
TypeScript 1 + Redux
import { Action } from 'redux' // Interface
const ACTION_TYPE_1 = 'type1'
interface Action1 extends A...
TypeScript 1 + Redux
function reduce(state, action: Action) {
switch (action.type) {
case ACTION_TYPE_1:
action.data
}
}
21
TypeScript 1 + Redux
function reduce(state, action: Action) {
switch (action.type) {
case ACTION_TYPE_1:
action.data
}
}
/...
TypeScript 1 + Redux
23
function reduce(state, action: Action) {
switch (action.type) {
case ACTION_TYPE_1:
(action as Act...
TypeScript 1 + Redux ≠ ♥
24
TypeScript 2
25
Discriminated Union Types
type Action =
{ type: 'type1', id: number } |
{ type: 'type2', name: string }
26https://github.c...
Discriminated Union Types
const ACTION_TYPE1 = 'type1'
const ACTION_TYPE2 = 'type2'
27
Discriminated Union Types
const ACTION_TYPE1 = 'type1'
const ACTION_TYPE2 = 'type2'
type Action =
{ type: typeof ACTION_TY...
TypeScript 2 ♥ Redux
https://spin.atomicobject.com/2016/09/27/typed-redux-reducers-typescript-2-0/
switch (action.type) {
...
React
30
TypeScript 1 + React
type State = { x: number, y: string }
this.state.x = 1
this.setState({ y: e.target.value })
31
TypeScript 1 + React
type State = { x: number, y: string }
this.state.x = 1
this.setState({ y: e.target.value })
// ERROR:...
TypeScript 1 + React
type State = { x: number, y: string }
this.state.x = 1
this.setState({ y: e.target.value } as State)
...
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...
TypeScript 2 ♥ React
type State = { x: number, y: string }
this.state.x = 1
// ERROR: Cannot assign because it is a read-o...
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
githu...
Upcoming SlideShare
Loading in …5
×

of

Александр Русаков - TypeScript 2 in action Slide 1 Александр Русаков - TypeScript 2 in action Slide 2 Александр Русаков - TypeScript 2 in action Slide 3 Александр Русаков - TypeScript 2 in action Slide 4 Александр Русаков - TypeScript 2 in action Slide 5 Александр Русаков - TypeScript 2 in action Slide 6 Александр Русаков - TypeScript 2 in action Slide 7 Александр Русаков - TypeScript 2 in action Slide 8 Александр Русаков - TypeScript 2 in action Slide 9 Александр Русаков - TypeScript 2 in action Slide 10 Александр Русаков - TypeScript 2 in action Slide 11 Александр Русаков - TypeScript 2 in action Slide 12 Александр Русаков - TypeScript 2 in action Slide 13 Александр Русаков - TypeScript 2 in action Slide 14 Александр Русаков - TypeScript 2 in action Slide 15 Александр Русаков - TypeScript 2 in action Slide 16 Александр Русаков - TypeScript 2 in action Slide 17 Александр Русаков - TypeScript 2 in action Slide 18 Александр Русаков - TypeScript 2 in action Slide 19 Александр Русаков - TypeScript 2 in action Slide 20 Александр Русаков - TypeScript 2 in action Slide 21 Александр Русаков - TypeScript 2 in action Slide 22 Александр Русаков - TypeScript 2 in action Slide 23 Александр Русаков - TypeScript 2 in action Slide 24 Александр Русаков - TypeScript 2 in action Slide 25 Александр Русаков - TypeScript 2 in action Slide 26 Александр Русаков - TypeScript 2 in action Slide 27 Александр Русаков - TypeScript 2 in action Slide 28 Александр Русаков - TypeScript 2 in action Slide 29 Александр Русаков - TypeScript 2 in action Slide 30 Александр Русаков - TypeScript 2 in action Slide 31 Александр Русаков - TypeScript 2 in action Slide 32 Александр Русаков - TypeScript 2 in action Slide 33 Александр Русаков - TypeScript 2 in action Slide 34 Александр Русаков - TypeScript 2 in action Slide 35 Александр Русаков - TypeScript 2 in action Slide 36 Александр Русаков - TypeScript 2 in action Slide 37 Александр Русаков - TypeScript 2 in action Slide 38 Александр Русаков - TypeScript 2 in action Slide 39
Upcoming SlideShare
TypeScript Introduction
Next
Download to read offline and view in fullscreen.

0 Likes

Share

Download to read offline

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

Download to read offline

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

Related Books

Free with a 30 day trial from Scribd

See all

Related Audiobooks

Free with a 30 day trial from Scribd

See all
  • 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

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

Views

Total views

819

On Slideshare

0

From embeds

0

Number of embeds

12

Actions

Downloads

3

Shares

0

Comments

0

Likes

0

×