TypeScript 使用 ES6 解构骚操作

TypeScript 使用 ES6 解构骚操作

文章目录

  • TypeScript 使用 ES6 解构骚操作
    • 一、TypeScript 对象解构
    • 二、TypeScript 函数参数解构
    • 四、参考资料
    • 五、推荐博文


一、TypeScript 对象解构

我们都知道 ES6 的数据解构功能很强大,一行命令就能够声明变量拿出对象中的嵌套数据。

const { name, age } = body;

但上面的语法放到 typescript 中会出现报错,原因很简单,nameage 这两个属性类型并未声明。按照传统的类型声明方式,你可能会这么做,但很遗憾这种语法一样还是会报错,这与 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为路由组件传参『详解』

你可能感兴趣的:(Web,typescript,es6,javascript)