[译] 你为啥还不用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了兄弟们！

硬广

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