TypeScript/TS基础知识二

开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第5天，点击查看活动详情

索引类型

案例1

定义一个person类，此案例需要关闭ts严格模式，tsconfig.json里的strict改为false,

class Person {
    name: string;
    age: number;
}

type MyType = Person['name'];
let n:MyType=2323
console.log(n)

直接利用索引的方法将person类的name类型起个类型别名是可以。然后这个类型就是字符串类型，假如给它赋值一个数字，就会报错。

案例2

获取指定对象的部分属性，将结果放到数组中返回。 定义一个函数，第一个参数泛型T,第二个参数是这个泛型T的属性集合。返回值是这个泛型和对应属性集合的value值。没有什么问题，非常好用

let obj = {
    name: "实则棒",
    age: 19,
    sex: "女"
}

function getValues<T, K extends keyof T>(obj: T, keys: K[]): T[K][] {
    let arr = [] as T[K][];
    keys.forEach(key => {
        arr.push(obj[key]);
    })
    return arr;
}

console.log(getValues(obj,['name','age']))

条件类型

• 条件类型的形式看起来有点像javaScript中的条件表达式
• T extends U ? TrueType : FalseType
• 应用场景：解决函数重载问题

条件类型基础使用

type MyType<T> = T extends string ? string : any;
// string
type Type1 = MyType<string>

// any
type Type1 = MyType<number>

// any
type Type1 = MyType<boolean>

条件类型应用函数重载

没有条件类型时函数重载如下

type IName = {
    name: string;
}
type IAge = {
    age: number;
}

function reload(name: string): IName;
function reload(age: number): IAge;
function reload(nameOrAge: string | number): IName | IAge;


function reload(nameOrAge: string | number): IName | IAge {
    throw ''
}

reload('实则棒')
reload(12)

有了条件类型，可以省略复杂的函数重载，就能满足需求了

type IName = {
    name: string;
}
type IAge = {
    age: number;
}

type Condition<T> = T extends string ? IName : IAge;
function reload<T extends string | number>(nameOrAge: T): Condition<T> {
    throw ''
}

reload('实则棒')
reload(12)

这么写的话，代码就优雅了很多，首先约束好泛型T 继承 sting或者number,保证用户传入的参数只能是string或number,然后根据用户传入的类型确定返回值类型进行约束，原理来就是找参数和返回值之间的联系，利用好，将类型约束到最小化。