[譯] 你爲啥還不用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了兄弟們！

硬廣

這是本人的前端技術小程序，基本上全部的文章都會同步更新在小程序中。歡迎你們來湊熱鬧。