当前位置：首页 > news >正文

TypeScript技能总结(三)

news 2025/7/9 4:09:30

typescript是js的超集，目前很多前端框架都开始使用它来作为项目的维护管理的工具，还在不断地更新，添加新功能中，我们学习它，才能更好的在的项目中运用它，发挥它的最大功效

//泛型 => 参数和返回值类型相同

//泛型的声明方式:
//语法：在函数名称后面添加<>,里面添加类型变量，比如下面T
//类型变量T,是一种特殊类型的变量，它处理类型而不是值
//该类型变量相当于一个类型容器，能够捕获用户提供的类型（具体是什么类型，由用户调用该函数时指定）
//因为T是类型，因此可以将其作为函数参数和返回值的类型，表示参数和返回值具有相同的类型
//变量类型type，可以是任意合法的变量名称

function id<T>(name: T): T {return name
}let num = id<number>(10)
let str = id<string>('a')
//调用的时候可以省略类型<>
let num1 = id(200)

//泛型约束
//number上就没有length属性
//此时就需要为泛型添加约束来收缩类型（缩窄类型取值范围）
//1.指定更加具体的类型

// function getId<T>(value: T): T {//之类会报错
//     console.log(value.length)
//     return value
// }// getId('zzzzzzzzz')
// getId(333333)function getId<T>(value:T[]): T[] {console.log(value.length)return value
}

//2.添加约束,是只最类型变量T进行约束

interface ILength {length:number
}
//该约束表示，传入的类型必须有length属性
function getIds<T extends ILength>(value:T):T {console.log(value.length)return value
}getIds<string>('11111111111111')
getIds([1,2,3,4,54])//错误演示
getIds(10)

//类型变量可以有多个，并且类型变量之间还可以相互约束
//keyof后面接收对象类型，生成键名，不是接收对象值

function getProps<T, K extends keyof T>(obj: T, key: K) {return obj[key] 
}let obj = {name: 'gaofeng',age:20
}getProps(obj, 'name')
getProps(obj, 'age')
getProps(18,'toFixed')//错误演示
getProps(obj, 'sex')
type c = keyof obj

//泛型接口

interface IdFunc<T>{ID: (value: T) => Tids: () => T[]
}let obj: IdFunc<number> = {ID(value) {return value},ids() {return []}
}obj.ID(1111)
```js//泛型数组
```js
const arr = ['1', '2']
arr.forEach

//泛型类

class Foo<T>{defaultValue: Tadd: (x: T, y: T) => T constructor(value: T) {this.defaultValue = value}
}
// const myNums = new Foo<number>(200)
const myNums = new Foo(200)myNums.defaultValue = 40
myNums.add(10,20)

//泛型工具类
//Partial 将所有属性设置为可选,构建出一个新的类型
//Readonly 将所有的属性设置为只读,构建出一个新的类型
//Pick 从Type中选择一组属性来构造新的类型
//Record构造一个对象类型，属性键为对象类型keyskeys,属性类型为Type

interface Props {id: string,children:number[]
}//错误演示let obj: Props = {id: '11111'//此处没加chichildren属性会报错
}type PartialProps = Partial< Props >//这里就不会报错
let obj2: PartialProps = {id:'222222222'
}type ReadonlyProps = Readonly<Props>let obj3: ReadonlyProps = {id: 'xxxxxxx',children:[22222]
}
//这里就会报错，不能修改
obj3.id = '44444444444'interface PickType {id: stringtitle: stringchildren:number[]
}type PickProps = Pick<PickType, 'id' | 'title'>let obj4: PickProps = {id: '1111111',title: 'hahahaha',
}type RecordObj = Record<'a' | 'b' | 'c', string[]>let obj6: RecordObj = {a: ['a'],b: ['c'],c: ['jjjj']
}