TypeScript踩坑（持续更新）

配置

为JS编写类型声明文件(d.ts)

不少第三方库已经有本身的类型声明文件，好比@types/react，@types/react-native，这些须要单独安装，而例如mobx-react和mobx这种会自带类型文件，不须要单独安装。

咱们最近有个新项目，须要照顾到不一样同窗，有的愿意用TS，有的不想用TS，为了照顾到双方，全部的公共模块都是JS写的，因此须要单独为TS写类型声明文件，具体语法请参考TS官网的文档，这里只是讲一些坑。

集中管理，相对路径导入

为项目中的JS写类型文件的时候，须要先引入对应的文件，而后以导入的路径为名字声明一个模块，最后在须要用到这个类型文件的地方用///来引入相对路径。
目录结构以下：

- @types
    - BasePage.d.ts
- src
    - frame
        - BasePage.js
    - page
        - hotelList
            - index.tsx

类型声明文件：

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

引入类型文件：

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

若是是想设置全局的类型文件，能够在tsconfig.json的paths字段里面指定对应的路径，这样就不须要单独用reference引入了。

自动导入

上面那种方法虽然能够将types文件集中管理，可是有个很麻烦的地方就是须要在引入BasePage模块的地方手动引入d.ts文件，这个真的很繁琐，这里有个更好的方法。

- src
    - frame
        - BasePage.js
        - BasePage.d.ts
    - page
        - hotelList
            - index.tsx

index.tsx文件直接import导入BasePage就好了，不须要再专门引入BasePage.d.ts，这里二者命名同样，因此会自动识别BasePage.d.ts，可是BasePage.d.ts的语法也变化了一些。

// BasePage.d.ts
// 注意：这里不须要再声明declare module "BasePage"了，不然会识别不了
export default class BasePage{}

语法

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

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

这里我但愿可以更新PageFlag中的数据，可是又不想对全部的属性一一列举出来，可是因为没有设置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
    }
}

export from

有些文件夹下面有不少文件，因此我喜欢增长一个index.ts文件来直接export from其余文件，这样在其余地方引入的时候能够直接import from目录，相似以下：

// 咱们有个components文件夹，下面有不少组件文件（都是export default导出的），咱们能够components下建立index.ts文件，里面这么写（下）：
export Hotel from './Hotel'
export * as HotelList from './HotelList'
export Header from './Header'

可是这两种export from的方式在TS里面都会编译报错，但是我在ES6里面明明写的好好的啊！！！
后来在google上找到了一个连接，原来这两种export from的方式都只是提案，若是在ES6中则须要额外添加@babel/plugin-proposal-export-namespace-from 插件来支持，TS中不支持这些写法。

可是感受这个更像野路子，也许将来会支持，遂放弃，最后发现了另一种写法，能够完美解决这个问题。

export {default as Hotel} from './Hotel'
export {default as HotelList} from './HotelList'
export {default as Header} from './Header'

顺便说一下，export from其实还有下面两种写法，可是这两种写法都是须要模块export导出，而不是export default导出的。

export { Hotel } from './Hotel'
export * from './Hotel