TS基础

TS

类型（interface）

声明
1
2
3
4
5
6
7
let a: string //变量a只能存储字符串
let b: number //变量a只能存储数值
let c: boolean //变量a只能存储布尔值
// 参数x必须是数字，参数y也必须是数字，函数返回值也必须是数字
function demo(x:number,y:number):number{
 return x + y
}
总览
1
2
3
4
5
string 、 number 、 boolean 、 null 、 undefined 、 bigint 、 symbol 、 object(Array 、Function 、Date ......)
(新)
void 、 never 、 unknown 、 any 、 enum 、 tuple
(自定义)
type 、 interface

常用类型

字面量
1
值只能是字⾯量值 （值本身）
any
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
//显式的any
let a: any
a = 100
a = '你好'
a = false

//隐式的any
let b
b = 100
b = '你好'
b = false

let a
let x: string
x = a // ⽆警告
unknown
1
2
3
4
5
6
7
8
//适⽤于：开始不知道数据的具体类型，后期才能确定数据的类型
let a: unknown
a = 100
a = false
a = '你好'

let x: string
x = a // 警告：不能将“unknown”分配给“string
never
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
let a: never
// 警告
a = 1
a = true
a = undefined
a = null

//ts可主动推断
if(typeof a === 'string'){
 a.toUpperCase()
}else{
 console.log(a) // 推断出此处为never
}

//适⽤于：限制函数的返回值
// 限制demo函数不需要有任何返回值，任何值都不⾏，像undeifned、null都不⾏
function demo():never{
 throw new Error('程序异常退出')
}
void
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
//适⽤于：限制函数的返回值
let a:void = undefined
// ⽆警告
function demo1():void{
    
}
// ⽆警告
function demo2():void{
 return
}
// ⽆警告
function demo3():void{
 return undefined
}
// 有警告：不能将类型“number”分配给类型“void”
function demo4():void{
 return 666
}
object（不常用）
1
2
3
4
5
6
7
8
9
10
11
12
13
14
let a:object //a的值可以是任何【⾮原始值类型】，包括：对象、函数、数组等

// 【⾮原始类型】⽆警告
a = {}
a = {name:'张三'}
a = [1,3,5,7,9]
a = function(){}

// 【原始类型】有警告
a = null // 警告：不能将类型“null”分配给类型“object”
a = undefined // 警告：不能将类型“undefined”分配给类型“object”
a = 1 // 警告：不能将类型“number”分配给类型“object”
a = true // 警告：不能将类型“boolean”分配给类型“object”
a = '你好' // 警告：不能将类型“string”分配给类型“object
限制类型写法

对象

1
2
3
4
5
6
7
8
9
10
11
let person: { name: string, age?: number} //问号代表可选属性
let car: { price: number; color: string; [k:string]:any}
let student: {
 id: string
 grade:number
}

person = {name:'张三',age:18}
person = {name:'李四'}
car = {price:100,color:'红⾊'}
student = {id:'tetqw76te01',grade:3}

函数

1
2
3
4
let demo: (a: number, b: number) => number
demo = function(x,y) {
 return x+y
}

数组

1
2
3
4
let arr1: string[] // 该⾏代码等价于： let arr1: Array<string>
let arr2: number[] // 该⾏代码等价于： let arr2: Array<number>
arr1 = ['a','b','c']
arr2 = [1,3,5,7,9]
tuple
1
2
3
4
5
//长短固定的数组
let t: [string,number]
t = ['hello',123]
// 警告，不能将类型“[string, number, boolean]”分配给类型“[string, number]”
t = ['hello',123,false]
enum
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
29
//枚举
// 定义⼀个枚举
enum Color {
 Red,
 Blue,
 Black,
 Gold
}
// 定义⼀个枚举，并指定其初识数值
enum Color2 {
 Red = 6,
 Blue,
 Black,
 Gold
}
console.log(Color)
/*
 {
     0: 'Red', 1: 'Blue', 2: 'Black', 3: 'Gold',
     Red: 0, Blue: 1, Black: 2, Gold: 3
 }
*/
console.log(Color2)
/*
 {
     6: 'Red',  7: 'Blue', 8: 'Black', 9: 'Gold',
     Red: 6, Blue: 7, Black: 8, Gold: 9
 }
*/

