如何理解Typescript代碼

這篇文章主要介紹“如何理解Typescript代碼”，在日常操作中，相信很多人在如何理解Typescript代碼問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”如何理解Typescript代碼”的疑惑有所幫助！接下來，請跟著小編一起來學習吧！

一、基礎規范

（1）常量

常量必須命名, 在做邏輯判斷的時候，也不允許直接對比沒有命名的常量。

•  錯誤的書寫 

switch(num){        case 1:          ...        case 3:          ...        case 7:          ...   }   if(x === 0){        ...   }

上述的例子中，根本不知道1 3 7 對應的是什么意思，這種寫法就基本上沒有可讀性。

•  正確的寫法   

enum DayEnum {         oneDay = 1,         threeDay = 3,         oneWeek = 7,     }     let num  = 1;     switch(num){         case DayEnum.oneDay:         ...         case DayEnum.threeDay:         ...         case DayEnum.oneWeek:         ...     }    const RightCode = 0;    if(x === RightCode)

從上述正確的寫法可以看出來，常量有了命名，在switch或者if等邏輯判斷的時候，我們可以從變量名得知常量的具體含義，增加了可讀性。

（2）枚舉

除了常量枚舉外，在Typescript的編譯階段，枚舉會生成一個maping對象，如果不是字符串枚舉，甚至會生成一個雙向的mapping。因此在我們的業務代碼中，有了枚舉，就不需要一個與枚舉值相關的數組。

•  錯誤的寫法 

enum FruitEnum {         tomato = 1,         banana =  2,         apple = 3  }  const FruitList = [    {       key:1,       value: 'tomato'    },{       key:2,       value: 'banana'    },{       key:3,       value: 'apple'    }  ]

這里錯誤的原因是冗余，我們要得到一個FruitList，并不需要new一個，而是可以直接根據FruitEnum的枚舉來生成一個數組，原理就是我們之前所說的Typescript的枚舉，除了常量枚舉外，在編譯的時候是會生成一個map對象的。

•  正確的寫法 

enum FruitEnum {      tomato = 1,      banana =  2,      apple = 3  }  const FruitList = Object.entries(FruitEnum)

上述就是正確的寫法，這種寫法不僅僅是不冗余，此外，如果修改了枚舉的類型，我們只要直接修改枚舉，這樣衍生的數組也會改變。

除此之外，字符串枚舉值和字符串是有本質區別的，在定義類型的時候請千萬注意，要不然會讓你寫的代碼很冗余。

•  錯誤的用法 

enum GenderEnum{    'male' = '男生',    'female' = '女生'  }  interface IPerson{     name:string     gender:string  }  let bob:IPerson = {name:"bob",gender:'male'}  <span>{Gender[bob.gender as keyof typeof GenderEnum]}</span>

上述的錯誤的原因就是IPerson的類型定義中，gender不應該是string，而應該是一個枚舉的key，因此，在將string轉枚舉值的時候，必須增加一個as keyof typeof GenderEnum的斷言。

•   正確的寫法 

enum GenderEnum{    'male' = '男生',    'female' = '女生'  }  interface IPerson{     name:string     gender:keyof typeof GenderEnum  }  let bob:IPerson = {name:"bob",gender:'male'}  <span>{Gender[bob.gender]}</span>

上述 就是正確的寫法，字符串枚舉和字符串類型是有 明顯區別的，當某個變量需要使用到枚舉時，不能將他定義成string。

（3）ts-ignore & any

Typescript中應該嚴格禁止使用ts-ignore，ts-ignore是一個比any更加影響Typescript代碼質量的因素。對于any，在我的項目中曾一度想把any也禁掉,但是有一些場景中是需要使用any的，因此沒有粗魯的禁止any的使用。但是絕大部分場景下，你可能都不需要使用any.需要使用any的場景，可以case by case的分析。

•  錯誤使用ts-ignore的場景 

//@ts-ignore    import Plugin from 'someModule' //如果someModule的聲明不存在   Plugin.test("hello world")

上述就是最經典的使用ts-ignore的場景，如上的方式使用了ts-ignore.那么Typescript會認為Plugin的類型是any。正確的方法通過declare module的方法自定義需要使用到的類型.

•  正確的方法 

import Plugin from 'someModule'  declare module 'someModule' {      export type test = (arg: string) => void;  }

在module內部可以定義聲明，同名的聲明遵循一定 的合并原則，如果要擴展三方模塊，declare module是很方便的。

同樣的大部分場景下，你也不需要使用any，部分場景下如果無法立刻確定某個值的類型，我們可以 用unknown來代替使用any。

any會完全失去類型判斷，本身其實是比較危險的，且使用any就相當于放棄了類型檢測，也就基本上放棄了typescript。舉例來說：

let fish:any = {         type:'animal',         swim:()=> {             }  }  fish.run()

