interface Person{
name:string;
age?:number;
}
printName(params:Person){
console.log(params.name);
}//调用方式1，该调用方式会报错，因为直接把对象赋值给函数参数，函数会按照函数参数类型
//Person对参数进行检查，aeg并不在接口中
printName({name:"测试",aeg:20});
//调用方式2，该调用方式会报错，但是会直接在let params2:Person = {name:"测试",aeg:20};
报错，
//因为我们声明了params1为一个Person类型的对象，所以在赋值是就会进行检查
let params1:Person = {name:"测试",aeg:20};
printName(params1);
//调用方式3，该调用方式不会报错，我们直接将 {name:"测试",aeg:20}赋值给params2;
但是params没有声明接口的类型，所以这里不会进行类型检查，再将params2当参数传给函数，此时函数也不会对一个变量进行类型的检查，所以也不会报错
let params2 = {name:"测试",aeg:20};
printName(params2);
【Typescript|Typescript额外的属性检查 和 对象拥有任意个属性】以上的3中调用方式中虽然第3种会绕过typescript的检查，让其不会报错，但是在实际的使用中却不应该这样使用，毕竟大部分的场合这种报错都是bug
除开使用上面第3种的方法让我们传入的对象能拥任意个数量外还可以使用类型断言或者字符串索引签名来实现此功能
使用类型断言调用
printName({name:"测试",aeg:20} as Person);
或者如下使用字符串索引签名申明
interface Person{
name:string;
age?:number;
[propertys:string]:any;
}
推荐阅读
- typescript|TypeScript--笔记二（Map对象、联合类型、接口）
- json|如何将JSON对象转换为Typescript类
- 前端|typescript（四）ts中函数的参数和返回值的类型定义
- 前端|TypeScript函数参数和返回类型定义
- TypeScript|玩转TypeScript对象、对象作为参数进行函数传递、接口和内置对象[无敌态]
- typescript|【TypeScript】从零开始玩转TypeScript - TypeScript中的函数
- typescript|Vue.js 3 + Vite + TypeScript 实战项目开发
- vue.js|vue3+antd实现table中点击具体某一列展示弹窗
- vue|Vue+element-ui+ts封装table业务组件