typescript 的一些小记录

[jawil]

1. 引入 React

import * as React from 'react';
import * as ReactDOM from 'react-dom';

在 TypeScript 2.7+ 中，你可以将 Typescript 配置 --allowSyntheticDefaultImports （或者在 tsconfig 中添加 "allowSyntheticDefaultImports": true ）来像普通的 jsx 一样来引入模块：

import React from 'react';
import ReactDOM from 'react-dom';

解释

为什么不是添加 esModuleInterop？ Daniel Rosenwasser 解释说这是为了更好的配合 webpack/parcel. 更多讨论请参见 wmonk/create-react-app-typescript#214

Please PR or File an issue with your suggestions!

2. 使用 TypeScript definitions for webpack

当需要在 typescript 项目中使用 webpack 的一些全局变量，比如 DEBUG, non_webpack_require, __resourceQuery, webpack_chunk_load, webpack_hash, webpack_modules, webpack_public_path, webpack_require, module, process, require，ts 会一直报错，解决办法就是使用 @types/webpack-env 插件。

npm i @types/webpack-env -D
__webpack_public_path__ = window.__webpack_public_path__;

当你在打包过程中并不确定最后静态资源存放目录的时候可以不设置publicPath参数这个时候webpack会使用一个自由变量 __webpack_public_path__ 来作为静态资源目录

不知道是不是理解上的问题 文档里把 __webpack_public_path__ 称之为自由变量，但是按照实际的行为来说 __webpack_public_path__ 与 JavaScript 中 free variable 的行为完全不一样，实际上 __webpack_public_path__ 的生命周期只存在于 webpack 打包阶段

打包之后 __webpack_public_path__ 并不会被挂载到 window 作用域下而会被当做一个模块处理，最后他的值等于在项目js文件中对自由变量 __webpack_public_path__ 的赋值的表达式（注意是‘表达式’而不是‘值’）

所以我个人喜欢将其称之为‘宏变量’。

3. 键入检查JavaScript文件

TypeScript 2.3及更高版本支持使用 --checkJs在.js 文件中进行类型检查和报告错误的模式。
您可以通过向他们添加 // @ts-nocheck 注释来跳过检查某些文件； 相反，您可以选择仅检查一些 .js 文件，方法是在不设置 --checkJs 情况下 --checkJs 添加 // @ts-check 注释。 您也可以通过在上一行添加 // @ts-ignore 特定行上的错误。

结合react-router、redux 声明

import { withRouter, RouteComponentProps as routeProps } from 'react-router-dom';
import { connect } from 'react-redux';
import { updateNodeChartList, updateOnChangeData } from 'store/workflowAction/action';

interface IMatchParams {
  action: string;
}
interface mapStateToProps {
  defaultFormValue: any;
  changeItems: any;
  nodeChartList: any;
  singleNodeData: any;
  linkageData: any;
}
interface mapDispatchToProps {
  updateNodeChartList: any;
  updateOnChangeData: any;
}

export namespace NodeConfig {
  export interface Props
    extends Partial<
      mapStateToProps & mapDispatchToProps & routeProps<IMatchParams>
    > {
    wrappedComponentRef: any;
  }
  export interface State {
    tablefetchParam: {
      flowConfigId?: string;
      flowType?: string;
      beginDate?: number;
      status?: string;
    };
    dialogToggle: boolean;
    renderNodeFieldList: any;
  }
}

@(connect as any)(
  state => {
    return {
      singleNodeData: state.singleNode.singleNodeData,
      linkageData: state.linkage.linkageData
    };
  },
  { updateNodeChartList, updateOnChangeData }
)
@(withRouter as any)
export default class NodeConfig extends React.Component<
  NodeConfig.Props,
  NodeConfig.State
> {}

4. 声明文件（x.d.ts）

在开始描述各种问题之前，列举一下我所知道的声明文件存放的方式（常规配置下）：

1. src/@types/，在 src 目录新建@types目录，在其中编写.d.ts声明文件，声明文件会自动被识别，可以在此为一些没有声明文件的模块编写自己的声明文件；实际上在 tsconfig include 字段包含的范围内编写 .d.ts，都将被自动识别。
2. 在x.js相同目录创建同名声明文件x.d.ts，这样也会被自动识别；
3. node_modules/@types/下存放各个第三方模块的声明文件，通过yarn add @types/react自动下载到此处，自己编写的声明文件不要放在这里；
4. 作为 npm 模块发布时，声明文件可捆绑发布，需在package.json中指明"types": "./types/index.d.ts"；
5. typings 声明管理器，了解不多，已经不推荐使用；