TypeScript 使用 ES6 解构骚操作

TypeScript 使用 ES6 解构骚操作

---

一、TypeScript 对象解构

我们都知道 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;

---

二、TypeScript 函数参数解构

正常来讲，函数参数配合 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解构骚操作》

• 官方手册：
  • TypeScript 中文手册 函数
• 网络文献：
  • 在TypeScript中使用类型进行对象解构（英）

---

五、推荐博文

• JavaScript 两种方案打开文件对话框
• 『精』Vue 使用props为路由组件传参『详解』