[譯] 你為啥還不用TypeScript？

旭霸發表於2018-02-06
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程式碼。

image

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
複製程式碼

還不止這些好處。

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的資料 github.com/Microsoft/T…

在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

相關文章