01月18, 2020

基础工程之typescript环境搭建

很多人觉得typescript配置只需要ts-loader一加,就好了。没啥难度。。

ok,确实是。下面我在实际写工程时,搭建的ts环境,算是一个分享吧。

配置说明

大家都知道,其实ts配置有下面几种:

  • ts-loader
  • awesome-typescript-loader
  • @babel/preset-typescript

从三张图来看:

alt

alt

alt

下载量也许说明不了什么(毕竟create-react-app采用的方案是@babel/preset-typescript),但是更新频率还是可以说明一些东西的。

从取舍上来说,我个人的观点是这样的:

typescript项目,那么直接用@babel/preset-typescript,没啥好说的。

如果有tsjs的混合(也许是历史遗留的原因),那么直接采用ts-loader

ForkTsCheckerWebpackPlugin

如果翻create-react-app(下面统称cra)源码,则可以看到这个插件。

它的作用是用来独立开个线程,检测ts语法的正确性。

在新一代的typescript中已经不怎么需要tslint了,它已经投向了eslint的拥抱。

因此在语法检查上,只要eslint加上ForkTsCheckerWebpackPlugin的类型检查即可。

插件配置简单如下:

new ForkTsCheckerWebpackPlugin({
      async: false,  // 不管是开发还是build都要进行阻断
      useTypescriptIncrementalApi: true,
      checkSyntacticErrors: true,
      tsconfig: tsConfig, // 指定tsconfig.json的路径
      reportFiles: [
        '**',
        '!**/__tests__/**',
        '!**/?(*.)(spec|test).*',
        '!**/src/setupProxy.*',
        '!**/src/setupTests.*',
      ],
      silent: true
  }

处理特殊类型的文件

说实话,我本来以为上面这两点就OK了,事实证明还是我太年轻了。

import svg from './logo.svg';

这一行ts报错。但是我用cra创建的项目没有报错,为什么?

原因是cra的模板package.json有一个types

{
    "types": "./lib/react-app.d.ts"
}

打开文件一看,好家伙,加上这些内容确实不会报错了:

/// <reference types="node" />
/// <reference types="react" />
/// <reference types="react-dom" />

declare namespace NodeJS {
  interface ProcessEnv {
    readonly NODE_ENV: 'development' | 'production' | 'test';
    readonly PUBLIC_URL: string;
  }
}

declare module '*.bmp' {
  const src: string;
  export default src;
}

declare module '*.gif' {
  const src: string;
  export default src;
}

declare module '*.jpg' {
  const src: string;
  export default src;
}

declare module '*.jpeg' {
  const src: string;
  export default src;
}

declare module '*.png' {
  const src: string;
  export default src;
}

declare module '*.webp' {
    const src: string;
    export default src;
}

declare module '*.svg' {
  import * as React from 'react';

  export const ReactComponent: React.FunctionComponent<React.SVGProps<SVGSVGElement>>;

  const src: string;
  export default src;
}

declare module '*.module.css' {
  const classes: { readonly [key: string]: string };
  export default classes;
}

declare module '*.module.scss' {
  const classes: { readonly [key: string]: string };
  export default classes;
}

declare module '*.module.sass' {
  const classes: { readonly [key: string]: string };
  export default classes;
}

OK,仅仅有了这个就可以了么?不,不行的。。

你还得在项目里面声明一个d.ts文件,来引用到上面的类型声明(毕竟react-scripts只是工具),像cra里面是有一个react-app-env.d.ts文件

/// <reference types="react-scripts" />

本文链接:www.my-fe.pub/post/typescript-env-build.html

-- EOF --

Comments

评论加载中...

注:如果长时间无法加载,请针对 disq.us | disquscdn.com | disqus.com 启用代理。