作为前端leader，为何我在公司力推ts?

闰土大叔

发布于 2020-01-15 16:00:10

2.6K0

发布于 2020-01-15 16:00:10

文章被收录于专栏：闰土大叔闰土大叔

有粉丝在后台给我私信：土哥，现在还有必要学typescript吗？在小城市，怕学了用不到。。。

我说，做前端的这个是避不开的，是趋势。就算你写业务代码用不到，但是现在很多库也是用 ts 写的，不学怕看不懂。

有句话叫技多不压身，担心用不到太多余，应该担心学不会或者时间精力不够那还差不多。

我现在公司都力推他们用ts写新项目。上手早的估计已经写一年多ts开发了，上手慢的估计还在门口犹豫要不要学ts。

这就是差距，你说你在小城市，我所在的太原也不算大城市吧，顶多算新二线城市。

当年vue、react、angular等框架刚开始在太原互联网公司流行起来的时候，那些快人一步的人都成了招聘市场的香饽饽吧。

vue3.0出来之后，很多人已经开始用vue+ts的组合，简直不要太香。

语言的发展要看生态的。 TS 这两年的发展很好，很多新项目已经开始用 TS 写了，我觉得未来几年内还会有更多的人用 TS。

如果你还对TS不太熟悉，土哥给你讲讲TS核心功能。

1.可选链

从 v3.7 可用

这是当你尝试访问嵌套数据时的一个痛点，嵌套数据越多，代码就会变得越繁琐。

在下面的例子中，要访问 address，你必须遍历 data.customer.address，而且 data 或 customer 有可能是 undefined，所以通常使用 && 运算符或类似例子中的技巧遍历检查每个层次的定义。

现在你可以用 .? 运算符来选择性地对数据访问。通过这种方式，如果存在尚未定义的父级对象，则会在链中的任何位置返回未定义，而不是在运行时崩溃。

// v3.7 以前
if (data && data.customer && data.customer.address) {
   const {address} = data.customer
   const fullAddress = `${address.street}, ${address.city}, ${address.state }${address.zipcode}`
}

// v3.7

// data access
const address = data?.customer?.address
const fullAddress = `${address?.street}, ${address?.city}, ${address?.state } ${address?.zipcode}`

// 也适用于数组
customers?.[0]?.['address']

// 检查方法是否已定义并调用
customer.approve?.()

2.空值合并

从 v3.7 可用

空值合并运算符是 || 的替代方法，如果左侧是 null 或 undefined，则它返回右侧的表达式。这和 || 有什么不同？ || 本质上是 JavaScript 中的布尔 OR 运算符，我们尝试利用短路返回第一个非 false 值。这可能会产生意想不到的结果，因为当要求数字 0 或空字符串作为有效输入时，将会被视为 false。让我们用一个例子来说明：

// 以前
passPhrase = data.inputString || 'Unknown'  //不会接受 "" (空字符串)
passCode =  data.number || '-1111' // 不会接受 0
rememberMe = data.rememberFlag || true // 将会总是 true!!!


// 现在
passPhrase = data.inputString ?? 'Unknown'  //仅在 inputString 未定义时为 Unknown
passCode =  data.number ?? '-1111' // 0 可以通过
rememberMe = data.rememberFlag ?? true // false 是有效值

通过这种方式可以明确地区分 undefined 与 false 的值。

3.递归类型别名

从 v3.7 可用

现实世界中的很多数据类型都是递归的。例如，当你尝试处理分层数据时，会发现存在相同类型数据的重复模式。JSON 是一个很好的例子，它本质上是一个哈希映射，而哈希映射本身可以包含另一个映射或映射数组。

在 v3.6 之前，如果必须定义一个简单的 JSON 类型，则必须像下面这样：

interface JSONObject { [x: string]: JSONValue; }
interface JSONArray extends Array<JSONValue> { }
type JSONValue = string | number | boolean | JSONObject | JSONArray

如果你尝试将第 1 行和第 2 行的类型在像第 3 那样内联，则可能会出现以下错误：Type alias JSONValue circularly references itself。

在 v3.7 中已经有效解决了这个问题，可以像下面这样简单地进行编码：

type JSONValue = string | number | boolean | { [x: string]: JSONValue } | Array<JSONValue>

4.断言签名

从 v3.7 可用

你应该知道 TypeScript 具有类型保护，可以很好地与 JavaScript 中的 typeof 和 instanceOf 运算符一起使用。这有助于为函数的参数添加前提条件，以便将其限制为特定的类型。

让我们写一段把上面提到的这些东西都用到的代码，通过添加类型保护来确保给定的输入是日期，并从中提取年份：

function isDate(input: unknown) : asserts input is Date {
  if (input instanceof Date)
    return;
  else 
    throw new Error('Input must be a Date!');
}

function getYear(input: unknown) : number {
  isDate(input);
  return input.getFullYear()  // TypeScripts knows that input is Date
}


console.log(getYear(new Date('2019-01-01')));
console.log(getYear('2019-01-01'));

上面的代码看起来很不错，但 TypeScript 仍然会提示getFullYear 在未知类型上不可用。

从 v3.7 开始，TypeScript 添加了一个名为 asserts 的新关键字，它能够使编译器从断言起就知道正确的类型。对于断言函数，应该添加 asserts <param> as <type> 而不是返回类型。

这样，如果断言通过，TypeScript 将假定参数是前面定义的类型。修改后的代码如下所示：

function isDate(input: unknown) : asserts input is Date {
  if (input instanceof Date)
    return;
  else 
    throw new Error('Input must be a Date!');
}

function getYear(input: unknown) : number {
  isDate(input);
  return input.getFullYear()  // TypeScripts knows that input is Date
}


console.log(getYear(new Date('2019-01-01')));
console.log(getYear('2019-01-01'));