[译] 你为啥还不用TypeScript？

原文地址：https://medium.freecodecamp.org/why-would-you-not-use-typescript-67d0baa3eaca

在如今这个编程世界中，JS似乎已经成了最受欢迎的语言。加上Nodejs，我们有了后端编程的能力；加上Electron，我们有了桌面应用的能力；加上React Native，我们有了在手机上近似于原生的体验。毫无疑问，JS已经渗透到很多技术生态当中了。

既然JS那么流行，TS也应该这么流行才对！

任何你在ECMA stage 3之后写的JS代码都是可行的TS代码。

VSCode

首先我想说的是：如果你还没有使用VS写你的JS代码，现在是时候用了，并且你可以从这里(vscodecandothat.com/)获取基本上所有你需要的插件以及工具。

事实上，TS编译器在你还没想的时候就帮你做了很多意想不到的事。它之所以能做这些，是因为不管你有没有意识到，VSCode就一直在用TS编译器来编译你的JS代码。

另外，它还是用了一种叫做自动类型定义的功能，使用类型定义的库Definitely Typed来自动下载成千上万流行的 JS 库。

从JS到TS

在下面的例子中, 我们将简单地设置一个价格字符串。

const formatPrice = (num, symbol = "$") =>
  `${symbol}${num.toFixed(2)}`; formatPrice("1234");

当我们传一个字符串进去的时候，这个函数就失效了，因为字符串没有toFixed方法。

我们只要简单地给它添加一个类型，就能轻松解决运行时的这个问题。

const formatPrice = (num: number, symbol = "$": string) =>   
 `${symbol}${num.toFixed(2)}`; formatPrice("1234"); 
  // num.toFixed is not a function

还不止这些好处。

你如果使用过JSDoc，你就会知道在最新版本的TS中，只要在JS文件头部加上// @ts-check，就能实现类型检测。

// @ts-check
/**
* Format a price
* @param num {number} The price
* @param symbol {string} The currency symbol
*/
const formatPrice = (num, symbol = "$") => 
 `${symbol}${num.toFixed(2)}`;

formatPrice("1234");

在这里你能找到更多关于JSDoc的资料 github.com/Microsoft/T…

在VSCode中，你可以通过如下设置来开启类型检测。

"javascript.implicitProjectConfig.checkJs": true

如果你想要在整个项目下定义通用的接口，可以添加一个globals.d.ts文件，然后在全局命名空间下声明。

declare global {
  interface IFormatPrice {}
}

React

很酷的是，只要在你的tsconfig中添加如下配置，TS同样支持React语法

{ "jsx": "react" }

PropTypes在捕获运行时错误方面是一个好手，但是令人难过的是，只有在控制台出现了明显的错误提示信息之后，你才能知道哪里出错了。在构建阶段你很有可能错过了很多。

那么在开发阶段就能捕获这些错误岂不是很棒？

import * as React from "react";
import formatPrice from "../utils/formatPrice";

export interface IPriceProps {
  num: number;
  symbol: "$" | "€" | "£";
}

const Price: React.SFC<IPriceProps> = ({
  num,
  symbol
}: IPriceProps) => (
  <div>
    <h3>{formatPrice(num, symbol)}</h3>
  </div>
);

现在我们来引用这个组件

神了！

结论

是时候使用TS了兄弟们！

硬广

这是本人的前端技术小程序，基本上所有的文章都会同步更新在小程序中。欢迎大家来凑热闹。