TypeScript 高级类型

TypeScript 高级类型

1. class 类

2. 类型兼容性

3. 交叉类型

4. 泛型 和 keyof

5. 索引签名类型 和 索引查询类型

6. 映射类型

class 类

class Person {
    age: number //不加类型 默认为 any 类型
    gender = '男'
}
const p = new Person()

属性初始化

p.age
p.gender
// new Person(18, '男')

class 构造函数

class Person1 {
    age: number
    gender: string
    constructor(age: number, gender: string) {
        this.age = age
        this.gender = gender
    } //构造函数 -- 构造函数不能写返回值类型
}
const p1 = new Person1(18, '男')
console.log(p.age, p.gender);

class 实例方法

class Point {
    x = 1
    y = 2
​
    scale(n: number) {
        this.x *= n
        this.y *= n
    }
}
const p2 = new Point()

class 继承 - extends | implements

class Animal {
    move() {
        console.log('move');
    }
}
class Dog extends Animal {
    name = 'name'
    break() {
        console.log('break');
​
    }
}
const dog = new Dog()
​
​
interface Single {
    sing(): void
}
class Person2 implements Single {
    // 接口中定义了什么，调用接口时就要实现这些定义
    sing(): void {
        console.log('sing');
    }
}

class 类常见的修饰符 - 可见性修饰符：public | protected | private ;只读修饰符：readonly

// 成员可见性 -- public | protected | private
class Animal1 {
    // public | protected | private move1() {}
}
​
// readyonly 只读修饰符，只能修饰属性不能修饰方法 -- 接口 or 对象也可用
class Person3 {
    // 只要是 readonly 修饰的属性，必须手动添加类型
    readonly age: number = 18
    constructor(age: number) {//只有 constructor 才能改变只读属性的值
        this.age = age
    }
}
​
// 接口中 使用 readonly
interface IPerson {
    readonly name: string
}
let obj: IPerson = {
    name: 'jack'
}
// obj.name = 'rose' 因为是只读属性，不能修改 name 属性的值
​
// 对象的方式
let obj1: { readonly name: string } = {
    name: 'jack'
}

类型兼容性

有两种类型系统：

• 结构化类型系统 Structural Type System

  • TypeScript 采用结构化类型系统，也叫做ducktyping（鸭子类型），类型检查关注的是所具有的形状

class Point2 { x: number; y: number }
class Point2D { x: number; y: number }
const p4: Point2 = new Point2D()

• 标明性类型系统 Nominal Type System

  • 例如 java \ c#,不同的类，类型无法兼容

对象之间的类型兼容性

// 对于对象类型来说，y成员至少与x相同，则x兼容y
class Point3D { x: number; y: number; z: number }
const p5: Point2 = new Point3D()

 

接口之间的类型兼容性

接口之间的兼容性，类似于 class，并且 class 和 interface 之间也可以兼容。

interface Point { x: number, y: number }
interface Point2D { x: number, y: number }
interface Point3D { x: number, y: number, z: number }
let p1: Point
let p2: Point2D
let p3: Point3D
​
p1 = p2    p2 = p1    p1 = p3 // 正确演示
p3 = p1 // 错误演示
​
// class类和接口之间也是可以兼容的
class Point 4D { x: number; y: number; z: number }
p2 = new Point4D()    

 

函数之间的类型兼容性

函数之间兼容性比较复杂，需要考虑👇三个点：

• 参数个数

  • 参数多的兼容参数少的（参数少的可以赋值给多的）

• 参数类型

  • 相同位置的参数类型要相同（原始类型）或兼容（对象类型）

• 返回值类型

  • 返回值类型只关注返回值类型本身即可

