记录有关ts的坑

更新


[2019-7-21]

  • Initial release

记录


1. 配置相关

1.1 nodemon 无法直接解析 .ts 文件

解决: 添加 ts-node 模块, 可自动执行编译ts文件

1.2 package.json 配置启动命令

1
2
3
scripts: {
"server": "nodemon --watch ./server/**/*.ts --ignore ./server/**/*.spec.ts --exec ts-node ./server/server.ts",
}

1.3 执行2步骤后, 后台报错

解决: 将tsconfig.json"module": "esnext"改为 "commentjs".

1.4 执行3步骤后, antd 无法解析

原因: antd 依赖esnext

解决: 修改config-overridge.js

展开代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
const tsLoader = getLoader(
config.module.rules,
(rule) => (
rule.loader
&& typeof rule.loader === 'string'
&& rule.loader.includes('ts-loader'),
),
);

tsLoader.options = {
transpileOnly: true,
getCustomTransforms: () => ({
before: [tsImportPluginFactory({
libraryDirectory: 'es',
libraryName: 'antd',
style: 'css' | true,
})],
}),
compilerOptions: {
module: 'es2015',
},
};

1.5 tsconfig.json 中已经开启 experimentDecorator, 仍然不能使用 decorator

解决:

展开代码
1
2
@(connect() as any)
class Co extends React.PureComponent{}

1.6 配置baseUrl选项, 可使用绝对路径导入包, 避免路径过长的问题.

解决:

展开代码
1
2
3
4
5
{
"compilerOptions": {
"baseUrl": "./src",
},
}