乐趣区

关于前端:Typescript-的最佳实践-2021-版

jiezi

当初咱们越来越多的我的项目都用上了 Typescript，也享受到了它带来的益处，为了更高效的应用它，咱们能够遵循一些 最佳实际，以下的准则是我在应用并且举荐的

应用正确的类型申明（防止应用 any）

类型申明是 Typescript 的一大劣势，尤其是体现在代码编写阶段，因为 JavaScript 是在运行时定义类型的，Typescript 能够帮忙你在运行之前就过滤掉一大部分类型引发的奇怪问题，当你晓得你定义的变量是什么类型的时候不要应用 any，倡议每次定义新变量的时候后都加上数据类型。

name: string = "hello";
value: number = 50;
isCorrect: boolean = false;

应用严格模式

use strict 是 JavaScript ES5 增加的性能，它就是字面的意思：应用严格模式，能够在 tsconfig 文件中找到相干的配置。

这样能够避免你犯有意识或低级的谬误，例如应用未声明的变量、不应用类型正文或尝试应用将来的保留关键字作为变量名等。use strict 通过 语法错误 的模式帮忙您编写良好且平安的代码习惯。

应用 let 代替 var

var 是一位很好的老朋友，然而 let 和 const 在 ES6 中呈现了，他们的呈现是为了解决 var 的一些问题。

var 既能够作用于 全局作用域 又能够作用于 部分作用域。

  • 当 var 类型变量在函数 / 块之外定义时，它就成为全局范畴的变量，该变量可用于脚本内的任何中央
  • 当 var 在函数外部定义时变为部分作用域，它只能在该函数外部拜访
var name= "John Doe"; // 全局作用域
function getAge() {var age= 30; // 部分作用域}

var 关键字有几个缺点：能够反复申明，不申明也能够被调用，TS 也不会报错，会导致一些奇怪的问题。

var name = "John Doe";
function getName(){var name = "Anne"; // 不会报错}

为防止这种状况，应该改用 let。let 申明的是一个块级作用域变量，并且不能从新申明。然而你能够在不同的作用域中申明雷同的变量名，每一个都被视为不同变量。

let name = "John";
if (true) {
  let name = "Anne";
  console.log(name); // "Anne"
}
console.log(name); // "John"

常量应用 const 申明

const 和 let 是一起新增的变量申明。const 也是块级作用域类型，同样的，也不能被从新申明。这些是 let 和 const 之间的相似之处。不同之处是 const 不能被从新赋值。所以当你申明一个常量时应用 const。

const name = "John";
name = "Anne"; // error
const age = 30;
const age = 31; //error

PS：申明一个 const 对象时，不能从新对它赋值，然而能够批改它的的属性

固定长度的数组应用元组类型

let marks: number[] = [1, 2, 3];

你能够对 marks 数组增加任意数量的元素，只有都是 number 类型，TS 不会限度你。

然而，在数组长度为常量的状况下可能会导致重大的逻辑谬误。为了防止这种谬误，你能够应用元组类型来限度数组的长度和每一项的数据类型

let marks:[number, number] = [1, 2]; // 含有 2 个 number 类型元素的数组类型
marks = [10, 20]; // 胜利
marks = [1]; // 语法错误
marks = [1, 2, 3, 4, 5] // 语法错误

应用类型别名

假如有多个变量或对象领有雷同的数据结构类型

let man: {name: string, age: number} = {name = "john", age=30};
let woman: {name: string, age: number} = {name = "Anne", age=32};

为了防止这种冗余的类型定义你能够应用 类型别名

type Details = {name: string, age: number}; // 定义类型别名
let man: Details = {name = "john", age=30}; // 应用类型别名
let woman: Details = {name = "Anne", age=32};

带来的额定益处就是代码的可读性更强，看起来更清晰

any 和 unknown

外表上看来 any 和 unknow 没有什么区别，都是在咱们不能确定数据类型的时候所应用的帮忙类型，如果咱们想疾速的把 js 重构为 ts，两者均可，然而也有一些区别

任何值都能够标记为 any 或者 unknown

let anyExample: any; // 定义一个 any 类型
let unknownExample: unknown; // 定义一个 unknown 类型
anyExample = 123; 
anyExample = "Hey"
unknownExample = false;
unknownExample = 23.22;

对于标记 any 的值，你能够对它做任何事

anyExample.you.made.this.code.chain(); // success

unknow 则不行，它是一种更平安的类型

unknownExample.trim(); // 语法错误

如果要应用 unknow 类型，你得把他放在一个条件判断语句中

if (typeof exampleUnkown == "string") { // 第一步，查看类型
  exampleUnkown.trim(); // 不会报错}

对类成员应用拜访修饰符

TS 为 class 成员提供了 拜访修饰符，能够设置 public、protected 或者 private 属性，但 class 永远是 public 类型

  • private：仅能够在外部拜访
  • protected：外部或者子类能够拜访
  • public：都能够拜访
class Employee {
  protected name: string;
  private salary: number;
  
  constructor(name: string, salary: number) {
    this.name = name;
    this.salary = salary
  }

  public getSalary(){return salary}
}

如果要拜访 salary 属性，你必须调用 getSalary 办法

class Developer extends Employee{viewDetails(){console.log(this.salary); // 谬误: 属性 'salary' 是公有属性
    console.log(this.getSalary()); // success
  }
}

通过子类拜访 name 属性

class Developer extends Employee{viewDetails(){console.log(this.name);
  }
}

应用 Lint 工具

每个人都有本人的开发格调和习惯，在团队我的项目中，多种代码格调是灾难性的，如果不想净化代码库，还是须要抉择一个 Lint 工具，首选 ESLint，它与 JavaScript 和 Typescript 都兼容

格式化代码

应用好的代码格式化程序能够使您的编码更高效、更简洁。依据我的集体教训，我更喜爱在 VS 代码中应用 Prettier。然而有很多代码格式化程序，抉择取决于你应用的编辑器

退出移动版