TypeScript泛型的基本使用和理解

泛型

许多时候,标注的具体类型并不能确定,比如一个函数的参数类型

在像C#和Java这样的语言中,可以使用泛型来创建可重用的组件,一个组件可以支持多种类型的数据。 这样用户就可以以自己的数据类型来使用组件。

function getVal(obj, k) {
return obj[k];
}

上面的函数,我们想实现的是获取一个对象指定的 k 所对应的值

那么实际使用的时候,obj 的类型是 不确定的 自然 k 的取值范围也是不确定的

它需要我们在具体调用的时候才能确定

这个时候这种定 义过程不确定类型的需求就可以通过泛型来解决

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

所谓的泛型,就是给可变(不定)的类型定义变量(参数), <> 类似 ()

泛型类

在面向对象章节中,我们曾经给大家讲过一个基于泛型使用的例子:模拟组件

abstract class Component<T1, T2> {
props: T1;
state: T2;
constructor(props: T1) {
this.props = props;
}
abstract render(): string;
}

interface IMyComponentProps {
val: number;
}

interface IMyComponentState {
x: number;
}
class MyComponent extends Component<IMyComponentProps, IMyComponentState> {
constructor(props: IMyComponentProps) {
super(props);
this.state = {
x: 1
}
}

render() {
this.props.val;
this.state.x;
return '<myComponent />';
}
}
let myComponent = new MyComponent({val: 1});
myComponent.render();

泛型接口

我们还可以在接口中使用泛型 后端提供了一些接口 用以返回一些数据

依据返回的数据格式定义如下接口:

interface IResponseData {
code: number;
message?: string;
data: any;
}

根据接口,我们封装对应的一些方法

function getData(url: string) { 
return fetch(url).then(res => {
return res.json();
}).then( (data: IResponseData) => {
return data;
});
}

但是,我们会发现该接口的 data 项的具体格式不确定,不同的接口会返回的数据是不一样的,当我们 想根据具体当前请求的接口返回具体 data 格式的时候,就比较麻烦了,因为 getData 并不清楚你调 用的具体接口是什么,对应的数据又会是什么样的

这个时候我们可以对 IResponseData 使用泛型

interface IResponseData<T> {
code: number;
message?: string;
data: T;
}
function getData<U>(url: string) { 
return fetch(url).then(res => {
return res.json();
}).then( (data: IResponseData<U>) => {
return data;
});
}

定义不同的数据接口

// 用户接口
interface IResponseUserData {
id: number;
username: string;
email: string;
}
// 文章接口
interface IResponseArticleData {
id: number;
title: string;
author: IResponseUserData;
}

调用具体代码

~(async function(){
let user = await getData<IResponseUserData>('');
if (user.code === 1) {
console.log(user.message);
} else {
console.log(user.data.username);
}
let articles = await getData<IResponseArticleData>('');
if (articles.code === 1) {
console.log(articles.message);
} else {
console.log(articles.data.id);
console.log(articles.data.author.username);
}
});
上一篇

Vue-Router导航守卫使用方法的理解