参考:DefinitelyTyped/DefinitelyTyped

  • Typescript for plotly

There is a Definitely Typed version available for plotly.js (Github link). This allows you to use the plain Javascript version inside Typescript. Follow these steps to setup your environment:

1
2
npm install --save plotly.js
npm install --save-dev @types/plotly.js

Then in your code you can do the following (example taken from Github):
1
2
3
4
5
6
7
8
9
10
11
import * as Plotly from 'plotly.js';

const data: Plotly.BarData[] = [
{
x: ['giraffes', 'orangutans', 'monkeys'],
y: [20, 14, 23],
type: 'bar'
}
];

Plotly.newPlot('test', data);

Finally you need to convert the Typescript to javascript with tsc and prepare the code to be included in you webpage with browserify.

Ref: https://stackoverflow.com/questions/39084438/how-to-import-plotly-js-into-typescript

  • TypeScript与React结合使用
  • TypeScript和React还有webpack结合

Ref: https://typescript.bootcss.com/tutorials/react.html

  • npm 和 yarn对比

LwZXFj6hszUPMEn

在 TypeScript 中编写 React – 如何使用 webpack 构建开发环境

目录

介绍

不用说,TypeScript 是 Microsoft 开发的用于静态类型JavaScript超集。

在 TypeScript 中编写 React 的好处是你可以将这种 TypeScript 静态类型检查引入到你的 React 开发中。尤其是在 React 中,经常使用props在组件之间传递值。多人开发的时候,如果有类型信息,其他成员写的代码意图就很明确了,可以防止传值出错

直到现在,在 React 中,React.PropTypes都有一个 props 类型检查的功能,但是在 2017 年 4 月 7 日发布的React v15.5.0 中,这个React.PropTypes已经和 React 本身分离了,是分开的,变成了一个包。当然,也可以像之前一样在单独的包中使用prop-types来检查 props 类型。然而,这种对React.PropTypes 的单独打包是以推荐使用FlowTypeScript 的方式完成的

即使在 TypeScript 中,编写 React 的文档也准备如下。我认为未来会有更多的机会在 TypeScript 中编写 React。

所以,我总结了如何搭建使用 TypeScript 编写 React 的环境。请借此机会找到一种在 TypeScript 中编写 React 的方法。

在本说明中,使用以下版本。

npm环境准备

创建一个项目目录,并准备一个可以使用 React、TypeScript 和 webpack 的环境。

首先,创建一个项目目录,您可以在其中继续进行 React 开发。这次我使用了typescript-react-project,但你可以命名任何你喜欢的目录。

1
$ mkdir typescript-react-project

创建项目目录后,转到它并点击npm init命令。将在目录中创建package.json文件,您可以使用 npm。

1
2
$ cd typescript-react-project
$ npm init

npm 是一个 Node.js 包管理工具。必须安装 Node.js 才能使用 npm。如果您还没有安装Node.js,请参考本博客的以下文章提前安装。

准备 React 开发所需的文件

接下来,准备要在项目中使用的文件。

在本说明中,我们将使用以下三个文件。

  • Hello.tsx:用于在 TypeScript 中编写 React 的文件
  • bundle.js:用 TypeScript 编写的 Hello.tsx 被转译为 JavaScript 并最终由 webpack 组合的文件。
  • index.html : 入口文件,它是 React 应用程序的主体,它读取 bundle.js 并输出 React 组件

在以下目录结构下创建上述文件。(Tsconfig.json, webpack.config.js, webpack-product.config.js 是TypeScript和webpack的配置文件,后面会详细说明。)

1
2
3
4
5
6
7
8
9
10
11
12
13
typescript-react-project/

├─ src/
│ └─ Hello.tsx

├─ dist/
│ └─ bundle.js

├─ index.html

├─ tsconfig.json
├─ webpack.config.js
└─ webpack-product.config.js

打开创建好的index.html文件,写成如下。使用此index.html文件通过webpack加载 bundle.js 输出。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!doctype html>

<html>

<head>
<meta charset="utf-8">
<title>Hello React & TypeSctipt</title>
</head>

<body>
<div class="content"></div>
<script src="./dist/bundle.js"></script>
</body>

</html>

索引.html

现在你已经准备好了第一次。我将从下面解释环境构建。

npm 包安装

在本说明中,它是通过npm命令安装的,但您可以通过yarn安装它。

网络包安装

webpack 是一个工具,它最终将与项目相关的所有文件合并到一个 js 文件中,同时解析每个依赖项。

使用以下命令在您的项目目录中安装 webpack。

1
$ npm install --save-dev webpack

安装 react 和 react-dom

react实际上是react的主体,react-dom是一个包,用于将用 react 构建的 DOM(虚拟 DOM)转换为可以被浏览器读取的原始 DOM。

