美文网首页
Typescript 类型体操与关键字extends

Typescript 类型体操与关键字extends

作者: 99ZY | 来源:发表于2023-06-07 21:05 被阅读0次

去掉字符串前后空格 Trim

type TrimLeft<T extends string> = T extends ` ${infer K}` ? TrimLeft<K> : T;
type TrimRight<T extends string> = T extends `${infer K} ` ? TrimRight<K> : T;
type Trimed = TrimLeft<TrimRight<'  Hello World  '>>;

const a: Trimed = 'Hello World';
console.log(a);

字符串替换 Replace

type Replace<S extends string, O extends string, T extends string> = S extends `${infer L}${O}${infer R}`
  ? Replace<`${L}${T}${R}`, O, T>
  : S;

const b: Replace<'12345', '4', 'aaa'> = '123aaa5';
console.log(b);

递归创建指定数组 CreateArray

type CreateArray<T, L extends number, Arr extends T[] = []> = Arr['length'] extends L
  ? Arr
  : CreateArray<T, L, [T, ...Arr]>;
const c: CreateArray<{ name: 222 }, 2, [{ name: 222 }]> = [{ name: 222 }, { name: 222 }];
console.log(c);

指定长度的数组类型 CreateArrayByLength

type Arr<T, L extends number> = [T, ...Array<T>] & { length: L };

const d: Arr<{ name: '222' } | string, 3> = [{ name: '222' }, { name: '222' }, '1111'];
console.log(d);

数组值的类型----ReturnArrElementType-1

type MyArray = [string, number, boolean];
type ReturnArrElementType = MyArray[keyof MyArray & number];
const gg: ReturnArrElementType = '123';
console.log(gg);

数组值的类型----ReturnArrElementType-2

type ReturnArrElementType = {
  [K in keyof MyArray]: MyArray[K];
}[number];
const hh: ReturnArrElementType = '123';
console.log(hh);

对象值的类型 ReturnObjValType

type MyObj = {
  name: string;
  gg: boolean;
  ss: 123;
  age: number;
};
type ReturnObjValType = MyObj[keyof MyObj];
const ii: ReturnObjValType = false;
console.log(ii);

extends 关键字

有两种用法:

  1. 类继承:用于表示类之间的继承关系,子类继承父类的属性和方法。
  2. 类型关系:用于表示类型之间的关系,一个类型是否是另一个类型的子类型。

两个例子:

type A = {name:string;age:number} extends {name:string} ? true : false;
type B = 'a' extends 'a'|'b' ? true : false;

第一个例子中{name:string;age:number} 表示一个对象类型,它包含 nameage 两个属性。{name:string} 也表示一个对象类型,但它只包含 name 属性。extends 关键字在这里的作用是判断左边的类型是否是右边的类型的子类型。由于左边的类型包含右边的类型的所有属性,因此左边的类型是右边的类型的子类型。因此,A 的类型是 true

第二个例子中'a' 是一个字符串字面量类型,它只包含一个值 'a''a'|'b' 是一个联合类型,它包含两个字符串字面量类型 'a''b'extends 关键字在这里的作用是判断左边的类型是否是右边的类型的子类型。由于 'a''a'|'b' 中的一个,因此左边的类型是右边的类型的子类型。因此,B 的类型是 true

总之,extends 关键字在 TypeScript 中可以用于表示类之间的继承关系,也可以用于表示类型之间的关系。

相关文章

网友评论

      本文标题:Typescript 类型体操与关键字extends

      本文链接:https://www.haomeiwen.com/subject/pcroedtx.html