上述的例子中我們調用了一個不存在的方法 ，因為使用了any，因此跳過了靜態類型檢測，因此是不安全的。運行時會出錯，如果無法立刻確定某個值的類型，我們可以 用unknown來代替使用any。

let fish:unknown = {        type:'animal',        swim:()=> {            }  }  fish.run() //會報錯

unkonwn是任何類型的子類型，因此跟any一樣，任意類型都可以賦值給unkonwn。與any不同的是，unkonwn的變量必須明確自己的類型，類型收縮或者類型斷言后，unkonwn的變量才可以正常使用其上定義的方法和變量。

簡單來說，unkonwn需要在使用前，強制判斷其類型。

（4）namespace

Typescript的代碼中，特別是偏業務的開發中，你基本上是用不到namespace的。此外module在nodejs中天然支持，此外在es6(next)中 es module也成為了一個語言級的規范，因此Typescript官方也是推薦使用module。

namespace簡單來說就是一個全局對象,當然我們也可以把namespace放在module中，但是namespace放在module中也是有問題的。

•  錯誤的方法 

//在一個shapes.ts的模塊中使用  export namespace Shapes {      export class Triangle {        /* ... */      }      export class Square {        /* ... */      }  }  //我們使用shapes.ts的時候  //shapeConsumer.ts  import * as shapes from "./shapes";  let t = new shapes.Shapes.Triangle(); // shapes.Shapes?

•  正確的方法（直接使用module） 

export class Triangle {  /* ... */  }  export class Square {  /* ... */  }

上述直接使用module，就是正確的方法，在模塊系統中本身就可以避免變量命名重復，因此namespace是沒有意義的。

（5）限制函數參數的個數

在定義函數的時候，應該減少函數參數的個數，推薦不能超過3個。

•  錯誤的用法 

function getList(searchName:string,pageNum:number,pageSize:number,key1:string,key2:string){     ...  }

不推薦函數的參數超過3個，當超過3個的時候，應該使用對象來聚合。

• 正確的用法 

interface ISearchParams{     searchName:string;     pageNum:number;     pageSize:number;     key1:string;     key2:string;  }   function getList(params:ISearchParams){  }

同樣的引申到React項目中，useState也是同理

const [searchKey,setSearchKey] = useState('');  const [current,setCurrent] = useState(1)  const [pageSize,setPageSize] = useState(10)  //錯誤的寫法  const [searchParams,setSearchParams] = useState({     searchKey: '',     current:1,     pageSize:10  })  //正確的寫法

（6）module模塊盡量保證無副作用

請不要使用模塊的副作用。要保證模塊的使用應該是先import再使用。

•  錯誤的方法 

//Test.ts  window.x = 1;  class Test{  }  let test = new Test()  //index.ts  import from './test'  ...

上述在index.ts中import的模塊，其調用是在test.ts文件內部的，這種方法就是import了一個有副作用的模塊。

正確的方法應該是保證模塊非export變量的純凈，且調用方在使用模塊的時候要先import,后調用。

•  正確的方法 

//test.ts  class Test{     constructor(){        window.x = 1     }  }  export default Test  //index.ts  import Test from './test'  const t = new Test();

（7）禁止使用!.非空斷言

非空斷言本身是不安全的，主觀的判斷存在誤差，從防御性編程的角度，是不推薦使用非空斷言的。

•  錯誤的用法 

let x:string|undefinedundefined = undefined  x!.toString()

因為使用了非空斷言，因此編譯的時候不會報錯，但是運行的時候會報錯.

比較推薦使用的是optional chaining。以?.的形式。

（8）使用typescript的內置函數

typescript的很多內置函數都可以復用一些定義。這里不會一一介紹，常見的有Partial、Pick、Omit、Record、extends、infer等等，如果需要在已有的類型上，衍生出新的類型，那么使用內置函數是簡單和方便的。此外還可以使用 聯合類型、交叉類型和類型合并。

•  聯合類型 

//基本類型  let x:number|string  x= 1;  x = "1"

//多字面量類型   let type:'primary'|'danger'|'warning'|'error' =  'primary'

值得注意的是字面量的賦值。

let type:'primary'|'danger'|'warning'|'error' =  'primary'  let test = 'error'  type = test  //報錯  let test = 'error' as const   type =  test //正確

•  交叉類型 

interface ISpider{     type:string     swim:()=>void  }  interface IMan{     name:string;     age:number;  }  type ISpiderISpiderMan = ISpider & IMan  let bob:ISpiderMan  = {type:"11",swim:()=>{},name:"123",age:10}

•  類型合并

最后講一講類型合并，這是一種極其不推薦的方法。在業務代碼中，不推薦使用類型合并，這樣會增加代碼的閱讀復雜度。類型合并存在很多地方。class、interface、namespace等之間都可以進行類型合并，以interface為例：

