［译］<<Effective TypeScript>> 高效TypeScript62个技巧 技巧20

一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第13天，点击查看活动详情。

本文的翻译于<<Effective TypeScript>>, 特别感谢!! ps: 本文会用简洁, 易懂的语言描述原书的所有要点. 如果能看懂这文章,将节省许多阅读时间. 如果看不懂,务必给我留言, 我回去修改.

技巧20: 用不同的变量保存用不同的类型的值

在js中,可以用同一个变量保存不同类型的值:

let id = "12-34-56";
fetchProduct(id);  // Expects a string

id = 123456;
fetchProductBySerialNumber(id);  // Expects a number

ts中这通常会导致两个问题:

et id = "12-34-56";
   fetchProduct(id);

   id = 123456;
// ~~ '123456' is not assignable to type 'string'.
   fetchProductBySerialNumber(id);
                           // ~~ Argument of type 'string' is not assignable to
                           //    parameter of type 'number'

id的类型是string, 所以你不能将number赋值给string. 在ts中: 变量的值可以改变, 但是变量的类型不能改变.

如何去修复上面的例子? 可以使用联合类型: string | number:

let id: string|number = "12-34-56";
fetchProduct(id);

id = 123456;  // OK
fetchProductBySerialNumber(id);  // OK

使用union联合类型是有效的. 但是在接下来会有更多的问题, 因为在使用他的时候必须时刻考虑, 他是string还是number.

有一个更好的办法: 引入一个新的变量:

onst id = "12-34-56";
fetchProduct(id);

const serial = 123456;  // OK
fetchProductBySerialNumber(serial);  // OK

在上一个版本中, 使用同一个id, 没有必要而且令人困惑.分开后有几个好处:

• 能够区分两个不相关的概念
• 允许指定不同变量名
• 改进了类索引, 不需要显示类型注释
• 让类型更加简单而不是联合类型
• 让你用const 而不是let来申明变量.

当然不同作用域的变量不会互相干扰:

const id = "12-34-56";
fetchProduct(id);

{
  const id = 123456;  // OK
  fetchProductBySerialNumber(id);  // OK
}

上面两个id其实是完全不同的两个变量.所以可以使用不同类型. 所以ts在这上面不会纠结.