【前端基础知识】TS 类型、接口interface、泛型、Type

类型的定义

//简单类型
var num: number = 1;
var str: string = 'str';
var bool: boolean = true;
var every: any;//定义为任意类型

//复杂类型--数组
var arrStr: string[] = ['1', '2', '3'];
var arrNum: number[] = [1, 2, 3];
var arrBool: boolean[] = [true, false];
var arrEvery: any[];//定义为任意类型的数组

//联合类型
var data: string | number = 21;
var dataArr: (string | number)[] = [1, 2, '2'];

//函数类型 输入类型 输出类型
function f1(x: number, y: number): number {
    return x + y
}
f1(1, 2)

function f2(x: number, y: number): boolean {
    return x === y
}
f2(1, 2)
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

---

Interface

//Object类型 定义接口interface
interface Person {
    name: string;
    age: number;
    sex?: string;//可选属性
    [propName: string]: any;//任意属性
}
var obj: Person = {
    name: 'Dai',
    age: 12,
    sex: '男'
}
1
2
3
4
5
6
7
8
9
10
11
12

---

泛型

泛型约束

function f4<T>(x: T): number {
    return x.length
}
f4<string>('3')
1
2
3
4

如果不对泛型进行约束，就会进行报错

interface NumLength {
    length: number
}
function f4<T extends NumLength>(x: T): number {
    return x.length
}
f4<string>('3')
1
2
3
4
5
6
7

泛型接口

interface InspectFn {
    <T>(x: T, y: T): T[]
}
let fn6: InspectFn = function f(x, y) {
    return [x, y]
}
fn6<number>(10, 5)
1
2
3
4
5
6
7

---

Type

interface extends Type

type User = {
    name: string;
    sex?: string;//可选
    [propName: string]: any;
}
interface People extends User {
    age: number
}
let stu: People = {
    age: 12,
    name: '12',
    no: 213
}
1
2
3
4
5
6
7
8
9
10
11
12
13

类型交叉

type 与 type 交叉

type Name = { name: string }
type Age = { age: number }

type Student = Name & Age

let student: Student = {
    name: 'Dai',
    age: 12
}
//如果student 中 name 和 age 少一个就会报错
1
2
3
4
5
6
7
8
9
10

type 与 interface 交叉

type Name = { name: string }
interface Age { age: number }

type Student = Name & Age

let student: Student = {
    name: 'Dai',
    age: 12
}
//如果student 中 name 和 age 少一个就会报错
1
2
3
4
5
6
7
8
9
10