- Render 函数中定义函数传参
interface List {
id: number;
name: string;
}
interface Result {
data: List[]; //表示由 List 接口组成的数组
}
function Render(result: Result) {
result.data.forEach(value => {
console.log(value);
});
}
let result = {
data: [
{id: 1,name: '张三',},
{id: 2,name: '李四',},
{id: 3,name: '王五',},
],
};
Render(result);
- 规范参数可选属性和只读属性
interface List {
readonly id: number;
name: string;
age?: number;
}
- 函数传参时如何绕过类型检查
如果在接收的后端数据中,比约定好的接口多了一个字段,能否通过类型检查?会不会报错?
let result1 = {
data: [
{ id: 1, name: 'a', sex: 'male' },
{ id: 2, name: 'b' },
],
};
//这样是不会报错的,只要满足接口约定的必要条件即可
Render(result1);
//但如果这样调用,会报错,因为无法通过sex:"man"的类型检查。这时候需要用其他方法
Render({
data: [
{ id: 1, name: 'a', sex: 'male' },
{ id: 2, name: 'b' },
],
});
我们有三种方法:
- 通过接口定义变量,函数调用时传入变量名(只对必要的约定条件进行检查,多余的数据不做检查)
- 类型断言(所有约定都不做类型检查,失去了ts类型检查的意义)
- 索引签名
//类型断言
Render({
data: [
{ id: 'b', name: 3, sex: 'man' },
{ id: 2, name: 'b' },
],
} as Result); // 明确告诉编译器,数据符合Result,这样,编译器会绕过类型检查
//使用索引签名解决
interface List {
id: number;
name: string;
[x: string]: any;
}
使用接口来定义函数的传参、返回值的类型
interface Add1 {
(x: number, y: number): number;
}
let add1: Add1 = (a, b) => a + b;
使用类型别名来定义来函数的传参、返回值的类型
type Add2 = (x: number, y: number) => number;
let add2: Add2 = (a, b) => a + b;
直接在函数体中定义来函数的传参、返回值的类型
const Add3 = (x: number, y: number): number => {
return x + y;
};