使用以下命令在您的项目目录中安装 react 和 react-dom。

1
$ npm install --save react react-dom @types/react @types/react-dom

另外,这里还安装了包前面带有前缀@types/的那个。这是一个 react 和 react-dom类型定义文件,从“types”这个词可以看出。从 TypeScript 2 开始,您可以使用 npm 管理类型定义文件,并且可以通过 npm 进行安装。

我认为通过消除像以前一样使用 tsd 和 Typings 进行管理的需要,已经消除了复杂性。类型定义文件存储在node_modules /@types目录中,因此您可以实际查看该文件以了解类型是如何定义的。

安装 typescript、awesome-typescript-loader、source-map-loader

TypeScript 顾名思义就是TypeScript的主体。awesome- typescript -loader是一个包,用于将基于配置文件 ( tsconfig.json ) 的 TypeScript 代码转换为带有 webpack 的 JavaScript。source-map-loader是一个用于从所有 TypeScript 条目中提取源映射并使用 webpack 生成源映射的包。

使用以下命令在项目目录中安装 typescript、awesome-typescript-loader 和 source-map-loader。

1
$ npm install --save-dev typescript awesome-typescript-loader source-map-loader

你可以使用ts-loader而不是 awesome-typescript-loader 。但是,awesome-typescript-loader 更快

打字稿设置 (tsconfig.json)

安装包后,立即设置 TypeScript。tsconfig.json使用该文件配置 TypeScript 转译设置。基于此设置,awesome-typescript-loader 和 webpack 会将用 TypeScript 编写的代码转换为 JavaScript。

首先,tsconfig.json直接在项目目录下创建一个文件。

1
$ touch tsconfig.json

tsconfig.json创建文件后,打开文件,如下写。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
{
"compilerOptions": {
"outDir": "./dist/",
"sourceMap": true,
"strictNullChecks": true,
"strictPropertyInitialization": true,
"noImplicitAny": true,
"noImplicitReturns": true,
"module": "commonjs",
"target": "es5",
"jsx": "react"
},
"include": [
"./src/**/*"
]
}

配置文件

以上只是一个例子。tsconfig.json 中的设置方法请参考以下内容。

