专栏首页腾讯IVWEB团队的专栏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端,被函数参数类型支配的恐惧

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 约束即类型、TypeScript 编程内参(一)

    本文是《约束即类型、TypeScript 编程内参》系列第一篇:约束即类型,主要记述 TypeScript 的基本使用和语法。

    腾讯IVWEB团队
  • 为你的项目添加typescript支持

    typescript语法上支持接口与泛型,进而它提供的自动补全、静态检查等等编程体验让人如沐春风。github上很多开源项目都提供了typescript支持。例...

    腾讯IVWEB团队
  • 前端工具类项目规范化-使用TS

    TypeScript 是微软开发一款开源的编程语言,本质上是向 JavaScript 增加静态类型系统。它是 JavaScript 的超集,所有现有的 Java...

    腾讯IVWEB团队
  • SAP Spartacus加载delivery国家列表的处理逻辑

    this.store.dispatch(new UserActions.LoadRegions(countryIsoCode)); 比如CN:

    Jerry Wang
  • TypeScript: 为什么必须学

    或者换一个问题,为什么在项目中,我们要选择使用typescript?也许你还不知道其中缘由,一起跟着我的思路捋一捋。

    用户6901603
  • 搭建node服务(三):使用TypeScript

    当使用tsc命令进行编译时,如果未指定ts文件,编译器会从当前目录开始去查找tsconfig.json文件,并根据tsconfig.json的配置进行编译。

    宜信技术学院
  • 光芯片上的全光脉冲神经网络

    Nature昨天刊登了德国明斯特大学的一篇最新进展,研究人员在光芯片上实现了脉冲神经网络(spike neural network)。先睹为快,这篇笔记主要介绍...

    光学小豆芽
  • 搭建node服务(三):使用TypeScript

    当使用tsc命令进行编译时,如果未指定ts文件,编译器会从当前目录开始去查找tsconfig.json文件,并根据tsconfig.json的配置进行编译。

    宜信技术学院
  • 博彩骗局、违法爬虫:除了996,程序员工作中还要警惕哪些“深坑”?

    说到劳动节,我们不得不提劳动节和劳动法认可的“八小时工作”。毕竟,当年为了争取劳动者权力,很多人都付出过血的代价。

    大数据文摘
  • 深入iOS系统底层之映像文件操作API介绍

    iOS系统生成的可执行程序或者动态库文件的存储布局格式被称之为mach-o格式。文件中存放着程序的代码和数据,而程序运行时系统会为其建立一个进程,以及分配虚拟内...

    欧阳大哥2013

扫码关注云+社区

领取腾讯云代金券