TypeScript速通
- Typescript简介
- 为什么需要TypeScript
- JavaScript今非昔比
- JavaScript中的困扰
- 1. 不清不楚的数据类型
- 2. 有漏洞的逻辑
- 3. 访问不存在的属性
- 4. 低级的拼写错误
- TypeScript静态类型检查
- 编译 TypeScript
- 1. 命令行编译
- 2. 自动化编译
- 类型声明
- 类型推断
- 类型总览
- JavaScript中的数据类型
- TypeScript中的数据类型
- 常用类型与语法
- 1. any
- 2. unknow
- 3. never
- 4. void
- 5. object
- 小写`object`
- 大写`Object`
- 声明对象类型
- 声明函数类型
- 声明数组类型
- 6. tuple
- 7. enum
- 数字枚举
- 字符串枚举
- 常量枚举
- 8. type
- 基本用法
- 联合类型
- 交叉类型
- 一个特殊情况
- 9. 接口
- 类
- TypeScript中的类
- 类的继承
- 属性修饰符
- 四种属性修饰符
- 属性的简写形式
- public 修饰符
- protected 修饰符
- private 修饰符
- readonly 修饰符
- 抽象类
- 接口 interface
- 定义类结构
- 定义对象结构
- 定义函数结构
- 接口之间的继承
- 接口自动合并
- 何时使用接口
- 一些相似的概念
- 1. interface和type
- 2. interface和抽象类
- 泛型
- 泛型函数
- 泛型接口
- 泛型约束
- 泛型类
- 类型声明文件
- TypeScript装饰器
- 装饰器简介
- 类装饰器
- 1. 基本语法
- 2. 应用举例
- 3. 关于返回值
- 4. 关于构造类型
- 5. 替换被装饰的类
- 装饰器工厂
- 1. 什么是装饰器工厂
- 2. 装饰器组合及其执行顺序
- 属性装饰器
- 1.基本语法
- 2. 关于属性遮蔽
- 3. 应用举例
- 方法装饰器
- 1. 基本语法
- 2. 应用举例
- 访问器装饰器
- 1. 基本语法
- 2. 应用举例
- 3. 访问器装饰器和方法装饰器的区别
- 参数装饰器
- 1. 基本语法
- 2. 应用举例
- 参数装饰器
- 1. 基本语法
- 2. 应用举例
Typescript简介
TypeScript是由微软开发的,基于JavaScript的一个拓展语言
- TypeScript包含了Javascript的所有内容,即TypeScript是JavaScript的超集
- TypeScript增加了静态类型检查、接口、泛型等多种现代开发特性,更适合大型项目的开发
- TypeScript需要编译为JavaScript,如何交给浏览器或其他JavaScript运行环境执行
为什么需要TypeScript
JavaScript今非昔比
- JavaScript当年诞生时的定位时浏览器脚本语言,用于在网页中嵌入一些简单的逻辑,而且代码量很少
- 随着时间的推移,JavaScript变得越来越流行,如今的JavaScript已经可以全栈编程了
- 现如今的JavaScript应用场景比当年丰富的多,代码量也比当年大很多,随便一个JavaScript项目代码量可以轻松到达几万行甚至几十万行
- 然而JavaScript当年出生简陋,没有考虑到如今的应用场景和代码量,逐渐出现了很多困扰
JavaScript中的困扰
1. 不清不楚的数据类型
let welcome = 'hello'
welcome() // 错误的数据类型
2. 有漏洞的逻辑
const str = Date.now() % 2 ? '奇数' : '偶数'if (str !== '奇数') {alert('hello')
} else if (str === '偶数') {alert('world') // 不可能到达此行
}
3. 访问不存在的属性
const obj = { width: 10, height: 15 }
const area = obj.width * obj.heightTow // 调用了不存在的属性
4. 低级的拼写错误
const message = 'hello world'
message.toUperCase() // 少了个p
TypeScript静态类型检查
在代码运行前进行检查,发现代码的错误和不合理之处,运行时异常的出现几率,此种检查叫静态类型检查,TypeScript的核心就是静态类型检查,简言之就是把运行时的错误前置。同样的功能,TypeScript的代码量要大于JavaScript,但是由于TypeScript的代码结构更加清晰,在后期代码的维护中TypeScript远胜于JavaScript
编译 TypeScript
浏览器不能直接运行TypeScript,需要编译为JavaScript再交由浏览器解析器执行。
1. 命令行编译
命令行编译可以不写.ts
,编译好后生成同名的.js
文件这个方法效率低下,一般不使用
tsc index.ts
2. 自动化编译
init
后会生成tsconfig.json
文件,在这里可以设置编译JavaScript的版本、严格模式等,同时建议打开配置文件中的noEmitOnError
,避免后续出现错误的代码也被编译为.js
文件。
watch
不写监视的文件就是监视全部ts文件的变化,监测到.ts
文件变化自动编译为.js
tsc --init
tsc --watch index.ts # 或tsc -w
类型声明
TypeScript使⽤:
来对变量或函数形参,进⾏类型声明:
typescript">let a: string // 变量a只能存储字符串类型,不能是包装类,TS官方推荐写法
let b: number // 变量b只能存储数值类型
let c: boolean // 变量c只能存储布尔值a = 'hello'
b = -10
c = true// 参数x必须是数字类型,参数y也必须是数字类型,函数返回值也必须是数字类型
// 参数只能是2个,不能是1个或者3个
function count(x: number, y: number): number {return x + y
}let result = count(10, 20)
console.log(result)
在:
后也可以写字⾯量类型,不过实际开发中⽤的不多
typescript">let x: '你好' //a的值只能为字符串"你好",不能为其他
let y: 100 //b的值只能为数字100,不能为其他
注意:
大写的String
、Number
、Boolean
表示的是new出来的包装对象,变量x
可以是包装对象或基本类型,但不推荐这么写,内存不友好
typescript">let x: String // 非推荐写法
let y: Number // 非推荐写法
let z: Boolean // 非推荐写法
类型推断
如果不写: 数据类型
进行类型声明,TypeScript也会根据我们书写的情况进行推断,并规范数据类型,但面对复杂的数据类型可能会推断出错,因此建议全部进行类型声明
typescript">let d = -1 //TypeScript会推断出变量d的类型是数字
d = false // 这里就出错了
类型总览
JavaScript中的数据类型
- number
- string
- boolean
- undefined
- null
- bigint
- symbol
- object
TypeScript中的数据类型
- JavaScript中的8个数据类型
- 6个新类型
- any
- unknow
- never
- void
- tuple
- enum
- 2个用于自定义类型的方式
- type
- interface
常用类型与语法
1. any
any
表示可以是任意类型,⼀旦将变量类型限制为any
,那就意味着放弃了对该变量的类型检查。
typescript">// 【显式的any】明确的表示a的类型是any
let a: any
// 以下对a的赋值,均⽆警告
a = 100
a = '你好'
a = false// 【隐式的any】没有明确的表示b的类型是any,但TS主动推断出来b是any
let b
//以下对b的赋值,均⽆警告
b = 100
b = '你好'
b = false
坑:any
类型的变量,可以赋值给任意类型的变量,且不会产生警告,这会破坏掉原来的类型检查
typescript">let c:any
c = 9
let x: string
x = c // ⽆警告
x = 9 // 警告
2. unknow
unknown
表示未知类型
- 其可以理解为一个类型安全的
any
,适用于不确定的数据类型
typescript">// 设置a的类型为unknown
let a: unknown
//以下对a的赋值,均符合规范
a = 99
a = false
a = '你好'// 设置x的数据类型为string,和any的区别在这里,类型安全
let x: string
x = a // 警告:不能将类型“unknown”分配给类型“string”
unknown
会强制开发者在使⽤之前进⾏类型检查,从而提供更强的类型安全性。
typescript">// 设置a的类型为unknown
let a: unknown
a = 'hello'
//第⼀种⽅式:加类型判断
if(typeof a === 'string'){x = aconsole.log(x)
}
//第⼆种⽅式:加断⾔
x = a as string
//第三种⽅式:加断⾔
x = <string>a
- 读取
any
类型数据的任何属性都不会报错,unknown
正好与之相反。
typescript">let str1: string
str1 = 'hello'
str1.toUpperCase() //⽆警告let str2: any
str2 = 'hello'
str2.toUpperCase() //⽆警告let str3: unknown
str3 = 'hello'
str3.toUpperCase()//警告:“str3”的类型为“未知”(str3 as string).toUpperCase() // 使⽤断⾔强制指定str3的类型为string,⽆警告
3. never
never
的含义是:任何值都不是,即:不能有值,例如undefined
、null
、''
、0
都不行
- 几乎不用never去直接限制变量,因为没有意义,例如:
typescript">// 指定a的类型为never, 那就意味着a以后不能存任何的数据了
let a: never
// 以下对a的所有赋值都会有警告
a = 1
a = true
a = undefined
a = null
- never一般是TypeScript主动推断出来的,例如: 把鼠标放在
a
上提示a
为never
typescript">// 指定a的类型为string
let a: string
// 给a设置⼀个值
a = 'hello'
if (typeof a === 'string') {console.log(a.toUpperCase())
} else {console.log(a) // TypeScript会推断出此处的a是never,因为没有任何⼀个值符合此处的逻辑
}
never
也可⽤于限制函数的返回值,返回never
的函数不能具有可访问的终结点,即不可能正常结束
typescript">// 限制throwError函数不需要有任何返回值,任何值都不⾏,像undeifned、null都不⾏
function throwError(str: string): never {throw new Error('程序异常退出:' + str)
}
4. void
void
即空,通常用于函数返回值,函数不反悔任何值,调用者也不依赖其返回值进行任何操作
void
通常用于函数返回值声明
typescript">function logMessage(msg:string):void{console.log(msg)
}
logMessage('hello world')
因为没有编写return
指定函数返回值,所以logMessage
函数是没有显式返回值的,但会有⼀个隐式返回值undefined
,虽然函数返回类型为void
,但也是可以接受undefined
的,即:undefined
是void
可以接受的⼀种“空”。因此以下写法均规范:
typescript">// 不写return⽆警告
function logMessage(msg:string):void{console.log(msg)
}
// 只写return⽆警告
function logMessage(msg:string):void{console.log(msg)return;
}
// return undefined⽆警告
function logMessage(msg:string):void{console.log(msg)return undefined
}
- 限制函数返回值时
void
和undefined
的区别:调用者也不依赖其返回值进行任何操作
typescript">function logMessage(msg:string):void{console.log(msg)
}
let result = logMessage('hello world')
if(result){ // 此⾏报错:⽆法测试 "void" 类型的表达式的真实性console.log('logMessage有返回值')
}
typescript">function logMessage(msg:string):undefined{console.log(msg)
}
let result = logMessage('hello world')
if(result){ // 此⾏⽆警告console.log('logMessage有返回值')
}
也就是说即使我们知道void
返回的时undefined
我们也不应该关心函数返回值的问题,不应该依赖返回值进行任何操作
5. object
object
与Object
在实际开发中使用相对较少,因为范围太大了
小写object
表示所有非原始类型,可存储对象、函数、数组等
typescript">let a: object
// 以下代码,是将⾮原始类型赋给a,所以均符合要求
a = {}
a = { name: '张三' }
a = [1, 3, 5, 7, 9]
a = function () {}
a = new String('123')
class Person {}
a = new Person()// 以下代码,是将原始类型赋给a,有警告
a = 1
a = true
a = 'hello world'
a = null
a = undefined
大写Object
所有可以调用大Object
方法的类型,即除了undefined
和null
以外的任何值,只要沿着原原型链能找到Object
上的方法即可,包括几个基本类型。
typescript">//b的值必须是Object的实例对象(除去undefined和null的任何值)
let b:Object
// Object的实例对象,无警告
b = {}
b = {name:'张三'}
b = [1,3,5,7,9]
b = function(){}
b = new String('123')
class Person {}
b = new Person()// 本身不是Object的实例对象,但其包装对象是Object的实例,无警告
b = 1
b = true
b = 'hello world'// 以下代码均有警告
b = null
b = undefined
可以看出,大写Object
比小写object
范围更加广泛,因此范围太大了,实际开发中使用频率极低
声明对象类型
- 实际开发中,限制一般对象,通常使用以下形式
typescript">// 限制person1对象必须有name属性,age为可选属性
let person1: { name: string; age?: number }
// 含义同上,也能⽤分号做分隔
let person2: { name: string; age?: number }
// 含义同上,也能⽤换⾏做分隔
let person3: {name: stringage?: number
}
// 如下赋值均可以
person1 = { name: '李四', age: 18 }
person2 = { name: '张三' }
person3 = { name: '王五' }
// 如下赋值不合法,因为person3的类型限制中,没有对gender属性的说明
person3 = { name: '王五', gender: '男' }
- 索引签名:允许定义对象可以具有任意数量的属性,这些属性的键值类型可变,常⽤于描述类型不确定的属性(具有动态属性的对象)
typescript">// 限制person对象必须有name属性,可选age属性但值必须是数字,同时可以有任意数量、任意类型的其他属性
let person: {name: stringage?: number[key: string]: any // 索引签名,完全可以不⽤key这个单词,换成其他的也可以,只需要保证key为字符串,值为任何值
}
// 赋值合法
person = {name: '张三',age: 18,gender: '男',city: '深圳'
}
声明函数类型
typescript">let count: (a: number, b: number) => number // 限制count有两个数字类型的参数,返回值也是数字类型的,这里=>是分隔符
// 这里定义函数时就可以省略书写参数和返回值类型检查了
count = function (x, y) {return x + y
}
函数类型声明还可以使用接口、自定义类型等方式,后面详细讲解
声明数组类型
typescript">let arr1: string[]
let arr2: number[]
let arr3: Array<string> // 泛型arr1 = ['a', 'b', 'c']
arr2 = [1, 2, 3]
arr3 = ['hello', 'world']
6. tuple
元组Tuple是⼀种特殊的数组类型,可以存储固定数量的元素,并且每个元素的类型是已知的且可以不同。元组用于精确描述⼀组值的类型,?表示可选元素
typescript">// 第⼀个元素必须是 string 类型,第⼆个元素必须是 number 类型。
let arr1: [string, number]
// 第⼀个元素必须是 number 类型,第⼆个元素是可选的,如果存在,必须是 boolean 类型。
let arr2: [number, boolean?]
// 第⼀个元素必须是 number 类型,后⾯的元素可以是任意数量的 string 类型
let arr3: [number, ...string[]]
// 可以赋值
arr1 = ['hello', 123]
arr2 = [100, false]
arr2 = [200]
arr3 = [100, 'hello', 'world']
arr3 = [100]
// 不可以赋值,arr1声明时是两个元素,赋值的是三个
arr1 = ['hello', 123, false]
7. enum
枚举Enum可以定义一组命名常量,它能增强代码的可读性,也让代码更好维护。
如下代码的功能是:根据调⽤walk
时传⼊的不同参数,执⾏不同的逻辑,存在的问题是调⽤walk
时传参时没有任何提示,开发者很容易写错字符串内容,并且用于逻辑判断的up
、down
、left
、right
是连续且相关的⼀组值,那此时就特别适合使⽤枚举(enum)
typescript">// 定义移动函数
function walk(str: string) {if (str === 'up') {console.log('向【上】⾛')} else if (str === 'down') {console.log('向【下】⾛')} else if (str === 'left') {console.log('向【左】⾛')} else if (str === 'right') {console.log('向【右】⾛')} else {console.log('未知⽅向')}
}
// 调用移动函数
walk('up')
walk('down')
walk('left')
walk('right')
数字枚举
数字枚举⼀种最常见的枚举类型,其成员的值会自动递增,且数字枚举还具备反向映射的特点,在下面代码的打印中,不难发现:可以通过值来获取对应的枚举成员名称 。
typescript">// 定义⼀个描述上下左右⽅向的枚举Direction
enum Direction { // 一般首字母大写Up,Down,Left,Right,
}
console.log(Direction) // 打印 {0: 'Up', 1: 'Down', 2: 'Left', 3: 'Right', Up: 0, Down: 1, Left: 2, Right: 3}// 反向映射
console.log(Direction.Up) // 0
console.log(Direction[0]) // Up// 此⾏代码报错,枚举中的属性是只读的
Direction.Up = 'shang'
也可以指定枚举成员的初始值,其后的成员值会自动递增。
typescript">enum Direction {Up = 6,Down,Left,Right,
}
console.log(Direction.Up) // 输出: 6
console.log(Direction.Down) // 输出: 7
使用枚举之后案例的代码可以变得更加直观可读,类型更加安全,同时易于维护。
typescript">// 定义⼀个描述上下左右⽅向的枚举Direction
enum Direction {Up,Down,Left,Right,
}
// 定义移动函数
function walk(n: Direction) {if (n === Direction.Up) {console.log('向【上】⾛')} else if (n === Direction.Down) {console.log('向【下】⾛')} else if (n === Direction.Left) {console.log('向【左】⾛')} else if (n === Direction.Right) {console.log('向【右】⾛')} else {console.log('未知⽅向')}
}
// 调用移动函数
walk(Direction.Up)
walk(Direction.Down)
字符串枚举
枚举成员的值是字符串
typescript">enum Direction {Up = 'up',Down = 'down',Left = 'left',Right = 'right',
}
let dir: Direction = Direction.Up
console.log(dir) // 输出: "up"
常量枚举
官方描述:常量枚举是一种特殊枚举类型,它使⽤const
关键字定义,在编译时会被内联,避免生成一些额外的代码,
何为编译时被内联?所谓“内联”其实就是TypeScript在编译时,会将枚举成员引用替换为它们的实际值,而不是生成额外的枚举对象。这可以减少生成的JavaScript代码量,并提高运行时效性能。
还是看一下之前的例子:
typescript">enum Directions {Up,Down,Left,Right,
}
let x = Directions.Up
在不加const
时被编译为:
"use strict";
var Directions;
(function (Directions) {Directions[Directions["Up"] = 0] = "Up";Directions[Directions["Down"] = 1] = "Down";Directions[Directions["Left"] = 2] = "Left";Directions[Directions["Right"] = 3] = "Right";
})(Directions || (Directions = {}));
let x = Directions.Up;
加了const
后被编译为:
"use strict";
let x = 0 /* Directions.Up */;
8. type
type可以为任意类型创建别名,让代码更简洁、可读性更强,同时能更方便地进行类型复用和扩展。
基本用法
类型别名使用type关键字定义,type后跟类型名称,例如下面代码中num是类型别名:
typescript">type num = number
let price: num
price = 100
联合类型
联合类型是一种高级类型,它表示一个值可以是几种不同类型之一。通过|
定义。
typescript">type Status = number | string // Status 可以时number类型也可以时string类型
type Gender = '男' | '⼥' // Gender只能是两种字符串'男'或'女'function printStatus(status: Status) {console.log(status)
}
function logGender(str: Gender) {console.log(str)
}printStatus(404)
printStatus('200')
printStatus('501')
logGender('男')
logGender('⼥')
logGender('未知') // 出现警告
交叉类型
交叉类型(Intersection Types)允许将多个类型合并为一个类型。合并后的类型将拥有所有被合并类型的成员。交叉类型通常用于对象类型。通过&
定义。
typescript">//⾯积
type Area = {height: number //⾼width: number //宽
}
//地址
type Address = {num: number //楼号cell: number //单元号room: string //房间号
}// 定义类型House,且House是Area和Address组成的交叉类型
type House = Area & Address
const house: House = {height: 180,width: 75,num: 6,cell: 3,room: '702',
}
一个特殊情况
先来看看以下两行段代码:
在函数定义时,限制函数返回值为void
,那么函数的返回值就必须是空。
typescript">function demo(): void {// 返回undefined合法return undefined// 以下返回均不合法return 100return falsereturn nullreturn []
}
demo()
使用类型声明限制函数返回值为void
时,TypeScript并不会严格要求函数返回空
typescript">type LogFunc = () => void // LogFunc类型的函数:不接收参数、返回值为void
const f1: LogFunc = () => {return 100 // 允许返回⾮空值
}
const f2: LogFunc = () => 200 // 允许返回⾮空值
const f3: LogFunc = function () {return 300 // 允许返回⾮空值
}
为什么会这样?
是为了确保如下代码成立,我们知道Array.prototype.push
的返回值是一个数字,而Array.prototype.forEach
方法期望其回调的返回类型是void
。不过就算拿到了返回值你也不能拿返回值做任何操作,会报错
typescript">const src = [1, 2, 3]
const dst = [0]
src.forEach(el => dst.push(el)) // 这里要求返回的是void,但是箭头省略了`{}`不一定为void
9. 接口
见类后面部分
类
这里和Java、C#中的类高度相似,可以直接到接口
TypeScript中的类
typescript">class Person {// 属性声明,在typescript中必须先进行属性声明name: stringage: number// 构造器constructor(name: string, age: number) {// 这里类型声明也是必须的this.name = namethis.age = age}// ⽅法speak() {console.log(`我叫:${this.name},今年${this.age}岁`)}
}
// Person实例
const p1 = new Person('周杰伦', 38)
类的继承
typescript">// 继承
class Student extends Person {grade: string// 构造器constructor(name: string, age: number, grade: string) {// 本例中若Student类不需要额外的属性,Student的构造器可以省略super(name, age)this.grade = grade}// 重写从⽗类继承的⽅法override speak() { // 这里加override后如果拼写错误会报错console.log(`我是学⽣,我叫:${this.name},今年${this.age}岁,在读${this.grade}年级`)}// ⼦类⾃⼰的⽅法study() {console.log(`${this.name}正在努⼒学习中......`)}
}
属性修饰符
四种属性修饰符
修饰符 | 含义 | 具体规则 |
---|---|---|
public | 公开的 | 可以被:类内部、子类、类外部访问 |
protected | 受保护的 | 可以被:类内部、子类访问 |
private | 私有的 | 可以被:类内部访问 |
readonly | 只读属性 | 属性无法修改 |
属性的简写形式
简写前:
typescript">class Person {public name: stringpublic age: numberconstructor(name: string, age: number) {this.name = namethis.age = age}
}
简写后:
typescript">class Person {constructor(public name: string, public age: number) {}
}
public 修饰符
typescript">// 父类
class Person {// name写了public修饰符,age没写修饰符,最终都是public修饰符public name: stringage: numberconstructor(name: string, age: number) {this.name = namethis.age = age}speak() { // 这里方法没写修饰符,也是public// 类的【内部】可以访问public修饰的name和ageconsole.log(`我叫:${this.name},今年${this.age}岁`)}
}
const p1 = new Person('张三', 18)
// 类的【外部】可以访问public修饰的属性
console.log(p1.name)// 子类
class Student extends Person {constructor(name: string, age: number) {super(name, age)}study() {// 【⼦类中】可以访问⽗类中public修饰的:name属性、age属性console.log(`${this.age}岁的${this.name}正在努⼒学习`)}
}
protected 修饰符
typescript">// 父类
class Person {// name和age是受保护属性,不能在类外部访问,但可以在【类】与【⼦类】中访问constructor(protected name: string, protected age: number) {}// getDetails是受保护⽅法,不能在类外部访问,但可以在【类】与【⼦类】中访问protected getDetails(): string {// 类中能访问受保护的name和age属性return `我叫:${this.name},年龄是:${this.age}`} introduce() { // introduce是public⽅法,类、⼦类、类外部都能使⽤// 类中能访问受保护的getDetails⽅法console.log(this.getDetails())}
}
const p1 = new Person('杨超越', 18)
// 可以在类外部访问introduce
p1.introduce()
// 以下代码均报错
// p1.getDetails()
// p1.name
// p1.age// 子类
class Student extends Person {constructor(name: string, age: number) {super(name, age)}study() {// ⼦类中可以访问introducethis.introduce()// ⼦类中可以访问nameconsole.log(`${this.name}正在努⼒学习`)}
}
const s1 = new Student('tom', 17)
s1.introduce()
private 修饰符
typescript">class Person {constructor(public name: string,public age: number,// IDCard属性为私有的(private)属性,只能在【类内部】使⽤private IDCard: string) {}private getPrivateInfo() {// 类内部可以访问私有的(private)属性 —— IDCardreturn `身份证号码为:${this.IDCard}`}getInfo() {// 类内部可以访问受保护的(protected)属性 —— name和agereturn `我叫: ${this.name}, 今年刚满${this.age}岁`}getFullInfo() {// 类内部可以访问公开的getInfo⽅法,也可以访问私有的getPrivateInfo⽅法return this.getInfo() + ',' + this.getPrivateInfo()}
}
const p1 = new Person('张三', 18, '110114198702034432')
console.log(p1.getFullInfo())
console.log(p1.getInfo())
// 以下代码均报错
// p1.name
// p1.age
// p1.IDCard
// p1.getPrivateInfo()
readonly 修饰符
typescript">class Car {constructor(public readonly vin: string, //⻋辆识别码,为只读属性public readonly year: number,//出⼚年份,为只读属性public color: string,public sound: string) { }// 打印⻋辆信息displayInfo() {console.log(`识别码:${this.vin},出⼚年份:${this.year},颜⾊:${this.color},⾳响:${this.sound}`);}
}
const car = new Car('1HGCM82633A123456', 2018, '⿊⾊', 'Bose⾳响');
car.displayInfo()
// 以下代码均错误:不能修改 readonly 属性
// car.vin = '897WYE87HA8SGDD8SDGHF';
// car.year = 2020;
抽象类
概述:抽象类是一种无法被实例化的类,专门用来定义类的结构和行为,类中可以写抽象方法,也可以写具体实现。抽象类主要用来为其派生类提供一个基础结构,要求其派生类必须实现其中的抽象方法。
简记:抽象类不能实例化,其意义是可以被继承,抽象类里可以有普通方法、也可以有抽象方法。
通过以下场景理解抽象类:
我们定义一个抽象类
Package
,表示所有包裹的基本结构,任何包裹都有重量属性weight
,包裹都需要计算运费。但不同类型的包裹(如:标准包裹、特快专递)都有不同的运费计算方式,因此用于计算运费的calculate
方法是一个抽象方法,必须由具体的子类来实现。
typescript">// Package类
abstract class Package {constructor(public weight: number) {}// 抽象⽅法:⽤来计算运费,不同类型包裹有不同的计算⽅式abstract calculate(): number// 通⽤⽅法:打印包裹详情printPackage() {console.log(`包裹重量为: ${this.weight}kg,运费为: ${this.calculate()}元`)}
}
typescript">// 标准包裹StandardPackage继承了Package类,实现了calculate方法
class StandardPackage extends Package {constructor(weight: number,public unitPrice: number // 每公⽄的固定费率) {super(weight)}// 实现抽象⽅法:计算运费calculate(): number {return this.weight * this.unitPrice}
}
// 创建标准包裹实例
const s1 = new StandardPackage(10, 5)
s1.printPackage()
typescript">// ExpressPackage特快专递继承了Package类,实现了calculate方法
class ExpressPackage extends Package {constructor(weight: number,private unitPrice: number, // 每公⽄的固定费率(快速包裹更⾼)private additional: number // 超出10kg以后的附加费) {super(weight)}// 实现抽象⽅法:计算运费calculate(): number {if (this.weight > 10) {// 超出10kg的部分,每公⽄多收additional对应的价格return 10 * this.unitPrice + (this.weight - 10) * this.additional} else {return this.weight * this.unitPrice}}
}
// 创建特快专递实例
const e1 = new ExpressPackage(13, 8, 2)
e1.printPackage()
那么何时适合使用抽象类呢?
- 定义通用接口:为一组相关的类定义通用的行为(方法或属性)时。
- 提供基础实现:在抽象类中提供某些方法或为其提供基础实现,这样派生类就可以继承这些实现。
- 确保关键实现:强制派生类实现一些关键行为。
- 共享代码和逻辑:当多个类需要共享部分代码时,抽象类可以避免代码重复。
接口 interface
interface
是一种定义结构的方式,主要作用是为【类、对象、函数】等规定一种契约,这样可以确保代码的一致性和类型安全,但要注意 interface
只能定义格式,不能包含任何实现
定义类结构
typescript">// PersonInterface接⼝,⽤于限制Person类的格式
interface PersonInterface {name: stringage: numberspeak(n: number): void
}// 定义⼀个类 Person,实现 PersonInterface 接⼝
class Person implements PersonInterface {constructor(public name: string, public age: number) {}// 实现接⼝中的 speak ⽅法speak(n: number): void {for (let i = 0; i < n; i++) {// 打印出包含名字和年龄的问候语句console.log(`你好,我叫${this.name},我的年龄是${this.age}`)}}
}// 创建⼀个 Person 类的实例 p1,传⼊名字 'tom' 和年龄 18
const p1 = new Person('tom', 18)
p1.speak(3)
定义对象结构
typescript">interface UserInterface {name: stringreadonly gender: string // 只读属性age?: number // 可选属性run: (n: number) => void
}
const user: UserInterface = {name: '张三',gender: '男',age: 18,run(n) {console.log(`奔跑了${n}⽶`)},
}
定义函数结构
typescript">interface CountInterface {(a: number, b: number): number // 两个number类型参数,返回值也是number类型的函数
}
const count: CountInterface = (x, y) => {return x + y
}
接口之间的继承
typescript">interface PersonInterface {name: string age: number
}
// StudentInterface 继承了 PersonInterface 接口实现代码复用
interface StudentInterface extends PersonInterface {grade: string
}
const stu: StudentInterface = {name: '张三',age: 25,grade: '⾼三',
}
接口自动合并
以下代码重复定义了PersonInterface
接口,PersonInterface
接口自动合并了,必须实现两个接口中的全部属性和方法
typescript">// PersonInterface接⼝
interface PersonInterface {// 属性声明name: stringage: number
}
// 给PersonInterface接⼝添加新属性
interface PersonInterface {// ⽅法声明speak(): void
}
// Person类实现PersonInterface
class Person implements PersonInterface {name: stringage: number// 构造器constructor(name: string, age: number) {this.name = namethis.age = age}// ⽅法speak() {console.log('你好!我是⽼师:', this.name)}
}
何时使用接口
- 定义对象的格式:描述数据模型、API响应格式、配置对象等是开发中接口应用最多的场景。
- 类的契约:规定一个类需要实现哪些属性和方法。
- 自动和合并:一般用于扩展第三方库的类型,这种特性在大型项目中可能会用到。
一些相似的概念
1. interface和type
相同点:
interface
和type
都可以用于定义对象结构,在定义对象结构时两者可以互换。
不同点:
-
interface
:更专注于定义对象和类的结构,支持继承、合并。 -
type
:可以定义类型别名、联合类型、交叉类型,但不支持继承和自动合并。
两者都可以定义对象的结构:
typescript">// 使⽤ interface 定义 Person 对象
interface PersonInterface {name: stringage: numberspeak(): void
}
// 使⽤ type 定义 Person 对象
type PersonType = {name: stringage: numberspeak(): void
}
// 使⽤PersonInterface
/* let person: PersonInterface = {name:'张三',age:18,speak(){console.log(`我叫:${this.name},年龄:${this.age}`)}
} */
// 使⽤PersonType
let person: PersonType = {name: '张三',age: 18,speak() {console.log(`我叫:${this.name},年龄:${this.age}`)},
}
interface
支持继承、合并
typescript">interface PersonInterface {name: string // 姓名age: number // 年龄
}
interface PersonInterface {speak: () => void
}
interface StudentInterface extends PersonInterface {grade: string // 年级
}
const student: StudentInterface = {name: '李四',age: 18,grade: '⾼⼆',speak() {console.log(this.name, this.age, this.grade)},
}
type
交叉类型可以实现和interface
继承、合并一样的效果,但看起来过于复杂,不方便
typescript">// 使⽤ type 定义 Person 类型,并通过交叉类型实现属性的合并
type PersonType = {name: string // 姓名age: number // 年龄
} & {speak: () => void
}
// 使⽤ type 定义 Student 类型,并通过交叉类型继承 PersonType
type StudentType = PersonType & {grade: string // 年级
}
const student: StudentType = {name: '李四',age: 18,grade: '⾼⼆',speak() {console.log(this.name, this.age, this.grade)},
}
2. interface和抽象类
相同点:
interface
和抽象类均可以用于定义一个类的格式(应遵循的契约)
不同点:
- 接口只能描述结构,不能有任何实现代码,一个类可以实现多个接口
- 抽象类既可以包含抽象方法,也可以包含具体方法,一个类只能继承一个抽象类
类实现多个接口:
typescript">// FlyInterface 接⼝
interface FlyInterface {fly(): void
}
// 定义 SwimInterface 接⼝
interface SwimInterface {swim(): void
}
// Duck 类实现了 FlyInterface 和 SwimInterface 两个接⼝
class Duck implements FlyInterface, SwimInterface {fly(): void {console.log('鸭⼦可以⻜')}swim(): void {console.log('鸭⼦可以游泳')}
}// 创建⼀个 Duck 实例
const duck = new Duck()
duck.fly() // 输出: 鸭⼦可以⻜
duck.swim() // 输出: 鸭⼦可以游泳
泛型
泛型允许我们在定义函数、类或接口时,使⽤类型参数来表示未指定的类型,这些参数在具体使用时,才被指定具体的类型(可以不是基本类型,比如type
声明的类型),泛型能让同一段代码适用于多种类型,同时仍然保持类型的安全性。
泛型函数
typescript">// 定义参数和返回值类型的时候我们不确定,使用泛型规定
function logData<T>(data: T): T {console.log(data)return data
}
// 在调用时,我们确定了具体的类型
logData<number>(100)
logData<string>('hello')
泛型可以有多个:
typescript">// 这里有两个泛型
function logData<T, U>(data1: T, data2: U): T | U {console.log(data1, data2)return Date.now() % 2 ? data1 : data2
}
logData<number, string>(100, 'hello')
logData<string, boolean>('ok', false)
泛型接口
typescript">interface PersonInterface<T> {name: stringage: numberextraInfo: T // 这里用到了泛型
}
let p1: PersonInterface<string>
let p2: PersonInterface<number>
p1 = { name: '张三', age: 18, extraInfo: '⼀个好⼈' }
p2 = { name: '李四', age: 18, extraInfo: 250 }
泛型约束
typescript">interface LengthInterface {length: number
}
// 约束规则是:传⼊的类型T必须具有 length 属性
function logPerson<T extends LengthInterface>(data: T): void {console.log(data.length)
}
logPerson<string>('hello')
// 以下行代码报错:因为number不具备length属性
logPerson<number>(100)
泛型类
typescript">class Person<T> {constructor(public name: string, public age: number, public extraInfo: T // 这里用到了泛型) {}speak() {console.log(`我叫${this.name}今年${this.age}岁了`)console.log(this.extraInfo)}
}
// 测试代码1
const p1 = new Person<number>('tom', 30, 250)
// 测试代码2
type JobInfo = { // 这里时typo声明的高级类型title: stringcompany: string
}
const p2 = new Person<JobInfo>('tom', 30, { title: '研发总监', company: '发发发科技公司' })
类型声明文件
类型声明文件是TypeScript中的一种特殊文件,通常以.d.ts
作为扩展名。它的主要作用是为现有的JavaScript代码提供类型信息,使得TypeScript能够在使用这些JavaScript库或模块时进行类型检查和提示。
假设以下代码demo.js
是我们引入的库,是用JavaScript写的:
// demo.js
export function add(a, b) {return a + b
}
export function mul(a, b) {return a * b
}
我们现在要引入这两个函数,到我们自己的TypeScript项目index
.ts中:
typescript">// index.ts
import { add, mul } from './demo.js' // 这里会报错,无法找到模块“./demo.js”的声明文件,“demo.js”隐式拥有 "any" 类型。
const x = add(2, 3)
const y = mul(4, 5)
console.log(x, y)
这是我们就要用到类型声明文件demo.d.ts
:
typescript">// demo.d.ts
declare function add(a: number, b: number): number;
declare function mul(a: number, b: number): number;
export { add, mul };
类型声明文件一般放在@types
文件夹下,大多主流库都有支持,一般不需要开发者自己书写。
TypeScript装饰器
虽然TypeScript5.0版本中可以直接使用类装饰器,但为了确保其他装饰器可用,现阶段使用时,仍建议使用
experimentalDecorators
配置来开启装饰器支持。
装饰器简介
- 装饰器自2015年在ECMAScript6中被提出,其本质是一种特殊的函数,它可以对类、属性、方法、参数进行扩展,同时能让代码更简洁。
- 截止目前,装饰器依然是实验性特性 ,需要开发者手动调整配置,来开启装饰器支持
- 装饰器有5种:类装饰器、属性装饰器、方法装饰器、访问器装饰器、参数装饰器
类装饰器
1. 基本语法
typescript">// Demo装饰器
function Demo(target: any) {console.log(target)
}@Demo // 打印 [class Person]
class Person {name: stringage: numberconstructor(name: string, age: number) {this.name = namethis.age = age}
}
2. 应用举例
定义一个装饰器,实现Person
实例调用toString
时返回JSON.stringify
的执行结果。
typescript">// 使用装饰器重写toString方法 + 封闭其原型对象
function CustomToString(target: Function) {// 向被装饰类的原型上添加自定义的 toString 方法target.prototype.toString = function () {return JSON.stringify(this) // 这里不能是target,因为target是类本身,而不是类的实例}// 封闭其原型对象,禁止随意操作其原型对象Object.seal(target.prototype)
}// 使用 CustomToString 装饰器
@CustomToString
class Person {constructor(public name: string, public age: number) {}speak() {console.log('你好呀!')}
}/* 测试代码如下 */
let p1 = new Person('张三', 18)
// 输出:{"name":"张三","age":18}
console.log(p1.toString())// 禁止随意操作其原型对象
interface Person {a: any
}
Person.prototype.a = 100 // 此行运行时会报错:Cannot add property a, object is not extensible
console.log(p1.a)
3. 关于返回值
-
类装饰器有返回值:若类装饰器返回一个新的类,那这个新类将替换掉被装饰的类。
-
若类装饰器无返回值:或返回
undefined
,那被装饰的类不会被替换。
typescript">function demo(target: Function) {// 装饰器有返回值时,该返回值会替换掉被装饰的类return class {test() {console.log(200)}}
}@demo
class Person {test() {console.log(100)}
}console.log(Person) // [class (anonymous)]const p1 = new Person()
p1.test() // 打印 200
4. 关于构造类型
在TypeScript中,Function
类型所表示的范围十分广泛,包括:普通函数、箭头函数、方法等等。但并非Function
类型的函数都可以被 new
关键字实例化,例如箭头函数是不能被实例化的,那么TypeScript中如何声明一个构造类型呢?有以下两种方式:
typescript">// 定义Constructor类型,其含义是构造类型
type Constructor = new (...args: any[]) => {}// new 表示:该类型是可以用new操作符调用。// ...args 表示:构造器可以接受【任意数量】的参数。// any[] 表示:构造器可以接受【任意类型】的参数。// {} 表示:返回类型是对象(非null、非undefined的对象)。function test(fn: Constructor) {}
class Person {}
test(Person)
typescript">// 定义Constructor类型,且包含一个静态属性 country
type Constructor = {new (...args: any[]): {} // 构造签名country: string // country静态属性
}function test(fn: Constructor) {}
class Person {static country = 'cn'
}
test(Person)
5. 替换被装饰的类
对于高级一些的装饰器,不仅仅是覆盖一个原型上的方法,还要有更多功能,例如添加新的方法和状态。比如说:下面设计了一个LogTime
装饰器,可以给实例添加一个属性,用于记录实例对象的创建时间,又添加了一个方法用于读取创建时间。
typescript">// User接口
interface User {getTime(): Datelog(): void
}// 自定义类型Class
type Constructor = new (...args: any[]) => {}// 创建一个装饰器,为类添加日志功能和创建时间
function LogTime<T extends Constructor>(target: T) {return class extends target {createdTime: Dateconstructor(...args: any[]) {super(...args)this.createdTime = new Date() // 记录对象创建时间}getTime() {return `该对象创建时间为:${this.createdTime}`}}
}@LogTime
class User {constructor(public name: string, public age: number) {}speak() {console.log(`${this.name}说:你好啊!`)}
}const user1 = new User('张三', 13)
user1.speak() // 张三说:你好啊!
console.log(user1.getTime()) // 该对象创建时间为:Sat Sep 28 2024 10:13:46 GMT+0800 (中国标准时间)
装饰器工厂
1. 什么是装饰器工厂
一个函数返回装饰器函数就是装饰器工厂:
typescript">// 定义一个装饰器工厂 LogInfo,它接受一个参数 n,返回一个类装饰器
function LogInfo(n: number) { // 通过装饰器工厂,现在可以给装饰器传参了// 装饰器函数,target 是被装饰的类return function (target: Function) {target.prototype.introduce = function () {for (let i = 0; i < n; i++) {console.log(`我的名字:${this.name},我的年龄:${this.age}`)}}}
}interface Person {introduce(): void
}@LogInfo(3)
class Person {constructor(public name: string, public age: number) {}speak() {console.log('你好呀!')}
}let p1 = new Person('张三', 18)
p1.introduce()
2. 装饰器组合及其执行顺序
装饰器可以组合使用,执行顺序为先由上到下的执行所有的装饰器工厂,依次获取到装饰器,然后再由下到上执行所有的装饰器。看代码执行:
typescript">//装饰器
function test1(target: Function) {console.log('test1')
}
//装饰器工厂
function test2() {console.log('test2工厂')return function (target: Function) {console.log('test2')}
}
//装饰器工厂
function test3() {console.log('test3工厂')return function (target: Function) {console.log('test3')}
}
//装饰器
function test4(target: Function) {console.log('test4')
}@test1
@test2()
@test3()
@test4
class Person {}/*控制台打印:test2工厂test3工厂test4test3test2test1
*/
属性装饰器
1.基本语法
typescript">function Demo(target: object, propertyKey: string) {// target: 对于静态属性来说值是类,对于实例属性来说值是类的原型对象// propertyKey: 属性名console.log(target, propertyKey)
}class Person {@Demo name: string // 实例属性,类的原型对象@Demo age: number // 实例属性,类的原型对象@Demo static school: string // 静态属性,类constructor(name: string, age: number) {this.name = namethis.age = age}
}const p1 = new Person('张三', 18)// 打印
// {} name
// {} age
// [class Person] school
2. 关于属性遮蔽
如下代码中:当构造器中的this.age = age
试图在实例上赋值时,但没有找到,使用实际上是调用了原型上age
属性的set
方法。
typescript">class Person {name: stringage: number // 注意,这只是类型声明,没有ageconstructor(name: string, age: number) {this.name = namethis.age = age}
}let value = 99
// 使用defineProperty给Person原型添加age属性,并配置对应的get与set
Object.defineProperty(Person.prototype, 'age', {get() {return value},set(val) {value = val},
})const p1 = new Person('张三', 18)
console.log(p1.age) //18
console.log(Person.prototype.age) //18
3. 应用举例
下面代码定义了一个State
属性装饰器,来监视属性的修改。
typescript">// 声明一个装饰器函数 State,用于捕获数据的修改
function State(target: object, propertyKey: string) {// 存储属性的内部值let key: string = `__${propertyKey}`// 使用 Object.defineProperty 替换类的原始属性// 重新定义属性,使其使用自定义的 getter 和 setterObject.defineProperty(target, propertyKey, {get() {// 这里取到this身上就可以不同对象用自己的key了,不会出现共用,只不过会在对象上追加一个缓存值``__${propertyKey}``return this[key] // 这里不能用`.`,因为key是字符串},set(newVal: string) {console.log(`${propertyKey}的最新值为:${newVal}`)this[key] = newVal},enumerable: true, // 可枚举configurable: true, // 可配置})
}class Person {name: string// 使用State装饰器@State age: numberschool = 'peking university'constructor(name: string, age: number) {this.name = namethis.age = age}
}const p1 = new Person('张三', 18)
const p2 = new Person('李四', 30)p1.age = 80
p2.age = 90console.log('------------------')
console.log(p1.age) //80
console.log(p2.age) //90
方法装饰器
1. 基本语法
typescript">function Demo(target: object, propertyKey: string, descriptor: PropertyDescriptor) {// target: 对于静态方法来说值是【类】,对于实例方法来说值是【原型对象】。// propertyKey:方法的名称。// descriptor: 方法的描述对象,其中【value】属性是被装饰的【方法】(不仅仅是方法名),还有可枚举、可配置、可写属性。console.log(target)console.log(propertyKey)console.log(descriptor)
}class Person {constructor(public name: string, public age: number) {}// Demo装饰实例方法@Demo speak() {console.log(`你好,我的名字:${this.name},我的年龄:${this.age}`)}// Demo装饰静态方法@Demo static isAdult(age: number) {return age >= 18}
}Person.isAdult(18)
const p1 = new Person('张三', 18)
p1.speak()
2. 应用举例
下面代码中Logger
方法装饰器在方法前后给其增加了一些额外的逻辑,Validate
装饰器用于验证数据
typescript">// 打印日志的装饰器
function Logger(target: object, propertyKey: string, descriptor: PropertyDescriptor) {// 保存原始方法const original = descriptor.value// 替换原始方法descriptor.value = function (...args: any[]) {console.log(`${propertyKey}开始执行......`)const result = original.call(this, ...args)console.log(`${propertyKey}执行完毕......`)return result}
}// 验证参数的装饰器工厂
function Validate(maxValue: number) {return function (target: object, propertyKey: string, descriptor: PropertyDescriptor) {// 保存原始方法const original = descriptor.value// 替换原始方法descriptor.value = function (...args: any[]) {// 自定义的验证逻辑if (args[0] > maxValue) {throw new Error('年龄非法!')}// 如果所有参数都符合要求,则调用原始方法return original.apply(this, args)}}
}class Person {constructor(public name: string, public age: number) {}@Logger speak() {console.log(`你好,我的名字:${this.name},我的年龄:${this.age}`)}@Validate(120)static isAdult(age: number) {return age >= 18}
}const p1 = new Person('张三', 18)
p1.speak()
console.log(Person.isAdult(100))
访问器装饰器
1. 基本语法
typescript">function Demo(target: object, propertyKey: string, descriptor: PropertyDescriptor) {// target:// 1. 对于实例访问器来说值是【所属类的原型对象】// 2. 对于静态访问器来说值是【所属类】// propertyKey:访问器的名称// descriptor: 描述对象,一样的可以通过value取得方法console.log(target)console.log(propertyKey)console.log(descriptor)
}class Person {@Demoget address() {return '中国深圳'}@Demostatic get country() {return '中国'}
}
2. 应用举例
以下代码对Weather
类的temp
属性的set
访问器进行限制,设置的最低温度-50
,最高温度50
typescript">// 限制访问器值设置范围的装饰器
function RangeValidate(min: number, max: number) {return function (target: object, propertyKey: string, descriptor: PropertyDescriptor) {// 保存原始的 setter 方法,以便在后续调用中使用const originalSetter = descriptor.set// 重写 setter 方法,加入范围验证逻辑descriptor.set = function (value: number) {// 检查设置的值是否在指定的最小值和最大值之间if (value < min || value > max) {// 如果值不在范围内,抛出错误throw new Error(`${propertyKey}的值应该在 ${min} 到 ${max}之间!`)}// 如果值在范围内,且原始 setter 方法存在,则调用原始 setter 方法if (originalSetter) {originalSetter.call(this, value)}}}
}class Weather {private _temp: numberconstructor(_temp: number) {this._temp = _temp}// 设置温度范围在 -50 到 50 之间@RangeValidate(-50, 50)set temp(value) {this._temp = value}get temp() {return this._temp}
}const w1 = new Weather(25)
console.log(w1)
w1.temp = 67
console.log(w1)
3. 访问器装饰器和方法装饰器的区别
- 描述器
descriptor
中的key
不同:方法装饰器的描述器的key
为value
,writable
,enumerable
,configurable
,访问器装饰器的描述器key
为get
,set
,enumerable
,configurable
- 返回值类型不同:访问器装饰器返回一个
TypedPropertyDescriptor<any>
类型的对象,而方法装饰器返回一个TypedPropertyDescriptor<T>
类型的对象,其中T`是方法的返回类型
参数装饰器
1. 基本语法
typescript">function Demo(target: object, propertyKey: string, parameterIndex: number) {// target:// 1.如果修饰的是【实例方法】的参数,target 是类的【原型对象】// 2.如果修饰的是【静态方法】的参数,target 是【类】// propertyKey:参数所在的方法的名称// parameterIndex: 参数在函数参数列表中的索引,从 0 开始console.log(target) // {}console.log(propertyKey) // speakconsole.log(parameterIndex) // 0
}// 类定义
class Person {constructor(public name: string) {}speak(@Demo message1: any, mesage2: any) {console.log(`${this.name}想对说:${message1},${mesage2}`)}
}
2. 应用举例
下面代码定义了一个方法装饰器Validate
,同时搭配参数装饰器NotNumber
,来对speak
方法的参数类型进行限制
typescript">// 参数装饰器定义
function NotNumber(target: any, propertyKey: string, parameterIndex: number) {// 初始化或获取当前方法的参数索引列表let notNumberArr: number[] = target[`__notNumber_${propertyKey}`] || []// 将当前参数索引添加到列表中notNumberArr.push(parameterIndex)// 将列表存储回目标对象target[`__notNumber_${propertyKey}`] = notNumberArr
}// 方法装饰器定义
function Validate(target: any, propertyKey: string, descriptor: PropertyDescriptor) {const method = descriptor.valuedescriptor.value = function (...args: any[]) {// 获取被标记为不能为空的参数索引列表const notNumberArr: number[] = target[`__notNumber_${propertyKey}`] || []// 检查参数是否为 null 或 undefinedfor (const index of notNumberArr) {if (typeof args[index] === 'number') {throw new Error(`方法 ${propertyKey} 中索引为 ${index} 的参数不能是数字!`)}}// 调用原始方法return method.apply(this, args)}return descriptor
}// 类定义
class Student {name: stringconstructor(name: string) {this.name = name}@Validatespeak(@NotNumber message1: any, message2: any) {console.log(`${this.name}想对说:${message1},${message2}`)}
}// 使用
const s1 = new Student('张三')
s1.speak('100', 200) // 不抛出异常
s1.speak('100', 200) // 抛出异常
一个 TypedPropertyDescriptor<T>
类型的对象,其中T`是方法的返回类型
参数装饰器
1. 基本语法
typescript">function Demo(target: object, propertyKey: string, parameterIndex: number) {// target:// 1.如果修饰的是【实例方法】的参数,target 是类的【原型对象】// 2.如果修饰的是【静态方法】的参数,target 是【类】// propertyKey:参数所在的方法的名称// parameterIndex: 参数在函数参数列表中的索引,从 0 开始console.log(target) // {}console.log(propertyKey) // speakconsole.log(parameterIndex) // 0
}// 类定义
class Person {constructor(public name: string) {}speak(@Demo message1: any, mesage2: any) {console.log(`${this.name}想对说:${message1},${mesage2}`)}
}
2. 应用举例
下面代码定义了一个方法装饰器Validate
,同时搭配参数装饰器NotNumber
,来对speak
方法的参数类型进行限制
typescript">// 参数装饰器定义
function NotNumber(target: any, propertyKey: string, parameterIndex: number) {// 初始化或获取当前方法的参数索引列表let notNumberArr: number[] = target[`__notNumber_${propertyKey}`] || []// 将当前参数索引添加到列表中notNumberArr.push(parameterIndex)// 将列表存储回目标对象target[`__notNumber_${propertyKey}`] = notNumberArr
}// 方法装饰器定义
function Validate(target: any, propertyKey: string, descriptor: PropertyDescriptor) {const method = descriptor.valuedescriptor.value = function (...args: any[]) {// 获取被标记为不能为空的参数索引列表const notNumberArr: number[] = target[`__notNumber_${propertyKey}`] || []// 检查参数是否为 null 或 undefinedfor (const index of notNumberArr) {if (typeof args[index] === 'number') {throw new Error(`方法 ${propertyKey} 中索引为 ${index} 的参数不能是数字!`)}}// 调用原始方法return method.apply(this, args)}return descriptor
}// 类定义
class Student {name: stringconstructor(name: string) {this.name = name}@Validatespeak(@NotNumber message1: any, message2: any) {console.log(`${this.name}想对说:${message1},${message2}`)}
}// 使用
const s1 = new Student('张三')
s1.speak('100', 200) // 不抛出异常
s1.speak('100', 200) // 抛出异常