第一阶段.模块二:学习笔记-TypeSrcipt的高阶特性二

432 阅读5分钟

上一篇:第一阶段.模块二:学习笔记-TypeSrcipt的高阶特性一

ts 中的高阶类型(2)

1-this 类型

在类中的方法内,返回this,this就是当前类的实例对象,这样可以实现链式调用

父类

image.png

子类

image.png

在类中的方法内,返回this,this就是当前类的实力对象,这样可以实现链式调用,子类可以调佣父类的方法

2-索引类型
2-1 索引类型查询操作符-->keyof

keyof 连接的是一个类型,返回一个由这个类型所有属性名组成的联合类型

interface info {
  name: string
  age: number
}
// 定义变量,变量类型是上面的接口类型
let myest: keyof info //变量类型let myest: "name" | "age"
// 为变量赋值
myest = 'name'
myest = 'age'
myest = 'sex'// 不能将类型“"sex"”分配给类型“"name" | "age"”。

2-2 索引访问操作符--> []
interface info {
  name: string
  age: number
}
// 定义变量,变量类型是上面的接口类型的name属性对应的类型
let myest: info['name'] // 类型是:let myest: "name" 

myest = '1232'
myest = '456'
myest = 16 // 不能将类型“16”分配给类型“string”。

3-映射类型
3-1 基础

借助旧类型创建新类型
ts 内置的映射类型:Partial 是可选类型、Readonly 是只读类型
ts 内置的映射类型:Pick 是返回对象中的一部分数据、Record 是把对象中的每一个值变成其他值
Record 不是同态的, Partial、Readonly、Pick 是同态的


interface Qwd {
  age: number
  name: string
  sex: string
}
// 定义映射类型
type ReadonlyType<T> = {
  readonly [P in keyof T]: T[P] // 和for... in 类似 T是数组 P是里面的每一项item
}
// 定义一个新的类型
type ReadonlyTypeInfo1 = ReadonlyType<Qwd>
//ReadonlyTypeInfo1的类型就是:
//type ReadonlyType = {
    //readonly age: number;
    //readonly name: string;
    //readonly sex: string;
//}
// 使用新的类型
let typeInfo11: ReadonlyTypeInfo1 = {
  age: 18,
  name: '小明',
  sex: '男'
  // sex:0 // 不能将类型“number”分配给类型“string”
}
// typeInfo11.age = 20 // Cannot assign to 'age' because it is a read-only property.

Pick的实现原理

image.png

Readonly的实现原理

image.png

Record的实现原理

image.png

3-2 由映射类型进行推断


3-3 增加或移出特定修饰符--> + 或者 -
interface TestInterface {
    name: string;
    age: number;
}

// 增加只读和可选属性
type TestType<T> = {
    +readonly [P in keyof T]+?: T[P];
}

type test = TestType<TestInterface>;
//type test = {
//    readonly name?: string;
//    readonly age?: number;
//}

// 删除只读和可选属性
type UnMyType<T> = {
    -readonly [P in keyof T]-?: T[P];
}

type test2 = UnMyType<test>;
//type test2 = {
//    name: string;
//    age: number;
//}

3-4keyof 和 映射类型在 2.9 的升级

keyof 和 映射类型 是支持number 和symbol命名的属性的

image.png

image.png

3-5 元组和数组上的映射类型-->生成新的元组和数组

image.png

3-6 unknown 3.0新增的

相对于any类型是安全的,可以看成是比较安全的any类型

1、任何类型都可以赋值为unknown类型

let value1:unknown
value1= '111'
value1= 123

2、如果没有类型断言或者基于控制流的类型细化时, unknown 不可以赋值给其他类型,此时它只能 unknown 和 any 类型

let value1:unknown
value1= '111'
value1= 123

let value2:unknown

let value3:string = value2 // 报错:不能将 unknown 类型 赋值给 string类型
value1 = value2 // 是可以的

3、如果没有类型断言或者基于控制流的类型细化时,不能在它上面进行任何的操作

let value1:unknown
value1 +=1 // 报错

4、unkonwn类型与任何其他类型组成的交叉类型,最后都等于其他类型

type type1 = string & unkonwn // type1是string类型
type type1 = number & unkonwn // type1是number类型
type type1 = unkonwn & unkonwn // type1是unkonwn类型
type type1 = string[] & unkonwn // type1是string[]类型

5、unkonwn类型与任何其他类型(除any是any外)组成的联合类型,最后都等于 unknown 类型

type type1 = string | unkonwn // type1是unkonwn类型
type type1 = number | unkonwn // type1是unkonwn类型
type type1 = unkonwn | unkonwn // type1是unkonwn类型
type type1 = string[] | unkonwn // type1是unkonwn类型
type type1 = any | unkonwn // type1是any类型

6、never类型是unknown的子类型

type type1 = never extends unknown ? true :false  // true

7、keyof unknown 等于类型never

type type1 = keyof unknown  // never

8、只能对 unknown 类型的值 进行等或者不等 操作,不能进行其他操作

type type1 = keyof unknown  // never

9、只能对 unknown 类型的值 不能访问它的属性、不能作为函数的调用、不能作为类创建实例

10、使用映射类型时,如果遍历的是unknown类型,则不会映射任何属性

image.png

4-条件类型==>2.8新增的

相当于js中的三目运算符/三元表达式
T extends U ? X : Y

4-1 基础
type valueType<T> = T extends string ? string : number 

let value:valueType<'123'> // string类型
let value2:valueType<123> // number类型

4-2 分布式条件类型

当待检测的类型是联合类型的时候,该条件类型就是分布式条件类型

image.png

image.png

4-3 条件类型的类型推断-infer

image.png

4-4 TS 预定义条件类型

Exclude<T, U> 返回T类型不在U类型中的类型,是个联合类型

Exclude的实现原理:

image.png


type Type1 = Exclude<'a' | 'b' | 'c', 'a'> // 'b' | 'c'的联合类型

Extract<T, U> T类型中可以赋值给U的类型的类型,是个联合类型

Extract的实现原理:

image.png


type Type1 = Extract<'a' | 'b' | 'c', 'a' | 'b'> // 'a' | 'b'的联合类型

NonNullable<T> 去掉T类型中的null类型和undefined类型


type Type1 = NonNullable<string | number| null | undefined> // string | number的联合类型

ReturnType<T> 获取函数类型的返回值类型


type Type1 = ReturnType<()=>string> // Type1的类型是string
type Type1 = ReturnType<()=>void> // Type1的类型是void

InstanceType<T> 获取构造函数类型的实例类型

image.png

下一篇:第一阶段.模块二:学习笔记-TypeSrcipt的装饰器