interface Box {    height: number;    width: number;  }  interface Box {    scale: number;  }  let box: Box = { height: 5, width: 6, scale: 10 };

上述同名的interface Box是會發生類型合并的。不僅interface和 interface可以類型合并，class和interface,class和namesppace等等都可能存在同名類型合并，在業務代碼中個人不推薦使用類型合并。

（9）封裝條件語句以及ts的類型守衛

• 錯誤的寫法 

if (fsm.state === 'fetching' && isEmpty(listNode)) {   // ...  }

•  正確的寫法 

function shouldShowSpinner(fsm, listNode) {       return fsm.state === 'fetching' && isEmpty(listNode);  }     if (shouldShowSpinner(fsmInstance, listNodeInstance)) {       // ...     }

在正確的寫法中我們封裝了條件判斷的邏輯成一個獨立函數。這種寫法比較可讀，我們從函數名就能知道做了一個什么判斷。

此外封裝條件語句也可以跟ts的自定義類型守衛掛鉤。來看一個最簡單的封裝條件語句的自定義類型守衛。

function IsString (input: any): input is string {       return typeof input === 'string';  }  function foo (input: string | number) {       if (IsString(input)) {          input.toString() //被判斷為string       } else {          }  }

在項目中合理地使用自定義守衛，可以幫助我們減少很多不必要的類型斷言，同時改善代碼的可讀性。

（10）不要使用非變量

不管是變量名還是函數名，請千萬不要使用非命名，在業務中我就遇到過這個問題，后端定義了一個非命名形式的變量isNotRefresh：

let isNotRefresh = false  //是否不刷新，否表示刷新

isNotRefresh表示不刷新，這樣定義的變量會導致跟這個變量相關的很多邏輯都是相反的。正確的形式應該是定義變量是isRefresh表示是否刷新。

let isRefresh = false  //是否刷新，是表示刷新

二、函數式

個人非常推薦函數式編程，主觀的認為鏈式調用優于回調，函數式的方式又優于鏈式調用。近年來，函數式編程日益流行，Ramdajs、RxJS、cycleJS、lodashJS等多種開源庫都使用了函數式的特性。本文主要介紹一下如何使用ramdajs來簡化代碼。

（1）聲明式和命令式

個人認為函數聲明式的調用比命令式更加簡潔，舉例來說：

//命令式  let names:string[] = []  for(let i=0;i<persons.length;i++){          names.push(person[i].name)  }  //聲明式  let names = persons.map((item)=>item.name)

從上述例子我們可以看出來，明顯函數調用聲明式的方法更加簡潔。此外對于沒有副作用的函數，比如上述的map函數，完全可以不考慮函數內部是如何實現的，專注于編寫業務代碼。優化代碼時，目光只需要集中在這些穩定堅固的函數內部即可。

（2）Ramdajs

推薦使用ramdajs，ramdajs是一款優秀的函數式編程庫，與其他函數式編程庫相比較，ramdajs是自動柯里化的，且ramdajs提供的函數從不改變用戶已有數據。

來自最近業務代碼中的一個簡單的例子：

/**     * 獲取標簽列表     */    const getList = async () => {        pipeWithP([            () => setLoading(true),            async () =>                request.get('', {                    params: {action: API.getList},                }),            async (res: IServerRes) => {                R.ifElse(                  R.isEqual(res.message === 'success'),                  () => setList(res.response.list);                )();            },            () => setLoading(false)        ])();    };

上述是業務代碼中的一個例子，利用pipe可以使得流程的操作較為清晰，此外也不用定義中間變量。

再來看一個例子：

let persons = [        {username: 'bob', age: 30, tags: ['work', 'boring']},        {username: 'jim', age: 25, tags: ['home', 'fun']},        {username: 'jane', age: 30, tags: ['vacation', 'fun']}      ]

我們需要從這個數組中找出tags包含fun的對象。如果用命令式：

let NAME = 'fun'  let person;  for(let i=0;i<persons.length;i++){     let isFind = false     let arr = persons[i].tags;     for(let j = 0;j<arr.length;j++){        if(arr[i] === NAME){           isFind = true           break;        }     }     if(isFind){        personperson = person[i]        break;     }  }

我們用函數式的寫法可以簡化：

let person = R.filter(R.where({tags: R.includes('fun')}))

很明顯減少了代碼量且更加容易理解含義。

最后再來看一個例子：

const oldArr= [[[[[{name: 'yuxiaoliang'}]]]]];

我們想把oldArr這個多維數組，最內層的那個name,由小寫轉成大寫，用函數式可以直接這樣寫。

R.map(atem =>       R.map(btem => R.map(ctem => R.map(dtem => R.map(etem => etem.name.toUpperCase())(dtem))(ctem))(btem))(atem),   )(arr);

到此，關于“如何理解Typescript代碼”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續學習更多相關知識，請繼續關注億速云網站，小編會繼續努力為大家帶來更多實用的文章！