webpack+react+typescript简单配置指南
webpack+react+typescript简单配置指南
webpack+react+typescript简单配置指南
1、webpack添加ts-loader
以下例子使用的是webpack3。
先在命令行安装依赖：
npm i babel-core babel-loader babel-preset-env babel-preset-react ts-loader tsconfig-paths-webpack-plugin typescript -D然后为webpack.config.js添加以下loader：
rules: [{
test: /(\.js(x?)$|\.ts(x?)$)/,
exclude: /node_modules/,
use: [
loaders: [
{ loader: 'babel-loader' },
{
loader: 'ts-loader',
},
]
]
]然后创建.babelrc文件，写入以下内容：
{
"presets": [
[
"env",
{
"modules": false
}
],
"react"
]
}这样webpack的loader就配置好了。
2、配置tsconfig.json
tsconfig.json是typescript编译器的配置文件，需要虽然不指定也能run，但是要配合webpack用起来顺心的话，是必须要配置的。
vscode编辑器对ts的支持很好，推荐使用微软自家的vscode编辑器。在编辑tsconfig文件的时候，需要提示的地方按ctrl+whitespace就可以看到各属性的解释，非常方便。
在根目录创建tsconfig.json文件，写入以下内容：
{
"compilerOptions": {
"baseUrl": "./src", //你的工程src根目录
"traceResolution": false, //在debug的时候可以设置为true，这个属性的具体用法见下文
"sourceMap": true, //这个都知道，debug的时候打开吧
"allowJs": true, //是否允许工程中js和ts同时存在。
"checkJs": true, //是否对js文件开启静态检查，如果true的话，你的js文件中就可能很多红色的波浪线了。
"jsx": "react", //react工程必备
"target": "es5", //编译的目标语言，当然是最老的es5
"module": "es2015", //模块引入方式，如果你想用import的话
"moduleResolution": "node", //模块搜索方式，按照node的来，一般没有说明异议
"allowSyntheticDefaultImports": true, //见下文
"noImplicitAny": false, //见下文
"noUnusedLocals": false, // true: 如果有未使用的块级变量，编译器会报错。
"noUnusedParameters": false, // true: 如果有未使用的参数，编译器会报错。鉴于js的动态性，这个我一般关掉
"removeComments": false, // 删除注释，debug的时候不开启
"preserveConstEnums": false, // 见下文
"skipLibCheck": false, // 跳过lib文件的静态检查，哎，不是所有的lib都给你写得规规整整的。
"experimentalDecorators": true // 要实用装饰器语法的话，打开该项
},
"include": [
"./src/**/*"
],
"files": [ //我一般将全局申明的type文件放到这里。原因见下文。
"./types/index.d.ts",
"./types/polyfill.d.ts"
]
}traceResolution的用法
简单的说，例如，当我们在工程引用import ClickHelper from 'utils/click'的时候，typescript编译器需要知道去哪里找它，如果ts编译器找不到，你感觉很奇怪，就可以开启traceResolution: true让ts编译器打印模块寻址的过程，很容易就debug到问题点。详细的ts编译器模块搜索路径请看这篇官方的文档。
allowSyntheticDefaultImports的用法
一般来说，如果一个模块没有用export default 导出，那么，你要用import Foo from 引入的话，是会失败的，改用import * as Foo才会编译通过。但是如果开启了allowSyntheticDefaultImports选项，就可以不用如此费劲了。所以我们一般将这个编译选项打开。
noImplicitAny用法
如果打开了此选项，你创建了如下方法是会报错的：
export function foo(data){
// do something...
}原因是你没有申明参数data的类型，data拥有一个隐式的any类型。ts既然是一个强类型的语言，类型的定义是ts的优势，既然你选择了ts，那就请尽量将这个选项打开，让ts提醒你有个变量没有申明类型。这样也可以减少错误率。
我一版是H5工程关闭此选项，node工程开启此检查。
preserveConstEnums用法
ts默认将常量的枚举类型替换为值，有点像宏。例如官方给出的例子：
const enum Comparison {
LessThan = -1,
EqualTo = 0,
GreaterThan = 1
}
var x = Comparison.EqualTo; // Ok, replaced with 0 in emitted code
var y = Comparison[Comparison.EqualTo]; // Error Comparison编译后不再是一个对象，直接被替换为了值。如果你想保持枚举类型的灵活性，可以将这个配置置为true。
全局申明的type文件。
type文件以.d.ts结尾，价值等同于头文件。ts已经默认声明了很多通用的头文件，你可以再vscode中敲一个window，然后command+鼠标左键点进去看。你会发现里面别有洞天。这是我最喜欢ts的地方，还需要什么文档？有type文件就够了！
但是我们工程中经常会定义一些自定义的变量，比如window.__report__之类的，可能是外部引入的。没有声明过的对象在ts中就会报错，怎么解决这样的问题？当然是申明一下就好啊~~
创建一个base.d.ts文件，然后写入以下内容：
interface Window {
__report__: (msg:string)=>boolean;
}
declare var window: Window;这样你的变量就不会报错了。或者你想一劳永逸，也可以定义一个万能的对象，当然一般不推荐这么干：
interface Window {
[otherProp: string]: any;
}
declare var window: Window;同理，由于js目标版本造成的Object.assign未定义，Promise.all未定义等等，都可以用这种方法解决。注意，这只是一个申明文件，影响ts的静态检查，告诉ts这段代码没有错！并不会影响编译后的代码。
3、可以run起来了。
说了这么多，其实有更方便方法的。我放了一个bolerplate到自己的github上，欢迎前去clone
4、ts的应用场景
ts适合数据结构复杂，交互复杂的工程。这种工程一般模块众多，交互复杂，需要多人协同开发。想当年，ts还没有火起来，团队还在用基于事件的编程泛型写富文本应用的时候，看代码真的是很累的一件事。鬼知道这个emit跳到哪里去了~鬼知道这个方法还有第三个参数等等。这一切，当有了ts之后瞬间变得愉快了起来。想想在node端，被函数参数类型支配的恐惧