TypeScript 使用 ES6 解构骚操作

Posted 2023-03-07 XianZhe_

TypeScript 使用 ES6 解构骚操作

文章目录

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

---

一、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为路由组件传参『详解』