ts中的类型
function formatArr<T>(arr:Array<T>):Array<T>{
return arr.map(item=>item);
}
T 表示一个声明:声明我要使用泛型了
基于接口约束
interface Slice {
slice:Function
}
function formatArr<T extends Slice>(arg:T):T{
return arg.slice(1)
}
在泛型约束extends并不表示继承，表示约束；接口里则表示继承
function createArray<T = string>(length:number,value:T) :Array<T>{} 泛型可以有默认值
interface GenericIdentityFn<T> {
(arg: T): T;
}
interface GenericIdentityFn {
<T>(arg: T): T;
} //与上面区别在于作用于整个接口还是某个值
class GenericNumber<T> {
// 报错 Static members cannot reference class type parameters.
static zeroValue: T;
} //类型参数仅适用于类中的实例成员，静态成员无法使用类型参数，例如：
泛型的理解：单一的，明确的类型约束理解起来相对简单，可是实践中我们需要对约束稍微放宽一点限制，那么单一的约束就无法满足需求。泛型，即为更广泛的约束类型。
模拟数据返回结果
interface Result<T> {
success: true,
code: number,
descript: string,
result: T
}
结合Promise，当数据返回结果为number时
Promise本身就需要接受一个泛型变量，因此这里要注意泛型的嵌套使用
function fetchData(): Promise<Result<number>> {
return http.get('/api/demo/number');
}
interface Person {
name: string,
age: number
}
当数据返回结果为普通JSON数据时
function fetchData(): Promise<Result<Person>> {
return http.get('/api/demo/person');
}
当数据返回为数组时
interface Person {
name: string,
age: number
}
function fetchData(): Promise<Result<Person[]>> {
return http.get('/api/demo/persons');
}
当返回结果为分页对象时
interface Person {
name: string,
age: number
}
interface Page<T> {
current: number,
pageSize: number,
total: number,
data: T[]
}
function fetchData(): Promise<Result<Page<Person>>> {
return http.get('/api/demo/page/person');
}
typescript 入门-工具类型
keyof 对象键类型
type _Object = { [key: string]: unknown }
function getKeysByObj<T extends _Object>(o: T): (keyof T)[]{
return Object.keys(o)
}
const a = {
name: 'a',
age: 12
}
const aKeys = getKeysByObj(a)
// aKeys: ('name' | 'age')[]
const b = {
1: 'b',
2: 20
}
const bKeys = getKeysByObj(b)
// bKeys: (1|2)[]
typeof 值类型
const a = {
name: 'a',
age: 23
}
// 通过 typeof b 获取 a的类型定义
const b: typeof a = {
name: 'b',
age: 10
}
/**
* a 类型定义
* {
* name: string,
* age: number
* }
*/
// 获取函数定义
function random(n: number): number{
return Math.random() * n
}
type Random = typeof random
// (n:number) => number
Partial<T> 转为可选参数
interface Man {
name: string,
age: number
}
// 将Man的所有属性改为可选
type ManCopy = Partial<Man>
const cache: ManCopy = {}
// ManCopy { name?: string, age?: number }
Required<T> 将属性全转为必填
interface Data {
id: string
type?: string
}
type FullData = Required<Data>
const fd: FullData = {
id: 'xx',
type: 'su'
}
Record<K, T> 定义 K 为键， T 为值的映射类型
type keys = 'name' | 'job' | 'age'
type Man = Record<keys, string>
const m: Man = {
name: 'm',
job: 't',
age: '10',
}
/**
* {
* name: string,
* job: string,
* age: string
* }
*/
Pick 提取指定属性,生成新类型
interface Man {
id: string
name: string
age: number
job: string
birth: string
address: string
}
// 提取指定属性类型
type ManIt = Pick<Man, 'name' | 'age' | 'job'>
const m: ManIt = {
name: 'm',
age: 25,
job: 'tt'
}
/**
* {
* name: string,
* age: number,
* job: string
* }
*/
Omit 删除指定属性，生成新类型
type A = 'color' | 'width' | 'height'
type B = {
name: string
width: number
height: number
}
type C = Omit<B, A>
// { name: string }
Exclude<K, T> 联合类型取 K，T 的差集
interface A{
name: string
color: string
}
interface B{
name: string,
width: number
}
type keys = Exclude<keyof A, keyof B>
type C = Record<keys, string>
const c: C = {
color: 'orange'
}
/**
* {
* color: string
* }
*/
Extract<A, B> 联合类型取 A， B的并集
type A = 'color' | 'width' | 'height'
type B = 'name' | 'height'
type C = Extract<A, B>
// "height"
NonNullable 过滤类型内的 null 、 undefined、never
type A = 'data' | null | undefined | never
type B = NonNullable<A>
// type "data"
type T1 = NonNullable<null>
// never
type T2 = NonNullable<undefined>
// never
type T3 = NonNullable<never>
// nerver
type T4 = NonNullable<any>
// any
type T5 = NonNullable<string>
// string
Parameters<FN> 获取函数参数类型元组
从类型推导功能来看，泛型功能非常强大，我们可以用泛型描述调用时才传入的类型，并提前将它描述在类型表达式中：
