TS学习笔记（八）：高级类型

1
2
T & U
复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
interface IPerson {
name: string;
age: number;
}
interface IMan {
love: string;
age: number;
}
let mixin: <T, U>(age: T, love: U) => T = function<T, U>(age: T, love: U): T & U {
return Object.assign(age, love);
}
let me = mixin<IPerson, IMan>({name: 'funlee', age: 10}, { love: 'TS', age: 18});
console.log(me); // {name: "funlee", age: 18, love: 'TS}
复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
interface IPerson {
name: string;
age: number;
}
interface IMan {
love: string;
age: number;
}
let me: IPerson | IMan;
me = {
name: 'funlee',
age: 18,
love: 'TS'
}
console.log(me); // {name: "funlee", age: 18, love: "TS"}
console.log(me.name); // ERROR
console.log(me.age); // 18
console.log(me.love); // ERROR
复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
interface IPerson {
name: string;
age: number;
}
interface IMan {
love: string;
age: number;
}
let me: IPerson | IMan;
me = {
name: 'funlee',
age: 18,
love: 'TS'
}
console.log(me); // {name: "funlee", age: 18, love: "TS"}
if((me as IPerson).name) {
console.log((me as IPerson).name); // funlee
}
if((me as IMan).love) {
console.log((me as IMan).love); // TS
}
复制代码

1
2
3
4
function isIinterface(obj: IPerson | IMan): obj is IPerson {
return (obj as IPerson).name !== undefined;
}
复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
interface IPerson {
name: string;
age: number;
}
interface IMan {
love: string;
age: number;
}
let me: IPerson | IMan;
me = {
name: 'funlee',
age: 18,
love: 'TS'
}
function isIPerson(obj: IPerson | IMan): obj is IPerson {
return (obj as IPerson).name !== undefined;
}
function isIMan(obj: IPerson | IMan): obj is IMan {
return (obj as IMan).love !== undefined;
}
console.log(me); // {name: "funlee", age: 18, love: "TS"}
if(isIPerson(me)) {
console.log(me.name); // funlee
}
if(isIMan(me)) {
console.log(me.love); // TS
}
复制代码

1
2
3
4
5
6
7
8
function show(param: number | string) {
if (typeof param === 'number') {
console.log(`${param} is number`)
} else {
console.log(`${param} is string`)
}
}
复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
class Person {
name: string = 'funlee';
age: number = 18;
}
class Man {
age: number = 12;
love: string = 'TS';
}
let me: Person | Man;
me = Math.random() < 0.5 ? new Person() : new Man();
if(me instanceof Person) {
console.log(me.name);
}
if(me instanceof Man) {
console.log(me.love);
}
复制代码

1
2
3
4
5
6
7
8
9
let x1: number = null
let x2: string = null
let x3: boolean = null
let x4: undefined = null
let y1: number = undefined
let y2: string = undefined
let y3: boolean = undefined
let y4: null = undefined
复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
// 开启`--strictNullChecks`后
// Type 'null' is not assignable to type 'number'.
let x1: number = null
// Type 'null' is not assignable to type 'string'.
let x2: string = null
// Type 'null' is not assignable to type 'boolean'.
let x3: boolean = null
// Type 'null' is not assignable to type 'undefined'.
let x4: undefined = null
// Type 'undefined' is not assignable to type 'number'.
let y1: number = undefined
// Type 'undefined' is not assignable to type 'string'.
let y2: string = undefined
// Type 'undefined' is not assignable to type 'boolean'.
let y3: boolean = undefined
// Type 'undefined' is not assignable to type 'null'.
let y4: null = undefined
复制代码

1
2
3
4
5
6
et x = 123
x = null // 报错
let y: number | null = 123
y = null // 允许
y = undefined // 报错，`undefined`不能赋值给`number | null`
复制代码

1
2
3
4
5
6
7
8
function foo(x: number, y?: number) {
return x + (y || 0)
}
foo(1, 2) // 允许
foo(1) // 允许
foo(1, undefined) // 允许
foo(1, null) // 报错，不允许将null赋值给`number | undefined`类型
复制代码

1
2
type 新名字 = 已有类型
复制代码

