typescript定义函数的传参、返回值

• 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' },
  ],
});

我们有三种方法：

1. 通过接口定义变量，函数调用时传入变量名(只对必要的约定条件进行检查,多余的数据不做检查)
2. 类型断言(所有约定都不做类型检查,失去了ts类型检查的意义)
3. 索引签名

//类型断言
Render({
  data: [
    { id: 'b', name: 3, sex: 'man' },
    { id: 2, name: 'b' },
  ],
} as Result); // 明确告诉编译器，数据符合Result，这样，编译器会绕过类型检查

//使用索引签名解决
interface List {
  id: number;
  name: string;
  [sex: 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;
};