typeScript(九)泛型

什么时候需要用泛型

• 标注的具体类型并不能确定，比如一个函数的参数类型：

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

• 上面的函数，想实现的是获取一个对象指定的 k 所对应的值，那么实际使用的时候，obj 的类型是不确定的，自然 k 的取值范围也是不确定的，它需要我们在具体调用的时候才能确定，这个时候这种定义过程不确定类型的需求就可以通过泛型来解决

泛型在函数中的使用

function getVal<T>(obj: T, k: keyof T) { 
	return obj[k]; 
}
let obj1 = {
    x: 1,
    y: 2
}
let obj2 = {
    username: 'xiaochen',
    age: 25
}
getVal<typeof obj1>( obj1, 'x' );
getVal<typeof obj2>( obj2, 'age' );

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

泛型在类中的使用

• 基于泛型使用的模拟组件：

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); 
	} 
});