// 参数个数：参数少的可以赋值给参数多的
type F1 = (a: number) => void
type F2 = (a: number, b: number) => void
let f1: F1
let f2: F2
f2 = f1 // 正确演示
f1 = f2 // 错误演示
​
// 参数类型：原始类型 | 对象类型
//原始类型
type F1 = (a: number) => void
type F2 = (a: number) => void
let f1: F1
let f2: F2
f1 = f2 
f2 = f1
// 对象类型：将对象拆开，把每个属性看做一个个参数
interface Point2D { x: number, y: number }
interface Point3D { x: number, y: number, z: number }
type F2 = (p: Point2D) => void //相当于有 2 个参数
type F2 = (p: Point3D) => void //相当于有 3 个参数
let f2: F2
let f3: F3
f3 = f2 // 正确演示
f2 = f3 // 错误演示
​
//返回值类型：原始类型 | 对象类型
//原始类型
type F5 = () => string
type F6 = () => string
let f5: F5
let f6: F6
f5 = f6    f6 = f5 // 正确演示
​
//对象类型：成员多的可以赋值给成员少的
type F7 = () => { name: string )
type F6 = () => { name: string; age: number }
let f7: F7
let f8: F8
f7 = f8 // 正确演示
f8 = f7 // 错误演示

交叉类型

交叉类型（&）：功能类似于接口继承（extends)，用于组合多个类型为一个类型（常用于对象类型）。

使用交叉类型后，新的类型就同时具备了所有的属性类型。

interface Person { name: string, say(): number ) }
interface Contact { phone: string }
type PersonDetail = Person & Contact
let obj: PersonDetail = { name: 'jack', phone: '133...', say(){ return 1 } }

 

交叉类型（&）和接口继承（extends）的对比：

• 相同点：都可以实现对象类型的组合

• 不同点：两种方式实现类型组合时，对于同名属性之间，处理类型冲突的方式不同

// 对比
interface A { fn: (value: number) => string }
interface B extends A { fn: (value: string) => string } // 错误，接口B 不能 继承 接口A 
​
interface A { fn: (value: number) => string }
interface B { fn: (value: number) => string }
type C = A & B //接口A、B 的类型都能用
let c: C = { fn(value: number | string) { return '' }}
​
let c: C
c.fn(1)    c.fn('a')

 

泛型 和 keyof

泛型是可以在保证类型安全前提下，让函数等与多种类型一起工作，从而实现复用，常用于：函数、接口、class中。

泛型在保证类型安全（不丢失类型信息）的同时，可以让函数等与多种不同的类型一起工作，实现复用。

泛型的基本使用

1. 语法：在函数名称后面添加<>（尖括号），尖括号中添加类型变量，例如👇下面代码的 Type

2. 类型变量 Type，是一种特殊类型的变量，它处理类型而不是值

3. 该类型变量相当于一个类型容器，能够捕获用户提供的类型（具体类型由用户调用该函数时指定）

4. 因为 Type 是类型，因此可以将其作为函数参数和返回值的类型，表示参数和返回值具有相同的类型

5. 类型变量 Type，可以是任意合法的变量名称

调用泛型函数

1. 语法：在函数名称的后面添加<>（尖括号），尖括号中指定具体的类型，比如👇下面的 number

2. 当传入类型 number 后，这个类型就会被函数声明时指定的类型变量 Type 捕获到

3. 此时，Type 的类型就是 number ，所以函数 id 参数和返回值的类型也都是 number

这样通过泛型就做到让 id 函数与多种不同的类型一起工作，实现了复用的同时保证了类型的安全

// 用泛型创建一个函数
function id<type>(value: Type):Type { return value }
​
// 调用泛型函数
const num = id<number>(10)
const str = id<string>('a')
const ret = id<boolean>(false)    
// 简化调用泛型函数 - 类型是 字面量类型 不影响功能
const num = id(10)
const str = id('a')
const ret = id(false) 

 

泛型约束

在默认情况下，泛型函数的类型变量 Type 可以代表多个类型，这导致无法访问任何属性，就需要为泛型添加约束来收缩类型（缩窄类型取值范围）

添加泛型约束收缩类型，有两种方式：

