我们都知道 ES6 的数据解构功能很强大,一行命令就能够声明变量拿出对象中的嵌套数据。
const { name, age } = body;
但上面的语法放到 typescript 中会出现报错,原因很简单,name
和 age
这两个属性类型并未声明。按照传统的类型声明方式,你可能会这么做,但很遗憾这种语法一样还是会报错,这与 ES6 语法冲突了。
const { name: string, age: number } = body;
正确的语法应该是这样的
const { name, age }: { name: string; age: number } = body;
解构层数过深或声明变量过多时,这种方法就会显得杂乱,最佳方案应该是为该对象数据创建类型或接口。
interface Body {
name?: string;
age?: number;
}
const { name, age }: Body = body;
正常来讲,函数参数配合 ES6 解构,会这么去写♂️
function foo({name, age = 1} = {}) {}
结合 **一、TypeScript 对象解构 **所讲解,改成这种方式
interface Body {
name?: string;
age?: number;
}
function foo({name, age = 1}: Body = {}) {}
解构默认值与非空类型(❗坑)
// 文件对话框配置属性
export interface FileDialogConfig {
accept: string | string[];
compatible?: boolean;
multiple?: boolean;
webkitdirectory?: boolean;
}
function foo({accept="", multiple}: FileDialogConfig = {});
代码使用ES6语法搭配类型定义,看起来一切正常,但在TypeScript编译时会出现下述错误。
TS2741: Property 'accept' is missing in type '{}' but required in type 'FileDialogConfig'.
相信在编写过程中难免会遇到这个问题,在明明是有默认值的情况下,抛出属性“accept”在类型 “{}” 中缺失,但在类型 “FileDialogConfig” 中需要
异常也很让人摸不着头脑。
个人猜测,函数参数根据传入值进行类型判断,在这个例子中判断的是默认值 {}
,而在使用 ES6 解构空对象设置的默认值并不纳入类型检测中。 简单来说,typescript 认为传入的对象的某个属性一定是有值的,在解构中一定是可以解析出来这个值,自行设置的默认值形同虚设,是没有意义的。
解决方法也很简单,既然编译器认为这个属性一定有值,那么只需要告诉编译器存在可能存在没有值的情况就行了,改成类型可选参数。
// 文件对话框配置属性
export interface FileDialogConfig {
accept?: string | string[];
compatible?: boolean;
multiple?: boolean;
webkitdirectory?: boolean;
}
function foo({accept="", multiple}: FileDialogConfig = {});
因发布平台差异导致阅读体验不同,源文贴出:《TypeScript 函数参数使用ES6解构骚操作》