使用 // @ts-ignore 忽略某一个 props

<NavItem 
  to="/test"
  componentClass={Link}>
  Test
</NavItem>

如果像这样， NavItem 组件上没有 to 这个属性，很自然的会报错。

Property 'to' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes<NavItem> & Readonly<NavItemProps> & Readonly<...>'.ts(2769)

然而 TypeScript 只认带双斜杠的 // @ts-ignore ，JSX 代码中写注释的只能通过 {/* */} , 类似这样的代码是不行的呢

<NavItem 
  // @ts-ignore
  to="/test"
  componentClass={Link}>
  Test
</NavItem>

正确答案是这样的↓↓↓ ，加 /* prettier-ignore */ 的原因是可能格式化后会破坏这种微妙的结构 hhh

{/*
  // @ts-ignore */ /* prettier-ignore */}
<NavItem to="/test"
  componentClass={Link}>
  Test
</NavItem>

React Router 相关

路由中参数的声明：

import { RouteComponentProps } from 'react-router';

interface IPageRouteInfo {
  id: string;
}

interface IPageProps extends RouteComponentProps<IPageRouteInfo> {}

class Page extends React.Component<IPageProps> {}

withRouter 装饰器的用法，没找到什么好的方式，我一般这么写（（（

import { withRouter, RouteComponentProps } from 'react-router';

interface ISearchProps extends Partial<RouteComponentProps> {}

@(withRouter as any)
class Search extends React.Component<ISearchProps> {}

为第三方库添加声明文件 .d.ts

有些库时没有声明文件的，需要自己添加添加声明文件。一般在 src/types 中新建一个 模块名.d.ts ，内容如下：

declare module 'scroll-to' {
  const scrollTo: (x: number, y: number, options: any) => void;
  export = scrollTo;
}

使用 ESLint 取代 TSLint

由于 TSLint 已停止维护，推荐使用 ESLint 进行检查。

需要安装的包：

yarn add @typescript-eslint/eslint-plugin @typescript-eslint/parser eslint eslint-plugin-react -D

.eslintrc.js 配置：

module.exports = {
  parser: '@typescript-eslint/parser',
  parserOptions: {
    ecmaFeatures: { jsx: true },
    ecmaVersion: 2019,
    sourceType: 'module',
    project: ['./tsconfig.json'],
    tsconfigRootDir: __dirname
  },
  env: {
    browser: true,
    es6: true,
    node: true
  },
  extends: [
    // ...
    'plugin:@typescript-eslint/eslint-recommended',
    'plugin:@typescript-eslint/recommended'
  ],
  plugins: [
    '@typescript-eslint',
    'react'
  ],
  settings: {
    react: {
      version: require('react').version
    }
  }
};

更多的规则可以查看 typescript-eslint/typescript-eslint。

用 TypeScript 来写 webpack 配置

有强迫症患者的同学可以用 TypeScript 的语法来写 webpack 的配置文件。

首先是需要安装的包：

yarn add ts-node webpack webpack-cli webpack-dev-server @types/webpack @types/webpack-dev-server tsconfig-paths -D

在项目根目录下创建 tsconfig-node.json ：

{
  "compilerOptions": {
    "module": "commonjs",
    "target": "es5",
    "esModuleInterop": true
  }
}

创建 webpack.config.ts ：

import webpack from 'webpack';

const config: webpack.Configuration = {
  // ...
};

export default config;

冲鸭！！

cross-env TS_NODE_PROJECT=\"tsconfig-node.json\" NODE_ENV=development webpack-dev-server --config ./webpack.config.ts