TypeScript基础知识点集合（四）

我们在使用TS过程中，经常性的并不会知道所定义的参数是什么类型的，这时候，我们就可以使用 泛型 来标注。

也就是，参数在定义时不确定其类型，而在使用时才知道其类型的情况下，可以使用泛型。

function getVal<T>(obj: T, k: keyof T) {
    return obj[k];
}

let obj1 = {
    x: 1,
    y: 2,
}

let obj2 = {
    username: 'hh',
    age: 13,
}

getVal<typeof obj1>(obj1, 'x');
getVal<typeof obj2>(obj2, 'age');

Tips

在（三）中的calss说明中，也可以看到泛型的使用，最典型的例子就是在React中组件的创建。 泛型的使用，让我们在使用数据的时候再决定传入的参数的类型，对于某些无法提前预估的参数类型标注来说，很方便。

泛型也可以用接口来定义

比如：

interface IResponseData<T> {
    code: number;
    message?: string;
    data: T;
}

// 用户接口
interface IResponseUserData {
    id: number;
    username: string;
    email: string;
}

// 文章接口
interface IResponseArticleData {
    id: number;
    title: string;
    author: string;
}

async function getData<U>(url: string) {
    let response = await fetch(url);
    let data: Promise<IResponseData<U>> = await response.json();
    return data;
}

(async function () {
    let userData = await getData<IResponseUserData>('/user');
    console.log(userData.data.username);

    let articleData = await getData<IResponseArticleData>('/article');
    console.log(articleData.data.id);
    
})()