实例

1
2
3
4
5
6
7
8
9
// 定义⼀个phone变量，并设置对⻬进⾏限制
let phone: {name:string,price:number,color:Color}

phone = {name:'华为Mate60',price:6500,color:Color.Red}
phone = {name:'iPhone15Pro',price:7999,color:Color.Blue}

if(phone.color === Color.Red){
 console.log('⼿机是红⾊的')
}

自定义类

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
// 性别的枚举
enum Gender {
 Male,
 Female
}

// ⾃定义⼀个年级类型（⾼⼀、⾼⼆、⾼三）
type Grade = 1 | 2 | 3

// ⾃定义⼀个学⽣类型
type Student = {
 name:string,
 age:number,
 gender:Gender,
 grade:Grade
}

// 定义两个学⽣变量：s1、s2
let s1:Student
let s2:Student

s1 = {name:'张三',age:18,gender:Gender.Male,grade:1}
s2 = {name:'李四',age:18,gender:Gender.Female,grade:2}

抽象类

常规类

1
2
3
4
5
6
7
8
9
10
11
class Person {
 name: string
 age: number
 constructor(name:string,age:number){//构造函数
     this.name = name
     this.age = age
 }
}

const p1 = new Person('张三',18)
const p2 = new Person('李四',19)

继承

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
class Person { }

// Teacher类继承Person
class Teacher extends Person { }

// Student类继承Person
class Student extends Person { }

// Person实例
const p1 = new Person('周杰伦',38)
// Student实例
const s1 = new Student('张同学',18)
const s2 = new Student('李同学',20)
// Teacher实例
const t1 = new Teacher('刘⽼师',40)
const t2 = new Teacher('孙⽼师',50)

抽象类

1
abstract class Person { }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
// Person（抽象类）
abstract class Person { }

// Teacher类继承Person
class Teacher extends Person {
 // 构造器
 constructor(name: string,age: number){
    super(name,age)
 }
 // ⽅法
 speak(){
    console.log('你好！我是⽼师:',this.name)
 }
}

// Student类继承Person
class Student extends Person { }
// Person实例
// const p1 = new Person('周杰伦',38) // 抽象类，不可以new Person

接口

1
//限制⼀个类中包含哪些属性和⽅法
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
// Person接⼝
interface Person {
 // 属性声明
 name: string
 age: number
 // ⽅法声明
 speak():void
}
 
// Teacher实现Person接⼝
class Teacher implements Person {
 name: string
 age: number
 // 构造器
 constructor(name: string,age: number){
     this.name = name
     this.age = age
 }
 // ⽅法
 speak(){
    console.log('你好！我是⽼师:',this.name)
 }
}

举例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
// 接⼝ —— Person，只能包含抽象⽅法
interface Person {
 // 属性，不写具体值
 name:string
 age:number
 // ⽅法，不写具体实现
 speak():void
}
// 创建Teacher类实现Person接⼝
class Teacher implements Person {
 name:string
 age:number
 constructor(name:string,age:number){
     this.name = name
     this.age = age
 }
 speak(){
    console.log('我在⻜快的⾏⾛中......')
 }
}

image-20250127173649162

泛型

1
2
3
4
5
6
7
8
9
function test<T>(arg: T): T{
    return arg;
}

// 不指名类型，TS会⾃动推断出来
test(10)

// 指名具体的类型
test<number>(10)
1
2
3
4
5
function test<T, K>(a: T, b: K): K{
 return b;
}
// 为多个泛型指定具体⾃值
test<number, string>(10, "hello");

类

1
2
3
4
5
6
class MyClass<T>{
 prop: T;
 constructor(prop: T){
 this.prop = prop;
 }
}

泛型约束

1
2
3
4
5
6
7
8
9
10
11
interface Demo{
 length: number;
}
// 泛型T必须是MyInter的⼦类，即：必须拥有length属性
function test<T extends Demo>(arg: T): number{
 return arg.length;
}
test(10) // 类型“number”的参数不能赋给类型“Demo”的参数
test({name:'张三'}) // 类型“{ name: string; }”的参数不能赋给类型“Demo”的参数
test('123')
test({name:'张三',length:10})