1. 指定更加具体的类型

2. 添加约束 - 使用 extends 关键字 使用该接口，为泛型添加约束

// 指定更加具体的类型
function id<type>(value: Type[]):Type[] { value.length return value }
​
// 添加约束 
interface Ilength { length: number }
function id<type extends Ilength>(value):Type { value.length return value }
id(['a','b'])    id('ab')    id({ length: 10, name: 'jack' })
id(123) //错误演示

多个泛型变量

泛型的类型变量可以有多个，并且类型变量之间还可以约束

1. 添加了第二个类型变量 key，两个类型之间只用（，）逗号分隔

2. keyof 关键字接收一个对象类型，生成其键名称（可能是字符串或数字）的联合类型

3. 下面👇 keyof Type 实际上获取的是 person 对象所有键的联合类型

4. 类型变量 key 受 Type 约束，可以理解为：key 只能是 Type 所有键中的任意一个，或者说只能访问对象中存在的属性

function getProp<Type, Key extends keyof Type>(obj: Type, key: Type){ return obj[key] }
​
getProp({ name: 'jack', age: 18 }, 'age')
getProp({ name: 'jack', age: 18 }, 'name')
getProp({ name: 'jack', age: 18 }, 'age1')    //错误演示
getProp(18, 'toFixed')
getProp('abc', 'toFixed')
getProp('abc', 1)    //此处 1 表示索引
getProp(['a'], 'length')
getProp(['a'], 1000)

泛型接口

接口可以配合泛型来使用，以增加其灵活性，增强其复用性

实际上 js 数组在 ts 中就是一个泛型接口

1. 在接口名称后面添加<类型变量>，那么，这个接口就变成了泛型接口

2. 接口的类型变量，对接口中所有其他成员可见，也就是所有成员都可以使用类型变量

3. 使用泛型接口时，需要显示指定具体的类型（例如：👇 IdFunc）

4. 此时，id 方法的参数和返回值类型都是 number；ids 方法的返回值类型是 number[]

interface IdFunc<Type>{ 
    id: (value: Type) => Type 
    ids:() => Type[] 
}
let obj: IdFunc<number> = { id(value) {return value }, ids() { return [1,2,3] }}

泛型类

class 也可以配合泛型来使用。

interface IState { count: number }
interface IProps { maxLength: number }
class InputCount extends React.Component<Iprops, IState>{
    state: IState = { count: 0 }
    render() { return <div>{ this.props.maxLength }</div> }
}
​
// 创建泛型类
calss GenericNumber<NumType> {
    defaultValue: NumType
    add: (x: NumType, y: NumType) => NumType
    
    constructor(value: Number) { this.defaultValue = value } //添加这个，就可以省略写法 const myNum = new GenericNumber(10)
} 
const myNum = new GenericNumber<number>()
myNum.defaultValue = 10

泛型工具类型

泛型工具类型：是 TS 内置了一些常用的工具类型，来简化 TS 中的一些常见操作。

它们都是基于泛型实现的（泛型适用于多种类型，更加通用），并且是内置的，可以直接在代码中使用。

常用的泛型工具类型有4种：

1. Partial ：用来构造（创建）一个类型，将 Type 的所有属性设置为可选。

2. Readonly：用来构造一个类型，将 Type 的所有属性设置为只读。

3. Pick：从 Type 种选择一组属性来构造新类型。

4. Record：构造一个对象类型，属性键为 Keys，属性类型为 Type。

// Partial<Type>
interface Props { id: String, children: number[] }
type PartialProps = Partial<Props>
let p1: Props = { id: '', children: [1] }
let p2: PatialProps = { id: '', children: [1, 3] }
​
// Readonly<Type>
type ReadonlyProps = Readonly<Props>
let props: ReadonlyProps = { id: '1', children: [] }
props.id = '2' // 错误演示，因为是只读
​
// Pick<Type, Keys>
interface Props { id: String, title: string, children: number[] }
type PickProps = Pick<Props, 'id' | 'title'>
​
// Record<Keys, Type>
type RecordObj = Record<'a' | 'b' | 'c', string[]>
let obj: RecordObj = {
    a: ['1'],
    b: ['2'],
    c: ['3']'
}

