谈Vue3.0前必须了解的打字稿实用技巧

很多人在基本操作上还是用TypeScript。事实上，TypeScript功能非常强大。利用好这些特性，可以有效地提高代码质量，加快开发效率。今天，我们将介绍九个非常实用的TypeScript技巧或功能。

注释的妙用

我们可以通过/* * */注释TypeScript类型。当我们使用相关类型时，会有注释提示。当许多人合作开发时，这种技术非常有用。在大多数情况下，我们不必花时间翻阅文档或跳过页面来查看注释。

类型派生的巧妙运用

TypeScript可以根据一些简单的规则来推断(检查)变量的类型。

像一个简单的加法函数

函数add (a:数，b:数){return a b} typescript可以通过参数和return的运算符推导出函数的返回值

如果你想得到整个函数的类型，你可以使用类型

注意将其与JavaScript中的typeof区分开来

Type AddFn=typeof add当然，上面的情况是比较简单的，有时候我们的返回值类型其实是相当复杂的，这时，返回值类型可以通过类型派生和ReturnType很容易地得到。

type return type=add//number的return type以上技术非常适合redux的编码，可以省略很多重复的代码。毕竟redux的编码非常繁琐。

元组的巧妙使用

有时候我们可能需要批量获取参数，每个参数的类型都不一样。我们可以声明一个元组，例如：

函数查询(.args:[string，number，boolean]){ const d : string=args[0]；const n : number=args[1]；const b:布尔值=args[2]；}巧用省略

有时我们需要重用一个类型，但是我们不需要这个类型中的所有属性，所以我们需要消除一些属性，所以省略就派上了用场。

用户界面{ username : string id : number token : string avatar : string role : string }类型UserWithoutToken=OmitUser，方法“token”常用于React。当父组件通过道具向下传递数据时，通常需要重用父组件的道具类型，但是需要消除一些无用的类型。

使用记录

Record是TypeScript的高级类型，但是相关文档不多，所以经常被忽略，但它是一个非常强大的高级类型。

记录允许您从联合类型创建新类型，联合类型中的值用作新类型的属性。

举一个简单的例子，比如我们要实现一个简单的汽车品牌年龄表，写出来好像没有问题。

type car=' Audi ' | ' BMW ' | ' Mercedes benz ' const cars={ Audi 3360 { age : 119 }，BMW : {age3360 113}，Mercedes benz 3360 {age3360 133}，}虽然这个写法是正确的，

例如：

我们忘了写汽车品牌。他会报错吗？我们拼错了属性名。它会报告错误吗？除了以上三个品牌，我们又增加了一个品牌。他会报告错误吗？我们更改了其中一个品牌的名称。他会被提醒错误吗？以上写法都不能用，需要Record的帮助。

type Car=' Audi ' | ' BMW ' | ' MercedesBenz ' type carist=RecordCar，{ age : number } const cars : carist={ Audi : { age : 119 }，Bmw : {age : 113}，梅赛德斯奔驰： {age : 133}，}当我们拼错：时

当我们少了一个品牌：

当我们在：中添加了一个未同意的品牌时，

实战项目中尽量使用Record，有助于避免很多错误。在vue或react中，有许多场景中Record是更好的解决方案。

熟练使用类型约束

泛型可以在。jsx文档

const to array=T(element :T)=[element]；//errorin.jsxfile. add扩展到break

const to array=T extends { }(element :T)=[element]；//没有错误。十字形

交叉类型是将多种类型组合成一种类型。这允许我们将几个现有类型堆叠成一个类型，它包含所有需要的特征。

在JavaScript中，混合是一种非常常见的模式。在这种模式下，您可以从两个对象创建一个新对象，新对象将具有这两个对象的所有功能。交叉类型允许您安全地使用这种模式：

联合类型

在JavaScript中，您希望属性是许多类型中的一种，例如字符串或数组。这就是union类型派上用场的地方(它使用|作为标记，如string | number)。

函数formatCommandline(command : string[]| string){ let line=' '；if(type of command==' string '){ line=command . trim()；} else { line=command.join(')。trim()；}}类型别名

类型别名为类型赋予新的名称。类型别名有时类似于接口，但可以应用于原始值、联合类型、元组和任何其他需要手工编写的类型。

类型别名可以是通用的

类型ContainerT={ value :T }；您也可以使用类型别名在属性中引用自己：

type TreeT={ value :T；left: TreeTright: TreeT}类型别名看起来与interface非常相似，那么应该如何区分呢？

接口只能用来定义对象类型，而类型的声明可以定义交集、并集、原类型等。除了对象，类型声明的应用范围明显更广。

但是接口也有其特定的用途：

接口方式可以实现接口的扩展，implemenjs接口可以实现接口合并声明type alias={ num 3360 number } Interface Interface { num 3360 number；}声明函数别名(arg : Alias): Alias；声明接口函数(arg:接口):接口；此外，该接口还创建了一个新名称，可以在其他任何地方使用。类型别名不会创建新名称，例如，错误消息不会使用别名。在下面的代码示例中，将鼠标悬停在编译器中的接口上显示它返回接口，但将鼠标悬停在别名上显示对象的文字类型。

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。