1
2
3
4
5
6
7
type Container<T> = {
value: T
}
let name: Container<string> = {
value: 'funlee'
}
复制代码

1
2
type Alias = Array<Alias> // 报错，别名Alias循环引用了自身
复制代码

1
2
3
4
type Easing = 'ease-in' | 'ease-out' | 'ease-in-out'
let x1: Easing = 'uneasy' // 报错: Type '"uneasy"' is not assignable to type 'Easing'
let x2: Easing = 'ease-in' // 允许
复制代码

1
2
3
4
5
6
7
function createElement(tagName: 'img'): HTMLImageElement
function createElement(tagName: 'input'): HTMLInputElement
// ... 其他重载函数
function createElement(tagName: string): Element {
// ...
}
复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
interface Square {
kind: 'square'
size: number
}
interface Rectangle {
kind: 'rectangle'
width: number
height: number
}
interface Circle {
kind: 'circle'
radius: number
}
复制代码

1
2
type Shape = Square | Rectangle | Circle;
复制代码

1
2
3
4
5
6
7
8
9
10
11
function area(s: Shape) {
switch (s.kind) {
case 'square':
return s.size * s.size
case 'rectangle':
return s.height * s.width
case 'circle':
return Math.PI * s.radius ** 2
}
}
复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
class BasicCalculator {
public constructor(protected value: number = 0) {
}
public currentValue(): number {
return this.value
}
public add(operand: number): this {
this.value += operand
return this
}
public multiply(operand: number): this {
this.value *= operand
return this
}
}
let v = new BasicCalculator(2).multiply(5).add(1).currentValue() // 11
复制代码

1
2
3
4
5
6
7
8
9
10
11
class ScientificCalculator extends BasicCalculator {
public cconstructor(value = 0) {
super(value)
}
public sin() {
this.value = Math.sin(this.value)
return this
}
}
let v = new BasicCalculator(2).multiply(5).sin().add(1).currentValue();
复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
function pluck<T, K extends keyof T>(o: T, names: K[]): T[K][] {
return names.map(n => o[n])
}
interface Person {
name: string
age: number
}
let p: Person = {
name: 'funlee',
age: 21
}
let res = pluck(p, ['name']) // 允许
复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
function getProperty<T, K extends keyof T>(obj: T, key: K): T[K] {
return obj[key]
}
let obj = {
name: 'funlee',
age: 21,
male: true
}
let x1 = getProperty(obj, 'name') // 允许，x1的类型为string
let x2 = getProperty(obj, 'age') // 允许，x2的类型为number
let x3 = getProperty(obj, 'male') // 允许，x3的类型为boolean
let x4 = getProperty(obj, 'hobby') // 报错：Argument of type '"hobby"' is not assignable to parameter of type '"name" | "age" | "male"'.
复制代码

1
2
3
4
5
6
interface Demo<T> {
[key: string]: T
}
let keys: keyof Demo<boolean> // keys的类型为string
let value: Demo<number>['foo'] // value的类型为number
复制代码

1
2
3
4
5
interface IPerson {
name: string
age: number
}
复制代码

1
2
3
4
5
interface PersonPartial {
name?: string
age?: number
}
复制代码

1
2
3
4
5
interface IPersonReadonly {
readonly name: string
readonly age: number
}
复制代码

1
2
3
4
5
6
7
8
9
type Readonly<T> = {
readonly [P in keyof T]: T[P]
}
type Partial<T> = {
[P in keyof T]?: T[P]
}
type PersonReadonly = Readonly<Person>
type PersonPartial = Partial<Person>
复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
// 可为空类型
type Nullable<T> {
[P in keyof T]: T[P] | null
}
// 包装一个类型的属性
type Proxy<T> = {
get(): T
set(value: T): void
}
type Proxify<T> = {
[P in keyof T]: Proxy<T[P]>
}
function proxify(o: T): Proxify<T> {
// ...
}
let proxyProps = proxify(props)
复制代码

1
2
3
4
5
6
7
8
9
function unproxify<T>(t: Proxify<T>): T {
let result = <T>{}
for (const k in t) {
result[k] = t[k].get()
}
return result
}
let originalProps = unproxify(proxyProps);
复制代码