索引签名类型 和 索引查询类型

索引签名类型

使用场景：当无法确定对象种有哪些属性（对象中可以出现任意多个属性）

1. 使用 [key: string] 来约束该接口中允许出现的属性名称。表示只要是 String 类型的属性名称，都可以出现在对象中，

2. 这样，对象 obj 中就可以出现任意多个属性。

3. key 只是一个占位符，可以换成任意合法的变量名称。

4. 隐藏的前置知识：JS 对象 （{}） 的键是 string 类型的。

JS 中数组是一类特殊的对象，特殊在数组的键（索引）是数值类型。

数组也可以出现任意多个元素，所以，在数组对应的泛型接口中，也用到了索引签名类型。

interface AnyObject { [key: string]: number } //能够接收任意属性的类型
let obj: AnyObject = { a: 1, abc: 124 }
​
// 模拟数组
interface MyArray<Type> { [index: number]: Type }
let arr: MyArray<number> = [1, 2, 3]

映射类型

基于旧类型创建新类型（对象类型），减少重复、提升开发效率。

映射类型创建类型：

• 联合类型

• 映射类型是基于索引签名类型的，所以，该语法类似于索引签名类型，也使用了 []。

• key in PropKeys 表示 key 可以是 PropKeys 联合类型中的任意一个，类似于 forin(let k in obj)。

• 使用映射类型创建的新对象类型 Type2 和 类型 Type1 结构完全相同。

• 注意：映射类型只能在类型别名中使用，不能在接口中使用

• 对象类型

• 首先执行 keyof Props 获取到对象类型 Props 中所有的键的联合类型。

• 然后 Key in ... 就表示 Key 可以是 Props 中所有的键名称中的任意一个。

泛型工具类型都是基于映射类型实现的。

// 联合类型
type Props = 'x' | 'y' | 'z'
type Type1 = { x: number; y: number; z: number }
// ↑ 使用映射类型，简化类型书写 ↓
type PropKeys = 'x' | 'y' | 'z' 
type Type2 = { [Key in PropKeys]: number } 
​
//对象类型
type Props = { a: number, b: string; c: boolean }
type Type3 = { [key in Keyof Props]: number }
​
// 泛型 Partial<type> 举例
type Partial<T> = { [P in keyof T]?: T[p] }
type Props = { a: number; b: string; c: boolean }
type PartialProps = Partial<Props>
1.keyof T 即 keyof Props 表示获取Props 的所有键，也就是：'a'|'b'|'c'
2.在 [] 后面添加 ？ 问号，表示将这些属性变为可选的，以此来实现 Partial 功能。
3.冒号后面的 T[p] 表示获取 T 中每个键对应的类型。比如，如果是 'a' 则类型是 number; 如果是 'b' 则类型是 string。
4.最终，新类型 PartialProps 和旧类型 Props 结构完全相同，只是让所有类型都变为可选了。

索引查询类型

👆 T[P] 语法，在 TS 中叫做索引查询（访问）类型。

作用：用来查询属性的类型。

索引查询类型的其他使用方式：同时查询多个索引的类型

type Props = { a: number; b: string; c: boolean }
type TypeA = Props['a']
// Props['a'] 表示查询类型 Props 中属性 'a' 对应的类型 number。所以，TypeA 类型为 number。
注意：[] 中的属性必须存在于被查询类型中，否则就会报错。
​
// 同时查询多个类型
type TypeA = Props['a' | 'b'] //使用字符串字面量的联合类型，获取属性a 和 b对应的类型，结果为：string | number
type TypeA = Props[keyof Props] //使用 keyof 操作符获取 Props 中所有键对应的类型，结果为：string | number | boolean