typescript - urfu-2018.github.io · Сегодня Вывод типов Структурная...
TRANSCRIPT
![Page 1: TypeScript - urfu-2018.github.io · Сегодня Вывод типов Структурная типизация Более сложные типы Обобщенные типы](https://reader034.vdocuments.site/reader034/viewer/2022042709/5f43c6a6a8444a2ed15be791/html5/thumbnails/1.jpg)
TypeScriptЧасть II
Старков Дима
1
![Page 2: TypeScript - urfu-2018.github.io · Сегодня Вывод типов Структурная типизация Более сложные типы Обобщенные типы](https://reader034.vdocuments.site/reader034/viewer/2022042709/5f43c6a6a8444a2ed15be791/html5/thumbnails/2.jpg)
Сегодня
Вывод типов
Структурная типизация
Более сложные типы
Обобщенные типы
Type Guards
2
![Page 3: TypeScript - urfu-2018.github.io · Сегодня Вывод типов Структурная типизация Более сложные типы Обобщенные типы](https://reader034.vdocuments.site/reader034/viewer/2022042709/5f43c6a6a8444a2ed15be791/html5/thumbnails/3.jpg)
TypeScript?
Спасет от выстрелов себе в ногу
ESNext прямо сейчас
Средство против TypeError
Пишет код за вас
Документация к коду
Но...3
![Page 4: TypeScript - urfu-2018.github.io · Сегодня Вывод типов Структурная типизация Более сложные типы Обобщенные типы](https://reader034.vdocuments.site/reader034/viewer/2022042709/5f43c6a6a8444a2ed15be791/html5/thumbnails/4.jpg)
4
![Page 5: TypeScript - urfu-2018.github.io · Сегодня Вывод типов Структурная типизация Более сложные типы Обобщенные типы](https://reader034.vdocuments.site/reader034/viewer/2022042709/5f43c6a6a8444a2ed15be791/html5/thumbnails/5.jpg)
Вывод типов
let n: number = 42 let s: string = 'Hello, world!'
let a: number[] = [1, 2, 3, 4] let n = 42 let s = 'Hello, world!' let a = [1, 2, 3, 4]
�
5
![Page 6: TypeScript - urfu-2018.github.io · Сегодня Вывод типов Структурная типизация Более сложные типы Обобщенные типы](https://reader034.vdocuments.site/reader034/viewer/2022042709/5f43c6a6a8444a2ed15be791/html5/thumbnails/6.jpg)
Наиболее общий тип
let shapes = [new Circle(), new Square()]
shapes.push(new Triangle())
6
![Page 7: TypeScript - urfu-2018.github.io · Сегодня Вывод типов Структурная типизация Более сложные типы Обобщенные типы](https://reader034.vdocuments.site/reader034/viewer/2022042709/5f43c6a6a8444a2ed15be791/html5/thumbnails/7.jpg)
Наиболее общий тип
let shapes = [new Circle(), new Square()]
// Argument of type 'Triangle' // is not assignable to parameter of type 'Square | Circle'. shapes.push( )new Triangle()~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
7
![Page 8: TypeScript - urfu-2018.github.io · Сегодня Вывод типов Структурная типизация Более сложные типы Обобщенные типы](https://reader034.vdocuments.site/reader034/viewer/2022042709/5f43c6a6a8444a2ed15be791/html5/thumbnails/8.jpg)
Наиболее общий тип
let shapes = [new Circle(), new Square()]
shapes.push(new Triangle())
8
![Page 9: TypeScript - urfu-2018.github.io · Сегодня Вывод типов Структурная типизация Более сложные типы Обобщенные типы](https://reader034.vdocuments.site/reader034/viewer/2022042709/5f43c6a6a8444a2ed15be791/html5/thumbnails/9.jpg)
Наиболее общий тип
let shapes = [new Circle(), new Square()]
shapes.push(new Triangle())
9
![Page 10: TypeScript - urfu-2018.github.io · Сегодня Вывод типов Структурная типизация Более сложные типы Обобщенные типы](https://reader034.vdocuments.site/reader034/viewer/2022042709/5f43c6a6a8444a2ed15be791/html5/thumbnails/10.jpg)
Наиболее общий тип
let shapes = [new Circle(), new Square()]
shapes.push(new Triangle())
10
![Page 11: TypeScript - urfu-2018.github.io · Сегодня Вывод типов Структурная типизация Более сложные типы Обобщенные типы](https://reader034.vdocuments.site/reader034/viewer/2022042709/5f43c6a6a8444a2ed15be791/html5/thumbnails/11.jpg)
Наиболее общий тип
let shapes = [new Circle(), new Square()]
// Argument of type 'Triangle' // is not assignable to parameter of type 'Square | Circle'. shapes.push( )new Triangle()~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
11
![Page 12: TypeScript - urfu-2018.github.io · Сегодня Вывод типов Структурная типизация Более сложные типы Обобщенные типы](https://reader034.vdocuments.site/reader034/viewer/2022042709/5f43c6a6a8444a2ed15be791/html5/thumbnails/12.jpg)
Наиболее общий тип
let shapes: Shape[] = [new Circle(), new Square()]
shapes.push(new Triangle())
12
![Page 13: TypeScript - urfu-2018.github.io · Сегодня Вывод типов Структурная типизация Более сложные типы Обобщенные типы](https://reader034.vdocuments.site/reader034/viewer/2022042709/5f43c6a6a8444a2ed15be791/html5/thumbnails/13.jpg)
Совместимость типов
class Human { name: string
} class Robot { name: string } let human: Human = new Robot()
�
13
![Page 14: TypeScript - urfu-2018.github.io · Сегодня Вывод типов Структурная типизация Более сложные типы Обобщенные типы](https://reader034.vdocuments.site/reader034/viewer/2022042709/5f43c6a6a8444a2ed15be791/html5/thumbnails/14.jpg)
Проверка типа в runtime
function addShape(shapes: Shape[], obj: object) { if (obj instanceof Shape) {
shapes.push(obj as Shape) } throw new TypeError('Argument is not instanceof Shape') }
14
![Page 15: TypeScript - urfu-2018.github.io · Сегодня Вывод типов Структурная типизация Более сложные типы Обобщенные типы](https://reader034.vdocuments.site/reader034/viewer/2022042709/5f43c6a6a8444a2ed15be791/html5/thumbnails/15.jpg)
Проверка типа в runtime
function addShape(shapes: Shape[], obj: object) { if (obj instanceof Shape) {
shapes.push(obj as Shape) } throw new TypeError('Argument is not instanceof Shape') }
15
![Page 16: TypeScript - urfu-2018.github.io · Сегодня Вывод типов Структурная типизация Более сложные типы Обобщенные типы](https://reader034.vdocuments.site/reader034/viewer/2022042709/5f43c6a6a8444a2ed15be791/html5/thumbnails/16.jpg)
Проверка типа в runtime
function addShape(shapes: Shape[], obj: object) { if (obj instanceof Shape) {
shapes.push(obj as Shape) } throw new TypeError('Argument is not instanceof Shape') }
16
![Page 17: TypeScript - urfu-2018.github.io · Сегодня Вывод типов Структурная типизация Более сложные типы Обобщенные типы](https://reader034.vdocuments.site/reader034/viewer/2022042709/5f43c6a6a8444a2ed15be791/html5/thumbnails/17.jpg)
Проверка типа в runtime
function addShape(shapes: Shape[], obj: object) { if (obj instanceof Shape) {
shapes.push(obj as Shape) } throw new TypeError('Argument is not instanceof Shape') }
17
![Page 18: TypeScript - urfu-2018.github.io · Сегодня Вывод типов Структурная типизация Более сложные типы Обобщенные типы](https://reader034.vdocuments.site/reader034/viewer/2022042709/5f43c6a6a8444a2ed15be791/html5/thumbnails/18.jpg)
Проверка типа в runtime
function addShape(shapes: Shape[], obj: object) { if (obj instanceof Shape) {
shapes.push(obj as Shape) } throw new TypeError('Argument is not instanceof Shape') }
18
![Page 19: TypeScript - urfu-2018.github.io · Сегодня Вывод типов Структурная типизация Более сложные типы Обобщенные типы](https://reader034.vdocuments.site/reader034/viewer/2022042709/5f43c6a6a8444a2ed15be791/html5/thumbnails/19.jpg)
Type Guard
function addShape(shapes: Shape[], obj: object) { if (obj instanceof Shape) {
shapes.push(obj) } throw new TypeError('Argument is not instanceof Shape') }
19
![Page 20: TypeScript - urfu-2018.github.io · Сегодня Вывод типов Структурная типизация Более сложные типы Обобщенные типы](https://reader034.vdocuments.site/reader034/viewer/2022042709/5f43c6a6a8444a2ed15be791/html5/thumbnails/20.jpg)
TypeScript крут. Но можем ли мы описать весь JavaScript?
20
![Page 21: TypeScript - urfu-2018.github.io · Сегодня Вывод типов Структурная типизация Более сложные типы Обобщенные типы](https://reader034.vdocuments.site/reader034/viewer/2022042709/5f43c6a6a8444a2ed15be791/html5/thumbnails/21.jpg)
Вспомним TypeScript 1.0
Интерфейсы
Классы
Обобщенные типы
Перегрузки функций
Чего еще желать?
21
![Page 22: TypeScript - urfu-2018.github.io · Сегодня Вывод типов Структурная типизация Более сложные типы Обобщенные типы](https://reader034.vdocuments.site/reader034/viewer/2022042709/5f43c6a6a8444a2ed15be791/html5/thumbnails/22.jpg)
// String.split split(separator: ?, limit: number): string[]
22
![Page 23: TypeScript - urfu-2018.github.io · Сегодня Вывод типов Структурная типизация Более сложные типы Обобщенные типы](https://reader034.vdocuments.site/reader034/viewer/2022042709/5f43c6a6a8444a2ed15be791/html5/thumbnails/23.jpg)
// String.split split(separator: string | RegExp, limit: number): string[]
23
![Page 24: TypeScript - urfu-2018.github.io · Сегодня Вывод типов Структурная типизация Более сложные типы Обобщенные типы](https://reader034.vdocuments.site/reader034/viewer/2022042709/5f43c6a6a8444a2ed15be791/html5/thumbnails/24.jpg)
// String.split split(separator: string | RegExp, limit: number): string[]
Решение: Union Types
24
![Page 25: TypeScript - urfu-2018.github.io · Сегодня Вывод типов Структурная типизация Более сложные типы Обобщенные типы](https://reader034.vdocuments.site/reader034/viewer/2022042709/5f43c6a6a8444a2ed15be791/html5/thumbnails/25.jpg)
Union Type Guard
function negate(n: string | number) { if (typeof n === 'string') {
return '-'.concat(n); } else { return -n; } }
25
![Page 26: TypeScript - urfu-2018.github.io · Сегодня Вывод типов Структурная типизация Более сложные типы Обобщенные типы](https://reader034.vdocuments.site/reader034/viewer/2022042709/5f43c6a6a8444a2ed15be791/html5/thumbnails/26.jpg)
Union Type Guard
function negate(n: string | number) { if (typeof n === 'string') {
return '-'.concat(n); } else { return -n; } }
26
![Page 27: TypeScript - urfu-2018.github.io · Сегодня Вывод типов Структурная типизация Более сложные типы Обобщенные типы](https://reader034.vdocuments.site/reader034/viewer/2022042709/5f43c6a6a8444a2ed15be791/html5/thumbnails/27.jpg)
Union Type Guard
function negate(n: string | number) { if (typeof n === 'string') {
return '-'.concat(n); } else { return -n; } }
27
![Page 28: TypeScript - urfu-2018.github.io · Сегодня Вывод типов Структурная типизация Более сложные типы Обобщенные типы](https://reader034.vdocuments.site/reader034/viewer/2022042709/5f43c6a6a8444a2ed15be791/html5/thumbnails/28.jpg)
Union Type Guard
function negate(n: string | number) { if (typeof n === 'string') {
return '-'.concat(n); } else { return -n; } }
28
![Page 29: TypeScript - urfu-2018.github.io · Сегодня Вывод типов Структурная типизация Более сложные типы Обобщенные типы](https://reader034.vdocuments.site/reader034/viewer/2022042709/5f43c6a6a8444a2ed15be791/html5/thumbnails/29.jpg)
Union Type Guard
function negate(n: string | number) { if (typeof n === 'string') {
return '-'.concat(n); } return -n; }
29
![Page 30: TypeScript - urfu-2018.github.io · Сегодня Вывод типов Структурная типизация Более сложные типы Обобщенные типы](https://reader034.vdocuments.site/reader034/viewer/2022042709/5f43c6a6a8444a2ed15be791/html5/thumbnails/30.jpg)
Intersection Types
type Cat = { purr()
}
30
![Page 31: TypeScript - urfu-2018.github.io · Сегодня Вывод типов Структурная типизация Более сложные типы Обобщенные типы](https://reader034.vdocuments.site/reader034/viewer/2022042709/5f43c6a6a8444a2ed15be791/html5/thumbnails/31.jpg)
Intersection Types
type Cat = { purr()
} type Dog = { woof() }
31
![Page 32: TypeScript - urfu-2018.github.io · Сегодня Вывод типов Структурная типизация Более сложные типы Обобщенные типы](https://reader034.vdocuments.site/reader034/viewer/2022042709/5f43c6a6a8444a2ed15be791/html5/thumbnails/32.jpg)
Intersection Types
type Cat = { purr()
} type Dog = { woof() } type CatDog = Cat & Dog
32
![Page 33: TypeScript - urfu-2018.github.io · Сегодня Вывод типов Структурная типизация Более сложные типы Обобщенные типы](https://reader034.vdocuments.site/reader034/viewer/2022042709/5f43c6a6a8444a2ed15be791/html5/thumbnails/33.jpg)
Type Alias
// String.split split(separator: string | RegExp, limit: number): string[]
33
![Page 34: TypeScript - urfu-2018.github.io · Сегодня Вывод типов Структурная типизация Более сложные типы Обобщенные типы](https://reader034.vdocuments.site/reader034/viewer/2022042709/5f43c6a6a8444a2ed15be791/html5/thumbnails/34.jpg)
Type Alias
type StringOrRegExp = string | RegExp
// String.split split(separator: StringOrRegExp, limit: number): string[]
34
![Page 35: TypeScript - urfu-2018.github.io · Сегодня Вывод типов Структурная типизация Более сложные типы Обобщенные типы](https://reader034.vdocuments.site/reader034/viewer/2022042709/5f43c6a6a8444a2ed15be791/html5/thumbnails/35.jpg)
Type vs Interface
type Point = { x: number
y: number }
interface Point { x: number
y: number }
implements interface
Type1 | Type2
35
![Page 36: TypeScript - urfu-2018.github.io · Сегодня Вывод типов Структурная типизация Более сложные типы Обобщенные типы](https://reader034.vdocuments.site/reader034/viewer/2022042709/5f43c6a6a8444a2ed15be791/html5/thumbnails/36.jpg)
Тип ≡ Множество
Можем объединять типы |
Можем пересекать типы &
Можем вычитать из одного типа другой
Фух, теперь точно всё...
36
![Page 37: TypeScript - urfu-2018.github.io · Сегодня Вывод типов Структурная типизация Более сложные типы Обобщенные типы](https://reader034.vdocuments.site/reader034/viewer/2022042709/5f43c6a6a8444a2ed15be791/html5/thumbnails/37.jpg)
А вот и нет!
function get(obj, keyName) {
return obj[keyName] }
function get(obj: any, keyName: string): any { return obj[keyName] } // TypeError: Cannot read property 'prototype' of null get(null, 'prototype') 37
![Page 38: TypeScript - urfu-2018.github.io · Сегодня Вывод типов Структурная типизация Более сложные типы Обобщенные типы](https://reader034.vdocuments.site/reader034/viewer/2022042709/5f43c6a6a8444a2ed15be791/html5/thumbnails/38.jpg)
А вот и нет!
function get(obj, keyName) {
return obj[keyName] }
function get(obj: any, keyName: string): any { return obj[keyName] } // TypeError: Cannot read property 'prototype' of null get(null, 'prototype')
38
![Page 39: TypeScript - urfu-2018.github.io · Сегодня Вывод типов Структурная типизация Более сложные типы Обобщенные типы](https://reader034.vdocuments.site/reader034/viewer/2022042709/5f43c6a6a8444a2ed15be791/html5/thumbnails/39.jpg)
А вот и нет!
function get(obj, keyName) {
return obj[keyName] }
function get(obj: any, keyName: string): any { return obj[keyName] } // TypeError: Cannot read property 'prototype' of null get(null, 'prototype')
39
![Page 40: TypeScript - urfu-2018.github.io · Сегодня Вывод типов Структурная типизация Более сложные типы Обобщенные типы](https://reader034.vdocuments.site/reader034/viewer/2022042709/5f43c6a6a8444a2ed15be791/html5/thumbnails/40.jpg)
А вот и нет!
function get(obj, keyName) {
return obj[keyName] }
function get(obj: any, keyName: string): any { return obj[keyName] } // TypeError: Cannot read property 'prototype' of null get(null, 'prototype')
40
![Page 41: TypeScript - urfu-2018.github.io · Сегодня Вывод типов Структурная типизация Более сложные типы Обобщенные типы](https://reader034.vdocuments.site/reader034/viewer/2022042709/5f43c6a6a8444a2ed15be791/html5/thumbnails/41.jpg)
Нужно уметь обрабатывать значенияразных типов идентичным образом
Кажется нам нужен...
41
![Page 42: TypeScript - urfu-2018.github.io · Сегодня Вывод типов Структурная типизация Более сложные типы Обобщенные типы](https://reader034.vdocuments.site/reader034/viewer/2022042709/5f43c6a6a8444a2ed15be791/html5/thumbnails/42.jpg)
42
![Page 43: TypeScript - urfu-2018.github.io · Сегодня Вывод типов Структурная типизация Более сложные типы Обобщенные типы](https://reader034.vdocuments.site/reader034/viewer/2022042709/5f43c6a6a8444a2ed15be791/html5/thumbnails/43.jpg)
Обобщенные типы
function identity(arg: any): any { return arg;
}
43
![Page 44: TypeScript - urfu-2018.github.io · Сегодня Вывод типов Структурная типизация Более сложные типы Обобщенные типы](https://reader034.vdocuments.site/reader034/viewer/2022042709/5f43c6a6a8444a2ed15be791/html5/thumbnails/44.jpg)
Обобщенные типы
function identity<T>(arg: T): T { return arg;
}
44
![Page 45: TypeScript - urfu-2018.github.io · Сегодня Вывод типов Структурная типизация Более сложные типы Обобщенные типы](https://reader034.vdocuments.site/reader034/viewer/2022042709/5f43c6a6a8444a2ed15be791/html5/thumbnails/45.jpg)
Обобщенные функции
function identity<T>(arg: T): T { return arg;
} identity('string') // T is string identity(12131415) // T is number identity([4, 8, 15, 16, 23, 42]) // T is number[]
45
![Page 46: TypeScript - urfu-2018.github.io · Сегодня Вывод типов Структурная типизация Более сложные типы Обобщенные типы](https://reader034.vdocuments.site/reader034/viewer/2022042709/5f43c6a6a8444a2ed15be791/html5/thumbnails/46.jpg)
Встроенные обобщенные типы
const fib: Array<number> = [1, 1, 2, 3, 5]
// Argument of type 'string' // is not assignable to parameter of type 'number'. fib.push( ) const map: Map<number, string> = new Map() // Argument of type 'number' // is not assignable to parameter of type 'string'. map.set(1, )
'1'~~~~~~~~~
1~~~
46
![Page 47: TypeScript - urfu-2018.github.io · Сегодня Вывод типов Структурная типизация Более сложные типы Обобщенные типы](https://reader034.vdocuments.site/reader034/viewer/2022042709/5f43c6a6a8444a2ed15be791/html5/thumbnails/47.jpg)
Обобщенные интерфейсы
interface IStack<TItem> { push(item: TItem)
pop(): TItem } let numStack: IStack<number> = [1, 2, 3]
47
![Page 48: TypeScript - urfu-2018.github.io · Сегодня Вывод типов Структурная типизация Более сложные типы Обобщенные типы](https://reader034.vdocuments.site/reader034/viewer/2022042709/5f43c6a6a8444a2ed15be791/html5/thumbnails/48.jpg)
Обобщенные интерфейсы
interface IStack<number> { push(item: number)
pop(): number } let numStack: IStack<number> = [1, 2, 3]
48
![Page 49: TypeScript - urfu-2018.github.io · Сегодня Вывод типов Структурная типизация Более сложные типы Обобщенные типы](https://reader034.vdocuments.site/reader034/viewer/2022042709/5f43c6a6a8444a2ed15be791/html5/thumbnails/49.jpg)
Обобщенные типы
type AsyncResult<TResult> = Promise<TResult> | TResult
let result: AsyncResult<string> = Promise.resolve('200') let result: AsyncResult<string> = '200'
49
![Page 50: TypeScript - urfu-2018.github.io · Сегодня Вывод типов Структурная типизация Более сложные типы Обобщенные типы](https://reader034.vdocuments.site/reader034/viewer/2022042709/5f43c6a6a8444a2ed15be791/html5/thumbnails/50.jpg)
Обобщенные типы
type AsyncResult<string> = Promise<string> | string
let result: AsyncResult<string> = Promise.resolve('200') let result: AsyncResult<string> = '200'
50
![Page 51: TypeScript - urfu-2018.github.io · Сегодня Вывод типов Структурная типизация Более сложные типы Обобщенные типы](https://reader034.vdocuments.site/reader034/viewer/2022042709/5f43c6a6a8444a2ed15be791/html5/thumbnails/51.jpg)
Обобщенные классы
class Stack<TItem> implements IStack<TItem> { private state: TItem[]
constructor() { this.state = [] } push(item: TItem) { this.state.push(item) } pop(): TItem { return this.state.pop() }
51
![Page 52: TypeScript - urfu-2018.github.io · Сегодня Вывод типов Структурная типизация Более сложные типы Обобщенные типы](https://reader034.vdocuments.site/reader034/viewer/2022042709/5f43c6a6a8444a2ed15be791/html5/thumbnails/52.jpg)
Обобщенные классы
class Stack<TItem> implements IStack<TItem> { private state: TItem[] = []
push(item: TItem) { this.state.push(item) } pop(): TItem { return this.state.pop() } }
52
![Page 53: TypeScript - urfu-2018.github.io · Сегодня Вывод типов Структурная типизация Более сложные типы Обобщенные типы](https://reader034.vdocuments.site/reader034/viewer/2022042709/5f43c6a6a8444a2ed15be791/html5/thumbnails/53.jpg)
Обобщенные типы
interface ISwim { swim()
} class Dog implements ISwim { swim() { ... } } class Duck implements ISwim { swim() { ... } }
53
![Page 54: TypeScript - urfu-2018.github.io · Сегодня Вывод типов Структурная типизация Более сложные типы Обобщенные типы](https://reader034.vdocuments.site/reader034/viewer/2022042709/5f43c6a6a8444a2ed15be791/html5/thumbnails/54.jpg)
Ограничения на обобщенные типы
function swimTogether< T1 implements ISwim,
T2 implements ISwim >(firstPal: T1, secondPal: T2) { firstPal.swim() secondPal.swim() }
54
![Page 55: TypeScript - urfu-2018.github.io · Сегодня Вывод типов Структурная типизация Более сложные типы Обобщенные типы](https://reader034.vdocuments.site/reader034/viewer/2022042709/5f43c6a6a8444a2ed15be791/html5/thumbnails/55.jpg)
55
![Page 56: TypeScript - urfu-2018.github.io · Сегодня Вывод типов Структурная типизация Более сложные типы Обобщенные типы](https://reader034.vdocuments.site/reader034/viewer/2022042709/5f43c6a6a8444a2ed15be791/html5/thumbnails/56.jpg)
Обобщенные типы
type TypeName<T> = T extends string ? 'string' :
T extends number ? 'number' : T extends boolean ? 'boolean' : T extends undefined ? 'undefined' : T extends Function ? 'function' : 'object'
56
![Page 57: TypeScript - urfu-2018.github.io · Сегодня Вывод типов Структурная типизация Более сложные типы Обобщенные типы](https://reader034.vdocuments.site/reader034/viewer/2022042709/5f43c6a6a8444a2ed15be791/html5/thumbnails/57.jpg)
Обобщенные типы
type TypeName<string> = string extends string ? 'string' :
T extends number ? 'number' : T extends boolean ? 'boolean' : T extends undefined ? 'undefined' : T extends Function ? 'function' : 'object'
57
![Page 58: TypeScript - urfu-2018.github.io · Сегодня Вывод типов Структурная типизация Более сложные типы Обобщенные типы](https://reader034.vdocuments.site/reader034/viewer/2022042709/5f43c6a6a8444a2ed15be791/html5/thumbnails/58.jpg)
Обобщенные типы
type TypeName<number> = number extends string ? 'string' :
number extends number ? 'number' : T extends boolean ? 'boolean' : T extends undefined ? 'undefined' : T extends Function ? 'function' : 'object'
58
![Page 59: TypeScript - urfu-2018.github.io · Сегодня Вывод типов Структурная типизация Более сложные типы Обобщенные типы](https://reader034.vdocuments.site/reader034/viewer/2022042709/5f43c6a6a8444a2ed15be791/html5/thumbnails/59.jpg)
Наша функция
function get(obj: any, keyName: string): any { return obj[keyName]
}
59
![Page 60: TypeScript - urfu-2018.github.io · Сегодня Вывод типов Структурная типизация Более сложные типы Обобщенные типы](https://reader034.vdocuments.site/reader034/viewer/2022042709/5f43c6a6a8444a2ed15be791/html5/thumbnails/60.jpg)
Наша функция
function get<T>(obj: T, keyName: string): any { return obj[keyName]
}
60
![Page 61: TypeScript - urfu-2018.github.io · Сегодня Вывод типов Структурная типизация Более сложные типы Обобщенные типы](https://reader034.vdocuments.site/reader034/viewer/2022042709/5f43c6a6a8444a2ed15be791/html5/thumbnails/61.jpg)
Хотим знать список полей объекта и их типы на этапе компиляции
Решение: Lookup Types и keyof
61
![Page 62: TypeScript - urfu-2018.github.io · Сегодня Вывод типов Структурная типизация Более сложные типы Обобщенные типы](https://reader034.vdocuments.site/reader034/viewer/2022042709/5f43c6a6a8444a2ed15be791/html5/thumbnails/62.jpg)
Lookup типы
interface IUser { login: string
age: number gender: 'male' | 'female' } let login: IUser['login'] let login: string let loginOrAge: IUser['login' | 'age'] let loginOrAge: string | number
62
![Page 63: TypeScript - urfu-2018.github.io · Сегодня Вывод типов Структурная типизация Более сложные типы Обобщенные типы](https://reader034.vdocuments.site/reader034/viewer/2022042709/5f43c6a6a8444a2ed15be791/html5/thumbnails/63.jpg)
keyof
interface IUser { login: string
age: number gender: 'male' | 'female' } let key: keyof IUser let key: 'login' | 'age' | 'gender'
63
![Page 64: TypeScript - urfu-2018.github.io · Сегодня Вывод типов Структурная типизация Более сложные типы Обобщенные типы](https://reader034.vdocuments.site/reader034/viewer/2022042709/5f43c6a6a8444a2ed15be791/html5/thumbnails/64.jpg)
Наша простая функция
function get(obj, keyName) { return obj[keyName]
}
64
![Page 65: TypeScript - urfu-2018.github.io · Сегодня Вывод типов Структурная типизация Более сложные типы Обобщенные типы](https://reader034.vdocuments.site/reader034/viewer/2022042709/5f43c6a6a8444a2ed15be791/html5/thumbnails/65.jpg)
Наша простая функция
function get<T>(obj: T, keyName: keyof T): T[keyof T] { return obj[keyName]
}
65
![Page 66: TypeScript - urfu-2018.github.io · Сегодня Вывод типов Структурная типизация Более сложные типы Обобщенные типы](https://reader034.vdocuments.site/reader034/viewer/2022042709/5f43c6a6a8444a2ed15be791/html5/thumbnails/66.jpg)
Наша простая функция
function get<T>(obj: T, keyName: keyof T): T[keyof T] { return obj[keyName]
} let a: number = get({ a: 1 }, 'a')
66
![Page 67: TypeScript - urfu-2018.github.io · Сегодня Вывод типов Структурная типизация Более сложные типы Обобщенные типы](https://reader034.vdocuments.site/reader034/viewer/2022042709/5f43c6a6a8444a2ed15be791/html5/thumbnails/67.jpg)
Наша простая функция
function get<{ a: 1 }>(obj: T, keyName: keyof T): T[keyof T] { return obj[keyName]
} let a: number = get({ a: 1 }, 'a')
67
![Page 68: TypeScript - urfu-2018.github.io · Сегодня Вывод типов Структурная типизация Более сложные типы Обобщенные типы](https://reader034.vdocuments.site/reader034/viewer/2022042709/5f43c6a6a8444a2ed15be791/html5/thumbnails/68.jpg)
Наша простая функция
function get<{ a: 1 }>(obj: T, keyName: 'a'): T['a'] { return obj[keyName]
} let a: number = get({ a: 1 }, 'a')
68
![Page 69: TypeScript - urfu-2018.github.io · Сегодня Вывод типов Структурная типизация Более сложные типы Обобщенные типы](https://reader034.vdocuments.site/reader034/viewer/2022042709/5f43c6a6a8444a2ed15be791/html5/thumbnails/69.jpg)
Наша простая функция
function get<{ a: 1 }>(obj: T, keyName: 'a'): number { return obj[keyName]
} let a: number = get({ a: 1 }, 'a')
69
![Page 70: TypeScript - urfu-2018.github.io · Сегодня Вывод типов Структурная типизация Более сложные типы Обобщенные типы](https://reader034.vdocuments.site/reader034/viewer/2022042709/5f43c6a6a8444a2ed15be791/html5/thumbnails/70.jpg)
Наша простая функция
function get<T>(obj: T, keyName: keyof T): T[keyof T] { return obj[keyName]
} let a: number = get({ a: 1 }, 'a') // Argument of type '"c"' // is not assignable to parameter of type '"a" | "b"'. let c: undefined = get({ a: 1, b: 2 }, )
'c'~~~~~~~~~
70
![Page 71: TypeScript - urfu-2018.github.io · Сегодня Вывод типов Структурная типизация Более сложные типы Обобщенные типы](https://reader034.vdocuments.site/reader034/viewer/2022042709/5f43c6a6a8444a2ed15be791/html5/thumbnails/71.jpg)
Наша простая функция
function get<T, K extends keyof T>(obj: T, keyName: K): T[K] { return obj[keyName]
} let a: number = get({ a: 1 }, 'a') let c: undefined = get({ a: 1, b: 2 }, 'c')
71
![Page 72: TypeScript - urfu-2018.github.io · Сегодня Вывод типов Структурная типизация Более сложные типы Обобщенные типы](https://reader034.vdocuments.site/reader034/viewer/2022042709/5f43c6a6a8444a2ed15be791/html5/thumbnails/72.jpg)
Перерыв
72
![Page 73: TypeScript - urfu-2018.github.io · Сегодня Вывод типов Структурная типизация Более сложные типы Обобщенные типы](https://reader034.vdocuments.site/reader034/viewer/2022042709/5f43c6a6a8444a2ed15be791/html5/thumbnails/73.jpg)
А что там в es5?
interface IUser { login: string
age: number gender: 'male' | 'female' } const user = { login: 'dimastark', age: 21, gender: 'male' } const readonlyUser: ? = Object.freeze(user)
73
![Page 74: TypeScript - urfu-2018.github.io · Сегодня Вывод типов Структурная типизация Более сложные типы Обобщенные типы](https://reader034.vdocuments.site/reader034/viewer/2022042709/5f43c6a6a8444a2ed15be791/html5/thumbnails/74.jpg)
А что там в es5?
interface IFrozenUser { readonly login: string
readonly age: number readonly gender: 'male' | 'female' } const user = { login: 'dimastark', age: 21, gender: 'male' } const readonlyUser: IFrozenUser = Object.freeze(user)
Решение: Mapped Types
74
![Page 75: TypeScript - urfu-2018.github.io · Сегодня Вывод типов Структурная типизация Более сложные типы Обобщенные типы](https://reader034.vdocuments.site/reader034/viewer/2022042709/5f43c6a6a8444a2ed15be791/html5/thumbnails/75.jpg)
75
![Page 76: TypeScript - urfu-2018.github.io · Сегодня Вывод типов Структурная типизация Более сложные типы Обобщенные типы](https://reader034.vdocuments.site/reader034/viewer/2022042709/5f43c6a6a8444a2ed15be791/html5/thumbnails/76.jpg)
Mapped Types
interface IUser { login: string age: number
gender: 'male' | 'female' } type Readonly<T> = { readonly [P in 'login' | 'age' | 'gender']: T[P]; }; const user = { login: 'dimastark', age: 21, gender: 'male' } const readonlyUser: Readonly<IUser> = Object.freeze(user)
76
![Page 77: TypeScript - urfu-2018.github.io · Сегодня Вывод типов Структурная типизация Более сложные типы Обобщенные типы](https://reader034.vdocuments.site/reader034/viewer/2022042709/5f43c6a6a8444a2ed15be791/html5/thumbnails/77.jpg)
Mapped Types + keyof
interface IUser { login: string age: number
gender: 'male' | 'female' } type Readonly<T> = { readonly [P in keyof T]: T[P]; }; const user = { login: 'dimastark', age: 21, gender: 'male' } const readonlyUser: Readonly<IUser> = Object.freeze(user)
77
![Page 78: TypeScript - urfu-2018.github.io · Сегодня Вывод типов Структурная типизация Более сложные типы Обобщенные типы](https://reader034.vdocuments.site/reader034/viewer/2022042709/5f43c6a6a8444a2ed15be791/html5/thumbnails/78.jpg)
infer
type ValueOf<T> = T extends { [key: string]: infer U
} ? U : never; ValueOf<{ a: string, b: string }> // string ValueOf<{ a: string, b: number }> // string | number
78
![Page 79: TypeScript - urfu-2018.github.io · Сегодня Вывод типов Структурная типизация Более сложные типы Обобщенные типы](https://reader034.vdocuments.site/reader034/viewer/2022042709/5f43c6a6a8444a2ed15be791/html5/thumbnails/79.jpg)
Mapped Types
interface IUser { login: string birthDate: {
year: number month: number day: number } gender: 'male' | 'female' }
79
![Page 80: TypeScript - urfu-2018.github.io · Сегодня Вывод типов Структурная типизация Более сложные типы Обобщенные типы](https://reader034.vdocuments.site/reader034/viewer/2022042709/5f43c6a6a8444a2ed15be791/html5/thumbnails/80.jpg)
Mapped Types
type DeepReadonly<T> = { [P in keyof T]:
T[P] extends (infer U)[] ? DeepReadonly<U>[] : T[P] extends object ? DeepReadonly<T[P]> : readonly T[P]; };
80
![Page 81: TypeScript - urfu-2018.github.io · Сегодня Вывод типов Структурная типизация Более сложные типы Обобщенные типы](https://reader034.vdocuments.site/reader034/viewer/2022042709/5f43c6a6a8444a2ed15be791/html5/thumbnails/81.jpg)
Mapped Types
type DeepReadonly<T> = { [P in keyof T]:
T[P] extends (infer U)[] ? DeepReadonly<U>[] : T[P] extends object ? DeepReadonly<T[P]> : readonly T[P]; };
81
![Page 82: TypeScript - urfu-2018.github.io · Сегодня Вывод типов Структурная типизация Более сложные типы Обобщенные типы](https://reader034.vdocuments.site/reader034/viewer/2022042709/5f43c6a6a8444a2ed15be791/html5/thumbnails/82.jpg)
Mapped Types
type DeepReadonly<T> = { [P in keyof T]:
T[P] extends (infer U)[] ? DeepReadonly<U>[] : T[P] extends object ? DeepReadonly<T[P]> : readonly T[P]; };
82
![Page 83: TypeScript - urfu-2018.github.io · Сегодня Вывод типов Структурная типизация Более сложные типы Обобщенные типы](https://reader034.vdocuments.site/reader034/viewer/2022042709/5f43c6a6a8444a2ed15be791/html5/thumbnails/83.jpg)
Mapped Types
type DeepReadonly<T> = { [P in keyof T]:
T[P] extends (infer U)[] ? DeepReadonly<U>[] : T[P] extends object ? DeepReadonly<T[P]> : readonly T[P]; };
83
![Page 84: TypeScript - urfu-2018.github.io · Сегодня Вывод типов Структурная типизация Более сложные типы Обобщенные типы](https://reader034.vdocuments.site/reader034/viewer/2022042709/5f43c6a6a8444a2ed15be791/html5/thumbnails/84.jpg)
Mapped Types
type DeepReadonly<T> = { [P in keyof T]:
T[P] extends (infer U)[] ? DeepReadonly<U>[] : T[P] extends object ? DeepReadonly<T[P]> : readonly T[P]; };
84
![Page 85: TypeScript - urfu-2018.github.io · Сегодня Вывод типов Структурная типизация Более сложные типы Обобщенные типы](https://reader034.vdocuments.site/reader034/viewer/2022042709/5f43c6a6a8444a2ed15be791/html5/thumbnails/85.jpg)
Mapped Types
type DeepReadonly<T> = { [P in keyof T]:
T[P] extends (infer U)[] ? DeepReadonly<U>[] : T[P] extends object ? DeepReadonly<T[P]> : readonly T[P]; };
85
![Page 86: TypeScript - urfu-2018.github.io · Сегодня Вывод типов Структурная типизация Более сложные типы Обобщенные типы](https://reader034.vdocuments.site/reader034/viewer/2022042709/5f43c6a6a8444a2ed15be791/html5/thumbnails/86.jpg)
Mapped Types
type DeepReadonly<T> = { [P in keyof T]:
T[P] extends (infer U)[] ? DeepReadonly<U>[] : T[P] extends object ? DeepReadonly<T[P]> : readonly T[P]; };
86
![Page 87: TypeScript - urfu-2018.github.io · Сегодня Вывод типов Структурная типизация Более сложные типы Обобщенные типы](https://reader034.vdocuments.site/reader034/viewer/2022042709/5f43c6a6a8444a2ed15be791/html5/thumbnails/87.jpg)
Mapped Types
type DeepReadonly<T> = { [P in keyof T]:
T[P] extends (infer U)[] ? DeepReadonly<U>[] : T[P] extends object ? DeepReadonly<T[P]> : readonly T[P]; };
87
![Page 88: TypeScript - urfu-2018.github.io · Сегодня Вывод типов Структурная типизация Более сложные типы Обобщенные типы](https://reader034.vdocuments.site/reader034/viewer/2022042709/5f43c6a6a8444a2ed15be791/html5/thumbnails/88.jpg)
Mapped Types
type DeepReadonly<T> = { [P in keyof T]:
T[P] extends (infer U)[] ? DeepReadonly<U>[] : T[P] extends object ? DeepReadonly<T[P]> : readonly T[P]; };
88
![Page 89: TypeScript - urfu-2018.github.io · Сегодня Вывод типов Структурная типизация Более сложные типы Обобщенные типы](https://reader034.vdocuments.site/reader034/viewer/2022042709/5f43c6a6a8444a2ed15be791/html5/thumbnails/89.jpg)
Ссылочки
TypeScript Handbook. Advanced.
TypeScript Deep Dive
Андрей Старовойт — Эволюция TypeScript
TypeScript Playground
89
![Page 90: TypeScript - urfu-2018.github.io · Сегодня Вывод типов Структурная типизация Более сложные типы Обобщенные типы](https://reader034.vdocuments.site/reader034/viewer/2022042709/5f43c6a6a8444a2ed15be791/html5/thumbnails/90.jpg)
Вопросы?
90
![Page 91: TypeScript - urfu-2018.github.io · Сегодня Вывод типов Структурная типизация Более сложные типы Обобщенные типы](https://reader034.vdocuments.site/reader034/viewer/2022042709/5f43c6a6a8444a2ed15be791/html5/thumbnails/91.jpg)
Спасибо!
91