搜索

Typescript --- 进阶语法


发布时间: 2022-11-24 19:29:01    浏览次数:42 次

进阶类型

  1. 类型别名
    类型别名用来给一个类起个新名字
type Name = string;
type NameResoleve = () => string
type NameOrResolve = Name | NameResoleve
function getName(n: NameOrResolve): Name {
  if (typeof n == 'string') {
    return n
  }else{
    return n()
  }
}
  1. 联合类型 通过 | 来联合
    只能访问联合类型中 所有类型中都有的属性
  2. 交叉类型 通过 & 来联合
    将多个类型合并为一个类型,包含了所有类型中的特性
interface Iperson {
  id: string;
  age: number;
}
interface Iworker {
  companyId: string;
}
type Istaff = Iperson & Iworker

上面新生成的类型, 就相当与定义了

interface Istaff {
  id: string;
  age: number;
  companyId: string;
}
  1. 字符串字面量
    用来约束取值只能是字符串中某几个中的一个
type EventNames = 'click' | 'scroll' | 'mousemove'
function handleEvent (ele: Element, event: EventNames) {

}
handleEvent(document.getElementById('id'), 'click')
  1. 类型断言
    手动指定一个值的类型
let someValue: any = 'i am string'
let stringLength: number = (<string>someValue).length
等价于
let stringLength: number = (someValue as string).length

可以将父类断言为一个更加具体的子类

class apiError extends Error {
  code: number = 0
}
class httpError extends Error {
  statusCode: number = 200
}
function isApiError (error: Error) {
  if (typeof (error as apiError).code == 'number') {
    return true
  }
  return false
}
  1. 操作符
  • typeof 获取一个变量申明或者一个对象的类型
interface Person {
  name: string;
}
const tom: Person = {name: 'tom'}
type Tom = typeof tom // --> Person

function toArray (x: number): Array<number> {
  return [x]
}
type Func = typeof toArray // (x: number) => number[]
  • keyof 获取一个类型中所有的key
interface Person {
  name: string;
  age: number;
}
type k1 = keyof Person // 'name' | 'age'

const me: Person = {name: 'name', age: 16}
type PersonKey = keyof typeof me // 'name' | 'age'
  • in 遍历类型
type Keys = 'a' | 'b'
下面遍历这个联合类型
type Obj = {
  [p in keys]: number
}
// -> {a: number; b: number}
  • 可选操作符 ?:
  1. 泛型

泛型是指在定义函数, 接口, 类的时候,不预先指定类型,而在使用的时候再指定类型的一种特性

function merge<T> (a: T, b: T): T[] {
  return [a, b]
}
merge<string>('a', 'b') 
// 这里显示的定义了 T 是 string 那就是定义了 a, b ,以及返回的数组中都是 string

merge(1,2)
// 这里是隐式定义了 T 是 number

merge<number>('a', 1) 
// 这里就会报错了

多个类型参数, 就是用多个参数来定义类型

function swap<T, U>(tuple: [T, U]): [U, T] {
  return [tuple[1], tuple[0]]
}

泛型约束

在不知道 泛型的类型的时候,不能随便去使用属性, 如果要使用的话,需要告诉泛型 ,他属于某种约束,这样就可以使用约束的属性

interface lengthwise {
  length: number;
}
function loggingIdenticy<T extends lengthwise> (arg: T): T {
  console.log(arg.length)
  return arg
}

这样就限制了 传递的参数,必须要满足 lengthwise 的约束

泛型接口

在定义接口的时候,不指定具体的类型, 在定义的时候,将类型传递给接口

interface Person<T> {
  name: T
}
const tom: Person<string> = {name: 'zhangsan'}
const jerry: Person<number> = {name: 33}

泛型类

class GenericNumber<T> {
  zeroValue: T;
  add: (x: T, y: T) => T
}
let myGenericNumber = new GenericNumber<number>()
myGenericNumber.zeroValue = 0
myGenericNumber.add = (x, y) => {return x + y}
  1. 条件类型
    语法表达式 比较像 三元运算符
type isString <T> = T extends string ? true: false
type T1 = isString<'a'>
type T2 = isString<1>
type T3 = isString<1 | 'a'>

传入的参数 满足是 string 就返回 true 否则返回 false
第三种方式传入的参数 会分别判断, 返回 true | false 就是 boolean
9. 条件推断
在条件类型语句中,可以使用infer 申明一个类型变量并且对他进行使用

type getType<T> T extends {a: infer U} ? U : never

type T1 getType<{a: string}> //string
getType 接收的参数类型 符合 {a: infer U} ,在这里 不管a 是什么类型, 只要满足这个结构就可以, 返回的就是 a 的类型

type T2 getType<number> // never
在这里 不满足 {a: infer U} 所以返回的是 never

type T3 getType<{a: number; b: string}> // number

应用场景 :使用条件推断 来获取数组元素类型

type unpack<T> = T extends (infer U)[] ? U : never
type T1 = unpack<number[]> // number
type T2 = unpack<string[]> // string

获取函数返回类型

type returnType<T> = T extends (...arg: any[]) => infer U ? U : never

获取函数参数类型

type Parameters<T extends (...args: any) => any> = T extends (...args: infer U) => any ? U : never
  1. 内置类型
  • 根据一个定义好的类型,将该类型中的key 修改为可选参数
type Partial <T> {
  [p in keyof T]?: T[P]
}
type Animal = {
  name: string;
  age: number;
  eat: () => number
}
type PartOfAnimal = Partial<Animal>
const ww: PartOfAnimal = {name: 'ww'}
  • 将传入的类型都变为必选属性, 包括可选属性
type Required<T> = {
  [p in keyof T]-?: T[p]
}
  • 只把传入的属性获取出来,作为一个类返回
type Pick <T, K extends keyof T> {
  [p in K]: T[P]
}
type Animal = {
  name: string;
  age: number;
  eat: () => number
}
const bird: Pick<Animal, 'name' | 'age'> = {name: 'zs', age: 23}

下一篇将继续介绍 高级用法

免责声明 Typescript --- 进阶语法,资源类别:文本, 浏览次数:42 次, 文件大小:-- , 由本站蜘蛛搜索收录2022-11-24 07:29:01。此页面由程序自动采集,只作交流和学习使用,本站不储存任何资源文件,如有侵权内容请联系我们举报删除, 感谢您对本站的支持。 原文链接:https://www.cnblogs.com/buxiugangzi/p/16915786.html