TypeScript技能总结(三)

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

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

//泛型的声明方式:

//语法：在函数名称后面添加<>,里面添加类型变量，比如下面T

//类型变量T,是一种特殊类型的变量，它处理类型而不是值

//该类型变量相当于一个类型容器，能够捕获用户提供的类型（具体是什么类型，由用户调用该函数时指定）

//因为T是类型，因此可以将其作为函数参数和返回值的类型，表示参数和返回值具有相同的类型

//变量类型type，可以是任意合法的变量名称

js 复制代码

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.指定更加具体的类型

js 复制代码

// 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进行约束

js 复制代码

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后面接收对象类型，生成键名，不是接收对象值

js 复制代码

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

//泛型接口

js 复制代码

interface IdFunc<T>{
    ID: (value: T) => T
    ids: () => T[]
}

let obj: IdFunc<number> = {
    ID(value) {
        return value
    },
    ids() {
        return []
    }
}

obj.ID(1111)
```js

//泛型数组
```js
const arr = ['1', '2']
arr.forEach

//泛型类

js 复制代码

class Foo<T>{
    defaultValue: T
    add: (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

js 复制代码

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: string
    title: string
    children: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']
}