前言

我JS寫的好好的，為啥要用TS寫呢？

本文寫給那些完全沒有用過TS，也沒有使用過結構化語言，對TS有一定的心智負擔的前端新手同學。

面對鋪天蓋地的TS怎么好怎么好的文章，項目中還沒真正開始使用到TS的小伙伴，可能只是看了很多的掘金文章，或者看了一遍官方文檔，腦子里基本上都是：嗯，是的，我知道TS好，我知道在變量后面加一個冒號一個類型，就可以限制變量，是不是所有的變量或者函數(shù)都要寫？為什么我寫了返回類型，VSCode還是提示返回值是any類型？泛型好復雜，什么時候要用泛型？接口類型定義要寫在哪？

來，我們掰開揉碎一點點講。

TS是誰寫給誰看/用的？

先說結論：TS是定義者給使用者寫的。為了讓使用者更方便（VSCode提示）以及更安全（約束）的使用他提供的方法或者類。

使用TS，是有兩個身份的，定義和使用。

VSCode提示

例如：定義者指定了一個方法：

export function foo(name: string): number {
  return name.length
}
復制代碼

那么作為使用者， 你會很清晰的通過VSCode的提示了解到該函數(shù)的參數(shù)和返回值信息：

而不需要去看源碼，要知道，一些復雜的方法，如果沒有良好的注釋，看源碼都不一定能很快的判斷出來參數(shù)和返回值類型。

巧用注釋

為了提供更完美的VSCode提示信息，我們還可以給方法加一個注釋：

/** foo function
 * @description count string size
 */
export function foo(name: string): number {
  return name.length
}
復制代碼

這時候使用者看到的是：

所以，當你要提供一個方法或者類給別人用的時候，就需要把類型約束好，這樣才能讓使用者更好的使用。這里的提供給別人使用，往大了說就是提供一個第三方類庫或者框架給別人用，如：axios lodash等，往小了說可能就是提取一個公用的方法到你的utils文件夾下。

類型推斷

其實也不是所有的變量或者返回值都需要手動去設置類型，通過類型推斷，可以少些很多代碼。

我們看下面的例子：

export function splitString(str: string) {
  const separator = ','
  return str.split(separator)
}
復制代碼

這里的separator就可以不用寫成separator:string，TS會進行類型推斷。

進一步，返回類型我們也可以不用定義，TS會根據(jù)split方法的返回類型來推斷splitString的返回類型。

類型推論只適用于一些簡單的類型，復雜的情況還是需要手動定義?？梢酝ㄟ^VSCode的提示檢測是否正確推斷了類型。

說的極端一點，TS就是為了讓使用者爽，有更好的提示和約束，讓你知道你是否有正確安全的使用提供的方法。而不是為了增加你的工作量和心智負擔。

VSCode沒有正確提示

如果你為你的項目路徑設置了別名alias，那么有可能出現(xiàn)引入的方法沒有正確提示的情況。

我們通過別名引入，splitString方法已經(jīng)沒有正確的類型提示了。因為TS不能正確的解析這個目標文件@/foo/b，我們可以在tsconfig.json這里的compilerOptions選項添加一個paths配置：

{
    "compilerOptions": {
        "paths": {
          "@/*": ["src/*"]
        }
    }
}
復制代碼

這樣就可以正確解析別名下文件了。

什么時候用泛型

要知道這個問題之前，你首先要知道什么是泛型，泛型解決了什么問題?？梢韵瓤纯次臋n。

在了解了泛型是讓一個組件支持多種類型之后。如果你還不知道什么時候用泛型，那就是你還不需要用。等你遇到了痛點，你自然就會想到泛型了。

比如你定義了一個方法：

function foo (arg:number):number {
    return arg
}
復制代碼

當你需要讓這個方法支持string類型的時候，你不使用泛型的話，你可能這么寫：

function foo(arg: number | string): number | string {
  return arg
}
復制代碼

這里有個問題，會出現(xiàn)傳入number，返回string這樣的情況，不夠嚴謹。

這個時候你就會想到泛型了。

function foo(arg: T): T {
  return arg
}
復制代碼

當然，泛型的玩法不都是那么簡單的，想要玩出更高階的泛型寫法，可以多看看第三方庫寫的類型定義文件，看看別人是怎么寫各種泛型的。

類型定義在哪？

這個問題跟上面的問題是一樣的，當你不知道這玩意什么時候用，那你應該是還用不到這個玩意兒。

簡單的不重用的就直接寫，如上面的示例方法。

需要重用的一般來說就在方法實現(xiàn)的文件夾自定義一個類型，并export出去，方便其他使用者使用。

export type fooItem = string | number | null

function foo(arg:fooItem):void {
    console.log(arg)
}
復制代碼

你也可以用一個文件夾，專門放各種公用數(shù)據(jù)類型。比如在定義前后端接口數(shù)據(jù)的時候，就可以這么干：

// ./src/model/user.ts
export interface userReq {
  username: string
  password: string
}

export interface userRes {
  nickname: string
  avatar?: string
  age: number
}
復制代碼

總結

本文沒有講TS的技巧，沒有講TS的優(yōu)點，就是針對我所看到的新手同學遇到一些心智方面的問題，基于個人經(jīng)驗進行簡單的解答和講解，講的比較凌亂。

其實TS沒有想象的那么復雜，TS的初衷是在幫助開發(fā)者，服務開發(fā)者，要享受TS帶來的便捷和快感。結尾用一句幾乎每個用過TS的人都會說的話：

用了TS就回不去JS了

歡迎自薦投稿到《前端技術江湖》，如果你覺得這篇內容對你挺有啟發(fā)，記得點個 「在看」哦