TypeScript踩坑（持续更新）

shleyZ 发布于2019-08-23 12:51 / 3367人阅读

摘要：目录结构如下类型声明文件引入类型文件如果是想设置全局的类型文件，可以在的字段里面指定对应的路径，这样就不需要多带带用引入了。文件直接导入就行了，不需要再专门引入，这里两者命名一样，所以会自动识别，但是的语法也变化了一些。

配置 为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
///

如果是想设置全局的类型文件，可以在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) => {
        (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

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/99048.html

优秀文章收藏（慢慢消化）持续更新~

摘要：整理收藏一些优秀的文章及大佬博客留着慢慢学习原文协作规范中文技术文档协作规范阮一峰编程风格凹凸实验室前端代码规范风格指南这一次，彻底弄懂执行机制一次弄懂彻底解决此类面试问题浏览器与的事件循环有何区别笔试题事件循环机制异步编程理解的异步 better-learning 整理收藏一些优秀的文章及大佬博客留着慢慢学习原文:https://www.ahwgs.cn/youxiuwenzhan...

JeOam 2019-08-23 18:24 评论0 收藏0
webpack3 升级 webpack4踩坑记录

摘要：本篇不包含所有坑，暂时只记录自己踩到的部分坑一安装安装最新版本安装新增依赖这个在中，本身和它的是在同一个包中，中将两个分开管理。我记录下自己更新这个的过程，以下前半部分可以直接跳过。以下记录踩坑过程。本篇不包含所有坑，暂时只记录自己踩到的部分坑一.安装安装webpack4最新版本 npm install --save-dev webpack@4 安装新增依赖 webpack-c...

马忠志 2019-08-02 15:38 评论0 收藏0
vscode-eslint的踩坑实践--typescript无法格式化

摘要：的踩坑实践无法格式化引言最近开发的前端项目随着开发的人员越来越多，代码规范已经是一个很难避免的问题了，虽然百度有这个规则检查，但是不论是或者是项目本地都没有配置或检查，完全靠自觉，这是件非常扯淡的事。 vscode-eslint的踩坑实践--typescript无法格式化引言最近开发的前端项目随着开发的人员越来越多，代码规范已经是一个很难避免的问题了，虽然百度有fecs这个规则检查...

harryhappy 2019-08-22 14:57 评论0 收藏0
5分钟上手TypeScript踩坑

摘要：前言最近在学习，发现的官方文档中的分钟上手辅导教程中会有许多新手可能很难理解的地方，所以记录一下声明一下我用的版本是以后版本可能有所不同什么是维基百科上说是一种由微软开发的自由和开源的编程语言。前言最近在学习TypeScript，发现TypeScript的官方文档中的5分钟上手TypeScript辅导教程中会有许多新手可能很难理解的地方，所以记录一下声明一下我用的版本是 npm ...

array_huang 2019-08-23 13:45 评论0 收藏0