在这个示例中,strictNullChecks(null和undefined值在所有类型的范围之外,禁止除自身和any之外的分配),strictPropertyInitialization(不允许undefined的类的属性没有在构造函数中初始化。noImplicitAny(禁止事物)、(禁止使用隐式任何类型的表达式和声明)、noImplicitReturns(禁止函数中返回值的代码路径) true。这些设置允许在转译期间进行严格的类型检查。如果您是 TypeScript 的新手,在某些情况下这样做是个好主意false

webpack 设置 (webpack.config.js)

完成 TypeScript 设置后,下一步就是配置 webpack。Webpack 设置在webpack.config.js文件中完成。将根据设置执行 TypeScript 转译和 React 构建。

首先,直接在你的项目目录下创建一个webpack.config.js文件。

1
$ touch webpack.config.js

创建好webpack.config.js文件后,打开文件如下写。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
module.exports = {
entry: './src/Hello.tsx',
output: {
filename: 'bundle.js',
path: __dirname + '/dist',
},

// 启用用于调试的源码图输出。
devtool: 'source-map',

resolve: {
// 添加'.ts'和'.tsx'作为可解析的扩展名.
extensions: ['.ts', '.tsx', '.js', '.json'],
},

module: {
rules: [
// 允许'awesome-typescript-loader'处理扩展名为.ts和.tsx的文件。
{ test: /\.tsx?$/, loader: 'awesome-typescript-loader' },

// 所有输出的.js文件都有一个用'source-map-loader'重新制作的源图。
{ enforce: 'pre', test: /\.js$/, loader: 'source-map-loader' },
],
},
};

webpack.config.js

有关webpack.config.js文件的更多信息,请参见下文。

用 TypeScript 编写 React – Hello World

现在你有一个用于 React 的 TypeScript 环境。最后,让我们用 TypeScript 编写 React。为了感受 TypeScript 的静态类型,我们将实现有点复杂的“Hello World”,并将表单中输入的字符串输出为“Hello ○○”。

样本

下面是一个示例。请在输入表格中实际输入字符,然后按“Say Hello”按钮。

maechabin / 打字稿反应演示

关于 TypeScript 中的 JSX

JSX 语法在 React 中已经很出名。使用 JSX,您可以像 HTML (XML) 一样通过 React 编写 DOM 输出。JSX 最终转换为 JavaScript 并使用。TypeScript 甚至还得支持 JSX (TSX),内嵌,类型检查,可以原样使用,比如 Transformer 堆到 JavaScript

要将 JSX 与 TypeScript 一起使用,您需要做以下两件事。

  • 该文件的扩展名.tsx到
  • 在tsconfig.json 中启用jsx选项

详情请见下文。

用 TypeScript 编写的 React 代码

上面的 Hello World 示例是用 TypeScript 编写的,如下所示。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
import * as React from 'react';
import * as ReactDOM from 'react-dom';

/** Hello组件要获得的道具的类型定义 */
interface HelloProps {
greeting: string;
}
/** 你好组件的状态的类型定义 */
interface HelloState {
inputName: string;
outputName: string;
}
/** 你好组件 */
class Hello extends React.Component<HelloProps, HelloState> {
constructor(props: HelloProps) {
super(props);
this.state = {
inputName: '',
outputName: '',
};
this.handleChange = this.handleChange.bind(this);
this.handleClick = this.handleClick.bind(this);
}
handleChange(event: React.FormEvent<HTMLInputElement>): void {
this.setState({
inputName: event.currentTarget.value,
});
}
handleClick(): void {
this.setState({
inputName: '',
outputName: this.state.inputName,
});
}
render(): JSX.Element {
const { greeting } = this.props;
return (
<div>
<Input name={this.state.inputName} handleChange={this.handleChange} />
<Button handleClick={this.handleClick} />
<Output greeting={greeting} name={this.state.outputName} />
</div>
);
}
}

/** 输入组件要获得的道具的类型定义 */
interface InputProps {
name: string;
handleChange: (event: React.FormEvent<HTMLInputElement>) => void;
}
/** 输入组件 */
const Input: React.SFC<InputProps> = props => {
const { name, handleChange }: InputProps = props;
return <input type="text" placeholder="Input any name." value={name} onChange={handleChange} />;
};

/** 在Button组件中获得的道具的类型定义 */
interface ButtonProps {
handleClick: () => void;
}
/** 按钮组件 */
const Button: React.SFC<ButtonProps> = props => {
const { handleClick }: ButtonProps = props;
return <button onClick={handleClick}>Say Hello</button>;
};

/** 输出组件要检索的道具的类型定义 */
interface OutputProps {
greeting: string;
name: string;
}
/** 输出组件 */
const Output: React.SFC<OutputProps> = props => {
const { greeting, name }: OutputProps = props;
const hasName: boolean = name !== '';
const result: JSX.Element | '' = hasName ? (
<h1>
{greeting} {name}!
</h1>
) : (
''
);
return <div>{result}</div>;
};

/** 启动程序 */
ReactDOM.render(<Hello greeting="Hello!!" />, document.querySelector('.content'));

你好.tsx

对于 React 的类型定义,我想你应该看到“node_modules>@type>react>index.d.ts”文件。顺便说一下,典型的定义如下。

  • Component : class Component 实现 ComponentLifecycle {…}
  • PureComponent : class PureComponent 扩展 Component {}
  • 功能组件类型 SFC

    = StatelessComponent

  • JSX : JSX.Element

另外,TypeScript 语法的解释请参考官方文档等。

此示例的代码也已上传到 GitHub,因此请检查。

运行 webpack(TypeScript 转译)

在 TypeScript 中编写 React 代码后,最后将其转换为有效的 JavaScript,以便浏览器可以读取。由于上面已经完成了 TypeScript 和 webpack 的设置,所以你所要做的就是运行 webpack。

使用npm命令运行 webpack 。通过在package.json文件中注册执行 webpack 的命令,可以将命令执行为“npm run ○○”

打开package.json文件并在脚本字段部分写入以下内容。

1
2
3
4
5
6
7
{
...
"scripts": {
"build": "webpack"
},
...
}

包.json

在 package.json文件中注册命令后,webpack 将使用以下命令执行,并将构建结果输出到bundle.js文件。

1
$ npm run build

这时候会进行TypeScript静态类型检查(如果类型有问题,会出现转译错误)。同时,代码中去掉了类型注解和接口

如果文件构建没有任何问题,请在浏览器中打开index.html并检查内容。

监控文件更新并运行 webpack

使用上面的命令,每次更新文件时都必须点击npm run build,这真的很烦人。– –如果您使用watch选项运行 webpack,它将监视文件更新。

将以下内容添加到package.json文件中。

1
2
3
4
5
6
7
8
{
...
"scripts": {
"build": "webpack",
"watch": "webpack --watch"
},
...
}

包.json

如果您点击以下命令,它将监视文件的更新,并且每次保存文件时,TypeScript 都会检查类型并构建。

1
$ npm run watch

在开发过程中不要在 bundle.js 中包含 react 和 react-dom

正如上面提到的,如果您监视文件更新,你每次运行的WebPack保存文件时,它会花费很长的时间来建立,如果你尝试加入反应或反应-DOM在你的bundle.js文件每一次..

因此,如果您在webpack.config.js文件中添加externals字段并写入: webpack将通过全局变量React和ReactDOM处理 react 和 react-dom 。

1
2
3
4
5
6
7
module.exports = {
...
externals: {
"react": "React",
"react-dom": "ReactDOM"
},
};

webpack.config.js

因此,在这种情况下,index.html文件应该使用script元素与react.js文件和react-dom.js文件一起加载。

1
2
<script src="./node_modules/react/dist/react.js"></script>
<script src="./node_modules/react-dom/dist/react-dom.js"></script>

webpack.config.js

这样做,浏览器的缓存将有效,开发将快速进行。请尝试一下。

构建为商业版本

最后,我将向您展示如何将其构建为商业版本。默认情况下,React 处于开发模式,其中包含额外信息。零售版也不需要开发过程中所需的这些信息。因此,在构建为商业版本时,需要包含此信息。通过这样做,您还可以加快应用程序本身的速度。

准备配置文件

webpack.config.js我创建了一个文件作为 webpack 配置文件,但是我会创建一个新的配置文件来单独构建产品版本。给它一个webpack-production.config.js任意的文件名以区别于普通的配置文件。

1
$ touch webpack-production.config.js

webpack-production.config.js创建文件后,打开文件,如下写。webpack.config.js它将被添加到文件中。在添加的部分上放置标记。

1
/* webpackを読み込みます */var webpack = require('webpack'); module.exports = {  entry: "./src/Hello.tsx",  output: {    filename: "bundle.js",    path: __dirname + "/dist"  },   // デバッグ用にソースマップの出力を有効にします。  devtool: "source-map",   resolve: {    // 解決可能な拡張子として、'.ts' と '.tsx' を追加します。    extensions: [".ts", ".tsx", ".js", ".json"]  },   module: {    rules: [      // 拡張子が .ts と .tsx のファイル を 'awesome-typescript-loader' で      // 扱うようにします。      { test: /\.tsx?$/, loader: "awesome-typescript-loader" },       // 出力されるすべての .js ファイルは、'source-map-loader' で      // 再加工されたソースマップを持ちます。      { enforce: "pre", test: /\.js$/, loader: "source-map-loader" }    ]  },  /** プラグインの設定 */  plugins: [    /** DefinePluginの実行 */    new webpack.DefinePlugin({      // process.env.NODE_ENVを'production'に置き換える      'process.env.NODE_ENV': JSON.stringify('production')    }),    /** UglifyJsPluginの実行 */    new webpack.optimize.UglifyJsPlugin({      compress: {        // 圧縮する時に警告を除去する        warnings: false      }    })  ],};

webpack-production.config.js

注册产品版本构建命令

当 webpack-production.config.js准备就绪时,在package.json文件中注册生产构建命令。打开package.json文件并在脚本字段部分写入以下内容。

1
2
3
4
5
6
7
8
9
{
...
"scripts": {
"watch": "webpack --watch",
"build": "webpack",
"build:production": "webpack --config webpack-production.config.js"
},
...
}

webpack-production.config.js

运行 webpack 并构建为商业版本

执行以下命令在bundle.js文件中构建产品版本。

1
$ npm run build

使用 create-react-app

如何搭建开发环境我已经讲解了很长时间了,但是你也可以使用create-react-app搭建环境,用TypeScript写React。最后但并非最不重要的。

create-react-app 是一个方便的工具,它使用Facebook 开发的单个命令构建 React 开发环境。有关 create-react-app 的更多信息,请参见下文。

当创建这个创造-反应-应用项目目录,正好砸在命令和选项- -脚本版本=反应的脚本-TS,如下图所示,并做出反应对应打字稿将建成开发环境我会的。

1
$ create-react-app typescript-react-project --scripts-version=react-scripts-ts

有关使用方法等详细信息,请参阅以下内容。

概括

现在你有了在 TypeScript 中编写 React 的环境。平时用Babel准备开发环境的人会明白,Babel 部分刚刚被 TypeScript 取代。然后,虽然这次我没有提到,但是如果你准备通过TSLint,webpack的HMR(Hot Module Replacement)等进行语法检查,开发会更舒服。我希望您根据需要为这个领域做好准备。

在这篇文章中,我解释了以下内容。如果有你想再次复习的部分,请复习。

  • 安装包写
  • 使用 tsconfig.json 进行 TypeScript 配置
  • 使用 webpack.config.js 配置 Webpack
  • 关于在开发过程中构建
  • 关于构建产品版本

这一次,我没有详细解释如何编写TypeScript。我还有很多不确定性。重点是如何使用接口泛型

基本上,在学习 TypeScript 时最好阅读官方文档。以下书籍于今年 2 月发行,因此我认为它们会很有用。最后,我想介绍一下。

  • Step 1 - React tutorial: Project Setup

https://www.youtube.com/watch?v=ZP2dCeESF5A&list=PLCTHcU1KoD98krAf33Wuf70hRNOHMMfDw