原文地址：https://medium.freecodecamp.org/why-would-you-not-use-typescript-67d0baa3eaca
在如今这个编程世界中，JS似乎已经成了最受欢迎的语言。加上Nodejs，我们有了后端编程的能力；加上Electron，我们有了桌面应用的能力；加上React Native，我们有了在手机上近似于原生的体验。毫无疑问，JS已经渗透到很多技术生态当中了。
既然JS那么流行，TS也应该这么流行才对！
任何你在ECMA stage 3之后写的JS代码都是可行的TS代码。
image
VSCode
首先我想说的是：如果你还没有使用VS写你的JS代码，现在是时候用了，并且你可以从这里(http://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
还不止这些好处。
image
你如果使用过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");
image
在这里你能找到更多关于JSDoc的资料
https://github.com/Microsoft/TypeScript/wiki/JSDoc-support-in-JavaScript
在VSCode中，你可以通过如下设置来开启类型检测。
"javascript.implicitProjectConfig.checkJs": true
如果你想要在整个项目下定义通用的接口，可以添加一个globals.d.ts文件，然后在全局命名空间下声明。
declare global {
interface IFormatPrice {}
}
React
很酷的是，只要在你的tsconfig中添加如下配置，TS同样支持React语法
{ "jsx": "react" }
image
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>
);
现在我们来引用这个组件
image
神了！
结论
是时候使用TS了兄弟们！
硬广
这是本人的前端技术小程序，基本上所有的文章都会同步更新在小程序中。欢迎大家来凑热闹。
image
image
网友评论