Unable to resolve signature of class decorator when called as an expression.
Type 'ComponentClass<RcBaseFormProps & Pick<IProps, "store">, any>' is not assignable to type 'typeof Test'.
Property 'onChange' is missing in type 'Component<RcBaseFormProps & Pick<IProps, "store">, any, any>' but required in type 'Search'.
最近一段时间使用 TypeScript,对遇到的问题做一些总结:
如何解决
antd
的@Form.Create()
修饰器无法使用的问题一般我们会这样使用
antd
的@Form.create()
修饰器:但它可能会提示下面的类型错误:
解决办法就是将修饰器改成使用函数调用的方式:
antd 官方解释:https://github.com/ant-design/ant-design/issues/6489
如何解决以下提示
store
类型缺失的问题假如我有一个
Search.tsx
,它的源码大概是这样的:之所以会有最上面的错误类型提示,是因为
Search
组件的IProps
中定义了store
这个类型是必须的。但是,在constructor
中引用this.props
中的store
时,却无法引用到它。解决此问题,有两种方法。
第一种方法:
construct
中对store
的引用this.store
的引用都改成const { rollbackEdit } = this.props.store!
。最后的叹号表示忽略去掉前面引用中的null
和undefined
值IProps
的定义改成如下的样子。没错儿,只是将store:
改成了store?:
:第二种方法:
如果使用第一种方法,觉得改动量太大,有些麻烦。那么可以尝试下面这个方法。它既然提示在组件的
props
上不到store
这个类型定义,那我们在调用Search
组件的地方,给它的props
传入store
不就可以了。比如,在
index.tsx
中:如何解决普通类中的方法定义必须被初始化的问题
我们定义了一个
List
组件:tslint 就会提示你
fetchList
必须进行初始化。这时,最简单的解决方法可以去这样定义fetchList
方法:在
fetchList
后面加了一个叹号。但是,如果每次都这样写,好像有点儿麻烦。那可以在 tslint 配置文件中添加一条配置:"strictPropertyInitialization": false
这样看似解决了问题,但其实并不严谨。因为一个方法如果只是被定义了,并没有进行任何实现。是不应该写在普通类里的,而应该把它抽离到一个抽象类中,然后由普通类来继承它就可以了。所以,我们的代码大概应该改成这样:
这样就不会有任何验证错误了,而且更符合代码的编写规范。
如何解决 TypeScript 引起的 webpack split chunk 失效问题
我们的项目代码是从 jsx 逐渐过渡到 tsx 的。在将
router.jsx
改为router.tsx
之后,发现 webpack split chunk 就失效了。通过 google 搜索发现了 webpack 官方的这个帖子:https://github.com/webpack/webpack/issues/5703
它的解决办法是直接在 tsconfig.json 配置中将
module: "commonjs"
改为"module": "esnext"
。但是在我的 webpack 配置文件中又引用了很多以 commonjs 规范编写的组件。最终经过权衡,解决办法就是在 webpack 的ts-loader
中配置一下这个选项,这样只会影响编译时的代码环境,而不会影响当前的源代码环境。变量导出不能作为一个类型,即使这个变量是从一个 class 赋值而来
看上面代码示例,我定义一个 class A,然后把它赋值给了 A1,并进行了导出。那么在 B 文件中我将 A 导入,可以作为一个类型定义吗?抱歉,不行。如果想使用 A 的类型定义,必须直接将 class A 本身导出才可以。
如何定义高阶组件的
children
类型React 的类型定义文件中对
ReactNode
的定义是:如何让 vim ale tslint 忽略对 node_modules 下的文件检查
我发现即使在
tslint.json
和tsconfig.json
中配置了以下参数,tslint 依然会顽固的会对 node_modules 中的 ts 文件进行检查,怎么也忽略不了。解决这个问题的第一个方法是修改 ale 的配置,直接在
.vimrc
中添加以下配置:解决问题的第二个办法:
在 vim 中使用
:ALEInfo
查看当前文件的信息,发现这个文件被打开之后,是处于一个临时目录中:因此,也就导致了在 tslint 的配置文件中添加忽略
node_modules
是不起使用的。所以应该在配置文件中添加这个临时目录才行。这里还要注意,在 linux 或者 mac 系统中显示的临时目录不一定是一样的:此问题,只会发生于 vim 中。如果你用的是 vscode 则不必担心。