TypeScript
为什么学习 TS
程序更容易理解
函数或者方法输入输出的参数类型,外部条件?
- 使用
js
需要手动调试(console.log....) - 使用
ts
代码本身就可以回答上诉问题
更高的效率
- 在不同的代码块和定义中进行跳转
- 代码自动补全
- 丰富的接口提示
更少的错误
- 编译期间能够发现大部分错误
- 杜绝一些常见的错误
非常好的包容性
- 完全兼容
js
- 第三方库可以单独编写类型文件
- 大多数项目都支持
ts
一些小缺点
- 学习成本
- 开发成本
学习资源
开发环境
安装 ts:
npm i -g typescript
,编译 ts:tsc xxx.ts
,得到 js 文件执行直接使用
ts-node
运行 ts 文件:npm i ts-node -g
npm i typescript -g
ts-node xxx.ts
boolean
const bool1 = true
const bool2: boolean = false
number
const num1: number = 1
const num2 = 2
string
const str1 = 'frank'
const str2: string = 'frank'
const str3 = `我叫${str2}`
array
数组的几种声明方式:
let list1: number[] = [1, 2, 3, 4]
let list2 = [1, 2, 3, '4']
let list3: Array<number> = [1, 2, 3, 4] // 泛型
let list4: any[] = [1, 'ddd', { a: 1 }, [1, 2, 3]]
tuple
元组类型是另一种类型 Array,它确切地知道它包含多少个元素,以及它在特定位置包含哪些类型
let person: [number, string] = [1, '123']
当添加越界的元素时,它的类型会被限制为元组中每个类型的联合类型:
let tom: [string, number]
tom = ['Tom', 25]
tom.push('male')
tom.push(true)
// Argument of type 'true' is not assignable to parameter of type 'string | number'.
union
联合类型 Union Types
表示取值可以为多种类型中的一种
联合类型使用 |
分隔每个类型
let union1: number | string
union1 = 123
union1 = '456'
let union2: number | string | string[] | boolean
let union3: 1 | 2 | 3
literal
字面量 Literal
类型的特定数据就是 它自己的类型
const num = 1
// 与联合类型结合
let nums: 1 | 2 | 3
nums = 2
nums = 4 // 报错 nums只能是 1,2,3 中的其中一个
any
任意值 Any
用来表示允许赋值为任意类型
let result: any = 555
result = { a: 1 }
result = []
result = false
unknown
unknown
不保证类型,但保证类型安全(类型安全的 any
),只有确定了变量类型以后,才能正常使用
let res: unknown = 123
res = function () {
console.log('res')
}
if (typeof res === 'function') {
res()
}
res = 123
if (typeof res === 'number') {
console.log(res++)
}
void
void 和 undefined
void
代表变量本身就不存在,undefined
代表应该此处应该有一个变量,但是没有定义
在 TypeScript
中,可以用 void
表示没有任何返回值的函数:
function printRes(): void {
console.log('string')
}
function printRes2(): undefined {
console.log('string')
return
}
Enum
Interface
在 TypeScript
中,我们使用接口Interfaces
来定义对象的类型
在面向对象语言中,接口nterfaces
是一个很重要的概念,它是对行为的抽象,而具体如何行动需要由类classes
去实现implement
TypeScript
中的接口是一个非常灵活的概念,除了可用于对类的一部分行为进行抽象以外,也常用于对「对象的形状(Shape
」进行描述:
interface IPoint {
X: number
Y: number
}
const p1: IPoint = {
X: 1,
Y: 2,
}
定义的变量比接口少了一些属性是不允许的,多一些属性也是不允许的。可见,赋值的时候,变量的形状必须和接口的形状保持一致
可选属性
有时我们希望不要完全匹配一个形状,那么可以用可选属性:
interface Person {
name: string
age?: number
}
let tom: Person = {
name: 'Tom',
}
可选属性的含义是该属性可以不存在。这时仍然不允许添加未定义的属性
任意属性
有时候我们希望一个接口允许有任意的属性,可以使用如下方式:
interface Person {
name: string
age?: number
// 索引签名
[propName: string]: any
}
let tom: Person = {
name: 'Tom',
gender: 'male',
}
使用索引签名 [propName: string]
定义了任意属性取 string
类型的值。
需要注意的是,一旦定义了任意属性,那么确定属性和可选属性的类型都必须是它的类型的子集:
interface Person {
name: string
age?: number
[propName: string]: string
}
let tom: Person = {
name: 'Tom',
age: 25,
gender: 'male',
}
// index.ts(3,5): error TS2411: Property 'age' of type 'number' is not assignable to string index type 'string'.
// index.ts(7,5): error TS2322: Type '{ [x: string]: string | number; name: string; age: number; gender: string; }' is not assignable to type 'Person'.
// Index signatures are incompatible.
// Type 'string | number' is not assignable to type 'string'.
// Type 'number' is not assignable to type 'string'.
一个接口中只能定义一个任意属性。如果接口中有多个类型的属性,则可以在任意属性中使用联合类型:
interface Person {
name: string
age?: number
[propName: string]: string | number
}
let tom: Person = {
name: 'Tom',
age: 25,
gender: 'male',
}
只读属性
有时候我们希望对象中的一些字段只能在创建的时候被赋值,那么可以用 readonly
定义只读属性:
interface Person {
readonly id: number
name: string
age?: number
[propName: string]: any
}
let tom: Person = {
id: 89757,
name: 'Tom',
gender: 'male',
}
tom.id = 9527
// index.ts(14,5): error TS2540: Cannot assign to 'id' because it is a constant or a read-only property.
上例中,使用 readonly
定义的属性 id
初始化后,又被赋值了,所以报错了。
function
定义
- 函数声明
输入多余的(或者少于要求的)参数,是不被允许的
function sum(x: number, y: number): number {
return x + y
}
- 函数表达式
let mySum = function (x: number, y: number): number {
return x + y
}
各种参数
// 可选参数
function fun(a: number, b?: number) {
console.log(a, b) // 1 undefined
}
fun(1)
// 默认参数
function fun2(a: number = 1, b: number = 2) {
console.log(a + b) //3
}
fun2(1)
// 剩余参数
function fun3(a: number, b: number, ...c: number[]) {
console.log(a + b + c.reduce((pre, cur) => pre + cur)) //16
}
fun3(1, 2, 3, 4, 6)
注意
默认参数和可选参数无法同时使用
三种参数都应定义在参数列表的末尾
Object
在 ts
中对象的定义不是key to value
键值对,而是 key to type
键类型对
const person: {
name: string
age: number
} = {
name: 'frank',
age: 14,
}
// 上面的定义等价于:
const person2 = {
name: 'zhang',
age: 13,
}
Type Assertions 类型断言
类型断言Type Assertions
可以用来手动指定一个值的类型
let x: any
x = '123' // 仍然是any类型
// 写法1 在 tsx 语法(React 的 jsx 语法的 ts 版)中无法使用
let s1 = (<string>x).charAt(1) // 1
// 写法2
let s2 = (x as string).charAt(2) // 2
Type Inference 类型推论
如果没有明确的指定类型,那么 TypeScript 会依照类型推论(Type Inference)的规则推断出一个类型。
以下代码虽然没有指定类型,但是会在编译的时候报错:
let myFavoriteNumber = 'seven'
myFavoriteNumber = 7
// index.ts(2,1): error TS2322: Type 'number' is not assignable to type 'string'.
事实上,它等价于:
let myFavoriteNumber: string = 'seven'
myFavoriteNumber = 7
// index.ts(2,1): error TS2322: Type 'number' is not assignable to type 'string'.
如果定义的时候没有赋值,不管之后有没有赋值,都会被推断成 any 类型而完全不被类型检查:
let myFavoriteNumber
myFavoriteNumber = 'seven'
myFavoriteNumber = 7
Generics 泛型
泛型Generics
是指在定义函数、接口或类的时候,不预先指定具体的类型,而在使用的时候再指定类型的一种特性。
简单的例子
首先,我们来实现一个函数 createArray
,它可以创建一个指定长度的数组,同时将每一项都填充一个默认值:
function createArray(length: number, value: any): Array<any> {
let result = []
for (let i = 0; i < length; i++) {
result[i] = value
}
return result
}
createArray(3, 'x') // ['x', 'x', 'x']
上例中,我们使用了数组泛型来定义返回值的类型。
这段代码编译不会报错,但是一个显而易见的缺陷是,它并没有准确的定义返回值的类型:
Array<any>
允许数组的每一项都为任意类型。但是我们预期的是,数组中每一项都应该是输入的 value
的类型。
这时候,泛型就派上用场了:
function createArray<T>(length: number, value: T): Array<T> {
let result: T[] = []
for (let i = 0; i < length; i++) {
result[i] = value
}
return result
}
createArray<string>(3, 'x') // ['x', 'x', 'x']
上例中,我们在函数名后添加了 <T>
,其中 T
用来指代任意输入的类型,在后面的输入 value: T
和输出 Array<T>
中即可使用了。
接着在调用的时候,可以指定它具体的类型为 string
。当然,也可以不手动指定,而让类型推论自动推算出来:
function createArray<T>(length: number, value: T): Array<T> {
let result: T[] = []
for (let i = 0; i < length; i++) {
result[i] = value
}
return result
}
createArray(3, 'x') // ['x', 'x', 'x']
多个类型参
定义泛型的时候,可以一次定义多个类型参数:
function swap<T, U>(tuple: [T, U]): [U, T] {
return [tuple[1], tuple[0]]
}
swap([7, 'seven']) // ['seven', 7]
上例中,我们定义了一个 swap
函数,用来交换输入的元组
泛型约束
在函数内部使用泛型变量的时候,由于事先不知道它是哪种类型,所以不能随意的操作它的属性或方法:
function loggingIdentity<T>(arg: T): T {
console.log(arg.length)
return arg
}
// index.ts(2,19): error TS2339: Property 'length' does not exist on type 'T'.
上例中,泛型 T
不一定包含属性 length
,所以编译的时候报错了。
这时,我们可以对泛型进行约束,只允许这个函数传入那些包含 length
属性的变量。这就是泛型约束:
interface Lengthwise {
length: number
}
function loggingIdentity<T extends Lengthwise>(arg: T): T {
console.log(arg.length)
return arg
}
上例中,我们使用了 extends
约束了泛型 T
必须符合接口 Lengthwise
的形状,也就是必须包含 length
属性。
此时如果调用 loggingIdentity
的时候,传入的 arg
不包含 length
,那么在编译阶段就会报错了:
interface Lengthwise {
length: number
}
function loggingIdentity<T extends Lengthwise>(arg: T): T {
console.log(arg.length)
return arg
}
loggingIdentity(7)
// index.ts(10,17): error TS2345: Argument of type '7' is not assignable to parameter of type 'Lengthwise'.
多个类型参数之间也可以互相约束:
function copyFields<T extends U, U>(target: T, source: U): T {
for (let id in source) {
target[id] = (<T>source)[id]
}
return target
}
let x = { a: 1, b: 2, c: 3, d: 4 }
copyFields(x, { b: 10, d: 20 })
上例中,我们使用了两个类型参数,其中要求 T
继承 U
,这样就保证了 U
上不会出现 T
中不存在的字段。
泛型接口
可以使用接口的方式来定义一个函数需要符合的形状:
interface SearchFunc {
(source: string, subString: string): boolean
}
let mySearch: SearchFunc
mySearch = function (source: string, subString: string) {
return source.search(subString) !== -1
}
当然也可以使用含有泛型的接口来定义函数的形状:
interface CreateArrayFunc {
<T>(length: number, value: T): Array<T>
}
let createArray: CreateArrayFunc
createArray = function <T>(length: number, value: T): Array<T> {
let result: T[] = []
for (let i = 0; i < length; i++) {
result[i] = value
}
return result
}
createArray(3, 'x') // ['x', 'x', 'x']
进一步,我们可以把泛型参数提前到接口名上:
interface CreateArrayFunc<T> {
(length: number, value: T): Array<T>
}
let createArray: CreateArrayFunc<any>
createArray = function <T>(length: number, value: T): Array<T> {
let result: T[] = []
for (let i = 0; i < length; i++) {
result[i] = value
}
return result
}
createArray(3, 'x') // ['x', 'x', 'x']
注意,此时在使用泛型接口的时候,需要定义泛型的类型。
泛型类
与泛型接口类似,泛型也可以用于类的类型定义中:
class GenericNumber<T> {
zeroValue: T
add: (x: T, y: T) => T
}
let myGenericNumber = new GenericNumber<number>()
myGenericNumber.zeroValue = 0
myGenericNumber.add = function (x, y) {
return x + y
}
泛型参数的默认类型
在 TypeScript 2.3 以后,我们可以为泛型中的类型参数指定默认类型。当使用泛型时没有在代码中直接指定类型参数,从实际值参数中也无法推测出时,这个默认类型就会起作用。
function createArray<T = string>(length: number, value: T): Array<T> {
let result: T[] = []
for (let i = 0; i < length; i++) {
result[i] = value
}
return result
}
type 类型别名
类型别名用来给一个类型起个新名字
type Name = string
type NameResolver = () => string
type NameOrResolver = Name | NameResolver
function getName(n: NameOrResolver): Name {
if (typeof n === 'string') {
return n
} else {
return n()
}
}
上例中,我们使用 type
创建类型别名
类型别名常用于联合类型
类型别名与接口的区别
- 一分钟带你搞清楚 ts 中 interface 和 type 的概念和用法(较全)
- TypeScript type 和 interface 区别
- TypeScript 中 interface 和 type
相同点
都可以描述一个对象或者函数:
interface
interface User {
name: string
age: number
}
interface SetUser {
(name: string, age: number): void
}
type
type User = {
name: string
age: number
}
type SetUser = (name: string, age: number) => void
都允许拓展extends
:
interface
和 type
都可以拓展,并且两者并不是相互独立的,也就是说interface
可以 extends
type
, type
也可以 extends
interface
。 虽然效果差不多,但是两者语法不同。
interface extends interface
interface Name {
name: string
}
interface User extends Name {
age: number
}
type extends type
type Name = {
name: string
}
type User = Name & { age: number }
interface extend type
type Name = {
name: string
}
interface User extends Name {
age: number
}
type extends interface
interface Name {
name: string
}
type User = Name & {
age: number
}
不同点
type
可以而 interface
不行:
type
可以声明基本类型别名,联合类型,元组等类型
// 基本类型别名
type Name = string
// 联合类型
interface Dog {
wong()
}
interface Cat {
miao()
}
type Pet = Dog | Cat
// 具体定义数组每个位置的类型
type PetList = [Dog, Pet]
type
语句中还可以使用typeof
获取实例的 类型进行赋值
// 当你想获取一个变量的类型时,使用 typeof
let div = document.createElement('div')
type B = typeof div
interface
可以而 type
不行:
interface
能够声明合并
interface User {
name: string
age: number
}
interface User {
sex: string
}
/*
User 接口为 {
name: string
age: number
sex: string
}
*/
重载
重载是定义相同的方法名,参数不同;重写是子类重写父类的方法
函数重载
重载允许一个函数接受不同数量或类型的参数时,作出不同的处理。
比如,我们需要实现一个函数 reverse
,输入数字 123
的时候,输出反转的数字 321
,输入字符串 'hello'
的时候,输出反转的字符串 'olleh'
。
利用联合类型,我们可以这么实现:
function reverse(x: number | string): number | string | void {
if (typeof x === 'number') {
return Number(x.toString().split('').reverse().join(''))
} else if (typeof x === 'string') {
return x.split('').reverse().join('')
}
}
然而这样有一个缺点,就是不能够精确的表达,输入为数字的时候,输出也应该为数字,输入为字符串的时候,输出也应该为字符串。
这时,我们可以使用重载定义多个 reverse
的函数类型:
function reverse(x: number): number // 重载签名
function reverse(x: string): string // 重载签名
function reverse(x: number | string): number | string | void {
// 实现签名
if (typeof x === 'number') {
return Number(x.toString().split('').reverse().join(''))
} else if (typeof x === 'string') {
return x.split('').reverse().join('')
}
}
上例中,我们重复定义了多次函数 reverse
,前几次都是函数定义,最后一次是函数实现
方法重载
下面来实现一个方法重载 以 ArrayList 为例,可以查看数据,可以删除数据,删除可以通过 id 或者对象删除可以获取数据
class ArrayList {
constructor(public element: object[]) {}
/**
* 获取某一个值
* @param index
* @returns
*/
get(index: number) {
return this.element[index]
}
// 显示值
show() {
this.element.forEach((i) => console.log(i))
}
remove(val: number): number
remove(val: Object): Object // 实现删除方法重载
remove(val: number | Object) {
this.element = this.element.filter((e, index) => {
if (typeof val === 'number') {
return val !== index
} else {
return val !== e
}
})
return val
}
}
let a = { name: 'zixia', age: 12 },
b = { name: 'selfsummer', age: 88 },
c = { name: '自夏', age: 18 }
let newAr = new ArrayList([a, b, c])
newAr.remove(1)
newAr.remove(c)
console.log(newAr)
构造器重载
// 类型别名
type TypeWowen = {
name: string
age: number
}
class Wowen {
name: string
age: number
constructor(age: number, name?: string)
constructor(paramObj: TypeWowen)
constructor(paramObj: any, name = '未知') {
if (typeof paramObj === 'object') {
const { name, age } = paramObj
this.name = name
this.age = age
} else {
this.age = paramObj
this.name = name
}
}
}
const w1 = new Wowen({ name: 'frank', age: 123 })
const w2 = new Wowen(123, 'frank')
// const w3 = new Wowen({ name: 'frank', age: 123 }, 123)
console.log(w1)
console.log(w2)
console.log(w3)
type GreetFunction = (a: string) => void
function greeter(fn: GreetFunction) {
// ...
}
在 JavaScript 中,函数除了可以被调用,自己也是可以有属性值的。然而函数类型表达式并不能支持声明属性,如果我们想描述一个带有属性的函数,我们可以在一个对象类型中写一个调用签名(call signature)
type DescribableFunction = {
description: string
(someArg: number): boolean
}
const fn: DescribableFunction = (someArg) => {
return someArg > 0
}
fn.description = '是否大于0'
function doSomething(fn: DescribableFunction) {
console.log(`${fn.description},returned:${fn(6)}`)
}
doSomething(fn)
注意这个语法跟函数类型表达式稍有不同,在参数列表和返回的类型之间用的是 :
而不是 =>
。
构造签名
JavaScript
函数也可以使用 new
操作符调用,当被调用的时候,TypeScript
会认为这是一个构造函数( constructors (构造函数) ),因为他们会产生一个新对象。你可以写一个构造签名,方法是在调用签名前面加一个 new
关键词:
type SomeConstructor = {
new (s: string): SomeObject
}
function fn(ctor: SomeConstructor) {
return new ctor('hello')
}
索引签名
索引:对象或数组的对应位置的名字
数组的索引就是 number 类型的 0,1,2,3...
对象的索引就是 string 类型的属性名
有的时候,你不能提前知道一个类型里的所有属性的名字,但是你知道这些值的特征
这种情况,你就可以用一个索引签名index signature
来描述可能的值的类型
一个索引签名的属性类型必须是 string
或者是 number
数字索引签名:通过定义接口用来约束数组
type numberIndex = {
[index: number]: string
}
const testArray: numberIndex = ['1', '2', 3] // 不能将类型“number”分配给类型“string”。ts(2322) 所需类型来自此索引签名
提示
索引签名的名称如[index:number]:string
里的index
除了可读性外,并无任何意义.但有利于下一个开发者理解你的代码
字符串索引签名:用于约束对象
type objectType{
[propName:string]:number
}
const testObj:objectType = {
"name":100,
"age":"200" // 不能将类型“string”分配给类型“number”。ts(2322) 所需类型来自此索引签名。
}
注意事项
- 一旦定义了索引签名,那么确定属性和可选属性的类型都必须是它的类型的子集
type attentionType{
name: string; // Ok
age?: number; // 类型“number | undefined”的属性“age”不能赋给“string”索引类型“string”。ts(2411)
sex?: undefined; // OK
[propName: string]: string | undefined;
}
- 虽然 TypeScript 可以同时支持
string
和number
类型,但数字索引的返回类型一定要是字符索引返回类型的子类型。这是因为当使用一个数字进行索引的时候,JavaScript
实际上把它转成了一个字符串。这就意味着使用数字 100 进行索引跟使用字符串 100 索引,是一样的。
interface Animal {
name: string
}
interface Dog extends Animal {
breed: string
}
interface NotOkay {
[x: string]: Dog
[x: number]: Animal // Error
}
interface Okay {
[x: string]: Animal
[x: number]: Dog // OK
}
常量断言
常量断言,可以用于断言任何一个类型:
const frank = {
age: 22,
hobby: 'js',
} as const
interface Isetting {
align: 'center' | 'left' | 'right'
padding: number
}
function layout(setting: Isetting) {
console.log('Layout', setting)
}
const paramer = {
align: 'left' as const,
padding: 0,
}
layout(paramer)
keyof 操作符
对一个对象类型使用 keyof
操作符,会返回该对象属性名组成的一个字符串或者数字字面量的联合。这个例子中的类型 P 就等同于 "x" | "y":
type Point = { x: number; y: number }
type P = keyof Point
类型映射
有的时候,一个类型需要基于另外一个类型,但是你又不想拷贝一份,这个时候可以考虑使用映射类型。
type Point2D = {
x: number
y: number
}
type Point3D = {
[key in keyof Point2D]: number
} & {
z: number
}
let p2: Point3D = { x: 1, y: 2, z: 3 }
映射修饰符
在使用类型映射时,有两个额外的修饰符可能会用到,一个是 readonly
,用于设置属性只读,一个是 ?
,用于设置属性可选。
你可以通过前缀 -
或者 +
删除或者添加这些修饰符,如果没有写前缀,相当于使用了 +
前缀。
// 删除属性中的只读属性
type CreateMutable<Type> = {
-readonly [Property in keyof Type]: Type[Property]
}
type LockedAccount = {
readonly id: string
readonly name: string
}
type UnlockedAccount = CreateMutable<LockedAccount>
// type UnlockedAccount = {
// id: string;
// name: string;
// }
// 删除属性中的可选属性
type Concrete<Type> = {
[Property in keyof Type]-?: Type[Property]
}
type MaybeUser = {
id: string
name?: string
age?: number
}
type User = Concrete<MaybeUser>
// type User = {
// id: string;
// name: string;
// age: number;
// }
类
基础概念
- 类(Class):定义了一件事物的抽象特点,包含它的属性和方法
- 对象(Object):类的实例,通过 new 生成
- 面向对象(OOP)的三大特性:封装、继承、多态
- 封装(Encapsulation):将对数据的操作细节隐藏起来,只暴露对外的接口。外界调用端不需要(也不可能)知道细节,就能通过对外提供的接口来访问该对象,同时也保证了外界无法任意更改对象内部的数据
- 继承(Inheritance):子类继承父类,子类除了拥有父类的所有特性外,还有一些更具体的特性
- 多态(Polymorphism):由继承而产生了相关的不同的类,对同一个方法可以有不同的响应。比如 Cat 和 Dog 都继承自 Animal,但是分别实现了自己的 eat 方法。此时针对某一个实例,我们无需了解它是 Cat 还是 Dog,就可以直接调用 eat 方法,程序会自动判断出来应该如何执行 eat
- 存取器(getter & setter):用以改变属性的读取和赋值行为
- 修饰符(Modifiers):修饰符是一些关键字,用于限定成员或类型的性质。比如 public 表示公有属性或方法
- 抽象类(Abstract Class):抽象类是供其他类继承的基类,抽象类不允许被实例化。抽象类中的抽象方法必须在子类中被实现
- 接口(Interfaces):不同类之间公有的属性或方法,可以抽象成一个接口。接口可以被类实现(implements)。一个类只能继承自另一个类,但是可以实现多个接口
Access Modifiers 访问修饰符
TypeScript 可以使用三种访问修饰符(Access Modifiers),分别是 public
、private
和 protected
。
public
修饰的属性或方法是公有的,可以在任何地方被访问到,默认所有的属性和方法都是public
的private
修饰的属性或方法是私有的,不能在声明它的类的外部访问protected
修饰的属性或方法是受保护的,它和private
类似,区别是它在子类中也是允许被访问的
interface IPoint {
X: number
Y: number
drawPoint: () => void
getDistances: (p: IPoint) => number
}
class Point implements IPoint {
constructor(private _x: number, private _y: number) {}
drawPoint() {
console.log('x:' + this._x, 'y:' + this._y)
}
getDistances(p: IPoint) {
return Math.sqrt((p.X - this._x) ** 2 + (p.Y - this._y) ** 2)
}
get X() {
return this._x
}
set X(value: number) {
if (value < 0) throw new Error('x不能小于0')
this._x = value
}
get Y() {
return this._y
}
set Y(value: number) {
if (value < 0) throw new Error('y不能小于0')
this._y = value
}
}
const p1 = new Point(0, -1)
const p2 = new Point(0, 2)
readonly
readonly 只读属性关键字
class Animal {
readonly name
constructor(name) {
this.name = name
}
}
let a = new Animal('Jack')
console.log(a.name) // Jack
a.name = 'Tom'
// index.ts(10,3): TS2540: Cannot assign to 'name' because it is a read-only property.
注意如果 readonly
和其他访问修饰符同时存在的话,需要写在其后面。
class Animal {
constructor(public readonly name) {
this.name = name
}
}
抽象类
abstract
用于定义抽象类和其中的抽象方法。
什么是抽象类?
首先,抽象类是不允许被实例化的:
abstract class Animal {
constructor(pubilc name) {
this.name = name;
}
abstract sayHi();
}
let a = new Animal('Jack');
// index.ts(9,11): error TS2511: Cannot create an instance of the abstract class 'Animal'.
上面的例子中,我们定义了一个抽象类 Animal
,并且定义了一个抽象方法 sayHi
。在实例化抽象类的时候报错了。
其次,抽象类中的抽象方法必须被子类实现:
abstract class Animal {
constructor(public name) {
this.name = name
}
abstract sayHi()
}
class Cat extends Animal {
eat() {
console.log(`${this.name} is eating.`)
}
}
let cat = new Cat('Tom')
// index.ts(9,7): error TS2515: Non-abstract class 'Cat' does not implement inherited abstract member 'sayHi' from class 'Animal'.
上面的例子中,我们定义了一个类 Cat
继承了抽象类 Animal
,但是没有实现抽象方法 sayHi
,所以编译报错了。
下面是一个正确使用抽象类的例子:
abstract class Animal {
public name
public constructor(name) {
this.name = name
}
public abstract sayHi()
}
class Cat extends Animal {
public sayHi() {
console.log(`Meow, My name is ${this.name}`)
}
}
let cat = new Cat('Tom')
类实现接口
实现(implements)是面向对象中的一个重要概念。一般来讲,一个类只能继承自另一个类,有时候不同类之间可以有一些共有的特性,这时候就可以把特性提取成接口(interfaces),用 implements 关键字来实现。这个特性大大提高了面向对象的灵活性。
举例来说,门是一个类,防盗门是门的子类。如果防盗门有一个报警器的功能,我们可以简单的给防盗门添加一个报警方法。这时候如果有另一个类,车,也有报警器的功能,就可以考虑把报警器提取出来,作为一个接口,防盗门和车都去实现它:
interface Alarm {
alert(): void
}
class Door {}
class SecurityDoor extends Door implements Alarm {
alert() {
console.log('SecurityDoor alert')
}
}
class Car implements Alarm {
alert() {
console.log('Car alert')
}
}
一个类可以实现多个接口:
interface Alarm {
alert(): void
}
interface Light {
lightOn(): void
lightOff(): void
}
class Car implements Alarm, Light {
alert() {
console.log('Car alert')
}
lightOn() {
console.log('Car light on')
}
lightOff() {
console.log('Car light off')
}
}
内置工具类型
ReturnType
returnType
是TypeScript
的一个内置工具类型,用于获取函数返回值的类型。
function f1(s: string) {
return { a: 1, b: s }
}
// typeof 用于获取该函数的类型
type T14 = ReturnType<typeof f1> // { a: number, b: string }
Required
Required
是 TypeScript 中的一个工具类型,用于将给定类型的所有属性转换为必需的(非可选的)属性。
interface Props {
name?: string
age?: number
email: string
}
type RequiredProps = Required<Props>
const obj: RequiredProps = {
name: 'John',
age: 25, // Error: 'age' 属性是可选的,但是在 RequiredProps 中它是必需的
email: 'john@example.com',
}
索引访问类型
在 TypeScript 中,方括号语法可以用于类型索引操作,以从其他类型中获取特定属性的类型。
下面是一个使用方括号语法获取类型的示例:
interface Person {
name: string
age: number
email: string
}
type PersonNameProperty = Person['name'] // string