TypeScript踩坑（持續更新）

TypeScript踩坑（持續更新）

---

配置

爲JS編寫類型聲明文件(d.ts)

很多第三方庫已經有自己的類型聲明文件，比如@types/react，@types/react-native，這些需要單獨安裝，而例如mobx-react和mobx這種會自帶類型文件，不需要單獨安裝。

我們最近有個新項目，需要照顧到不同同學，有的願意用TS，有的不想用TS，爲了照顧到雙方，所有的公共模塊都是JS寫的，所以需要單獨爲TS寫類型聲明文件，具體語法請參考TS官網的文檔，這裏只是講一些坑。

爲項目中的JS寫類型文件的時候，需要先引入對應的文件，然後以導入的路徑爲名字聲明一個模塊，最後在需要用到這個類型文件的地方用///來引入相對路徑。
類型聲明文件：

import BasePage from '../src/frame/BasePage'
declare module "../src/frame/BasePage" {
    export default class BasePage{}
}

引入類型文件：

/// <reference path="../../../@types/BasePage.d.ts" />

如果是想設置全局的類型文件，可以在tsconfig.json的paths字段裏面指定對應的路徑，這樣就不需要單獨用reference引入了。

語法

1. Element implicitly has an 'any' type because type 'Test' has no index signature

class PageFlag {
    updatePageFlag(name: string, value: boolean) {
        this[name] = value;
    }
}

這裏我希望能夠更新testStore中的數據，但是又不想對所有的屬性一一列舉出來，但是由於沒有設置this[name]的類型，導致了報錯，這裏有幾種解決辦法。

(1) 修改tsconfig.json裏的noImplicitAny爲false。

(2) 給this設置類型，但是不好的地方就是失去了類型判斷的意義，如下：

// 例2
interface IParams {
    [propName: string]: any
}
class PageFlag {
    updatePageFlag = (name: string, value: boolean) => {
        (<IParams>this)[name] = value
    }
}

(3) 手動列舉所有屬性

雖然這樣比較麻煩，但是一眼就能看出來PageFlag有哪些屬性，數據比較清晰。

type pageFlag = "showLoading" | "showMask" | "showCalendar";
class PageFlag {
    showLoading: boolean = false;
    showMask: boolean = false;
    showCalendar: boolean = false;
    
    updatePageFlag = (name: pageFlag, value: boolean) => {
       this[name] = value
    }
}