TypeScript细化知识点
wyx 2/7/2023 ts
# 第三章 细化知识点
# 1、Object、object、{}
Object
Object跟原型链有关系、原型链的顶端是Object或者function,也就是说所有的基本类型以及对象类型最终都指向这个Object
在typescript中Object可以表示所有类型(类似于any了)
object
常用于泛型约束
支持引用类型({},[],() => {}),不支持原始类型(基础类型)
{}
{} = new Object
支持所有类型
无法对变量进行任何赋值的操作
# 2、接口和对象类型
interface
- 对重名对象进行重合
interface wyx {
name: string,
age: number
}
interface wyx {
sex: string
}
let b: wyx = {
name: 'eyx',
age: 24,
sex: 'man'
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
2
3
4
5
6
7
8
9
10
11
12
13
14
- 任意key
// 用索引签名定义其他热门一类型的属性
interface anyKey {
name: string,
age: number,
[propName:string]: any
}
let c: anyKey = {
name: 'eyx',
age: 24,
a: 1,
n: 'str'
}
1
2
3
4
5
6
7
8
9
10
11
12
13
2
3
4
5
6
7
8
9
10
11
12
13
- 可选值,可存在可不存在 ?,只读属性:readonly
interface _wyx {
readonly name: string, // 只读不可修改赋值
age?: number
}
let d: _wyx = {
name: 'eyx',
}
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
- 接口继承
interface Father {
a: string
}
interface Children extends Father {
b: string,
c: number
}
let f: Children = {
a: 'a',
b: 'b',
c: 22
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
2
3
4
5
6
7
8
9
10
11
12
13
14
- 定义函数类型
interface Fn {
(a: string): number[]
}
const fn: Fn = function(a: string) {
return [parseInt(a)]
}
1
2
3
4
5
6
7
2
3
4
5
6
7
# 3、数组类型
// 定义数组普通类型
let arr:boolean[] = [true, false];
let arr:Array<number> = [1, 2];
// 用interface/type定义对象数组
interface ObjArr {
a: string,
b?: number
}
let arr:ObjArr[] = [{a: 'a', b: 21},{a: 'b'}];
// 二维数组,使用套娃的方式定义
let arr:number[][] = [[1],[2]];
let arr:Array<Array<number>> = [[1],[2]];
// 多种类型数组
let arr:any[] = ['str', 1, true];
// 元组
let arr:any[string, number, boolean. {}] = ['str', 1, true, {}];
// 在函数剩余参数中使用
function a(...args:any[]) {
console.log(arguments); // 类/伪数组
let b: IArguments = arguments; // 定义伪数组
}
// IArguments内部实现
interface I {
callee: Function,
length: number,
[index: number]: any
}
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
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
# 4、函数类型
const fn = function(a:string, b?:string):string {
return a + b;
}
fn('wyx'); // wyxundefined 不传显示undefined
1
2
3
4
2
3
4
# 函数重载
函数重载:方法名相同,参数不同,与返回值无关
重载是方法名字相同,参数不同,返回类型可以相同也可以不相同
如果参数类型不同,则操作函数参数类型应设置为any
参数数量不同你可以将不同的参数设置为可选
// 函数重载
function fn1(params: number): void;
function fn1(params: string, params2: number): void;
function fn1(params: any, params2?: any): void {
console.log(params);
console.log(params2);
}
fn1('1', 2)
fn1(4)
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
# 5、联合类型 | 或
|:同时支持多种类型 string | number
// 01转Boolean
let fn = function (type: number | boolean | string): boolean {
return !!type
}
1
2
3
4
2
3
4
# 6、交叉类型 & 且
&:多种类型的集合
interface People {
age: number,
height: number
}
interface Man{
sex: string
}
const xiaoman = (man: People & Man) => {
console.log(man.age)
console.log(man.height)
console.log(man.sex)
}
xiaoman({age: 18,height: 180,sex: 'male'});
1
2
3
4
5
6
7
8
9
10
11
12
13
2
3
4
5
6
7
8
9
10
11
12
13