typescript在vscode下的智慧型提示優化

2021-09-25 10:52:24 字數 1382 閱讀 8963

我一直在想要不要詳細的交待一下來龍去脈.....算了,打了差不多一百字又刪除了(但還是要簡單的說明一下)

我在寫公共庫遇到這樣乙個問題:

export 匯出的方法,其中乙個引數是(type:string),這樣寫沒有毛病,這個type可以注釋一下:// (horizontal || vertical) 元件展示方式:水平 或者垂直; 在其它地方呼叫,雖然ts可以告訴你這個引數應該傳入什麼型別,但是我具體不知道要傳入什麼值,我還得返回那個模組去看這方法的注釋,後來下班的時候突然就想到了,為何不定義引數名為:isvertical;這樣我就不用去看模組,就知道我這個引數要傳入什麼值了.....得出乙個經驗:某個引數只會有兩種值的情況下盡量使用布希型別定義

週末在家的時候又想起了那個問題正好有時間研究一下, 另外那如果取值是固定三個或者四個的時候應該怎麼做?

開始是這樣寫的:(不能把公司**貼上來,自己寫了個demo)

// a: 顏色十六進製制  b: 大小  isvertical: 是否垂直展示

export const getdata = (a: string, b: number, isvertical: boolean): string =>

會得到類似這樣的提示

這樣我只知道要傳入的引數型別,若引數需要乙個固定值,那就沒法知道我要傳入的是什麼了(又得返回模組去看)

下面優化這樣(不只是型別,連注釋都可以一起帶出來)

type color = 'red' | 'blue'

type big = 33 | 44 | 55

/** * @param a 二選一: red,blue

* @param b 三選一: 33,99,66

* @param c 任意字串

好像沒啥技術含量哈,但確實困擾我蠻久,另外如果都以這種規範寫,後面來的新同事,分分鐘就可以上手啊~, 恩,要對未來的同事(接盤俠)好一點!哈哈哈~~

在 React 中使用 Typescript

用 typescript 寫 react 可比寫 vue 舒服太多了,react 對 ts 的支援可謂天生搭檔,如果要用 ts 重構專案,不像 vue 對專案破壞性極大,react 可以相對輕鬆的實現重構。如在已有專案中使用typescript,需要手動安裝 typescript types rea...

TypeScript在Vue中的嘗試

vue官方文件中,對typescript做支援,目前我們可以使用typescript的語法,進行vue專案的開發。這個外掛程式是vue官方維護的外掛程式,目前支援基於class的語法規則。1 直接在類中申明data資料。舊的方式 export default 使用class的方式 import co...

typescript在react元件中的使用

typescript中文文件 布林值 let istrue boolean false 數字 let num number 4 字串 let name string boble 陣列 let arr number 1,2,3,4 let arrs array 注意 內部表示陣列item的屬性,可以設...