Foreword
This article assumes you probably understand what is TypeScript, mainly on how to install and use TypeScript in React old project.
The main purpose of this writing is to explain TypeScript online about this, although many, but they are some of the grammatical concept or a simple example, a real transformation of the old project using TypeScript React few articles.
So in practice the transformation of a record here React project.
Blog content section with reference to TypeScript Chinese network , this site has a Chinese version of the official document.
Installation TypeScript and associated libraries
For integrated scaffolding TypeScript can skip this step, here mainly to talk about how to integrate a TypeScript React scaffolding.
First execution
npm install --save @types/react @types/react-domThis step is mainly to obtain react and react-dom's declaration file, because not all libraries have TypeScript statement file, by running
npm install --save @types/库名字Way to get TypeScript declaration file.
Only get the declaration file, type checking can be achieved on this library.
If you use some other libraries do not declare a file, you may also need to do so.
Then run the command:
npm install --save-dev typescript awesome-typescript-loader source-map-loaderAt this point, we installed typescript, awesome-typescript-loader and source-map-loader.
awesome-typescript-loader allows Webpack use TypeScript standard configuration file tsconfig.json compiled TypeScript code.
sourcemap-loader use sourcemap TypeScript output file to tell when webpack generate their own sourcemaps, the source map, convenient debugging.
Add TypeScript profile
Tsconfig.json create a file in the root directory of the project, the following is an example of content:
{
"compilerOptions": {
"allowSyntheticDefaultImports": true, // 允许从没有设置默认导出的模块中默认导入。这并不影响代码的输出，仅为了类型检查。
"outDir": "./dist/", // 重定向输出目录
"sourceMap": true, // 生成相应的 .map文件
"noImplicitAny": true, // 在表达式和声明上有隐含的 any类型时报错。
"module": "esnext", // 模块引入方式
"target": "esnext", // 指定ECMAScript目标版本
"moduleResolution": "node", // 决定如何处理模块
"lib": [
"esnext",
"dom"
], // 编译过程中需要引入的库文件的列表。
"skipLibCheck": true, //忽略所有库中的声明文件（ *.d.ts）的类型检查。
"jsx": "react" // 在 .tsx文件里支持JSX
},
"include": [
"./src/**/*", // 这个表示处理根目录的src目录下所有的.ts和.tsx文件，并不是所有文件
]
}skipLibCheck very important, not every library can be detected by the typescript.
moduleResolution set node is also important. If you did not set, when looking statements typescript file in node_modules not go to this folder.
More information is available in the configuration file: here .
Configuration webpack
Here are some configuration TypeScript need to use in webpack in.
rule configuration file parsing tsx
Examples are as follows:
module: {
rules: [
{
test: /\.jsx?$/,
exclude: /(node_modules)/,
use: {
loader: 'babel-loader',
options: {
presets: ['react', 'env', 'stage-0', 'stage-3'],
plugins: [
'transform-decorators-legacy',
['import', { libraryName: 'antd', style: 'css' }], // `style: true` 会加载 less 文件
],
},
},
},
{ test: /\.tsx?$/, loader: "awesome-typescript-loader" }
//...
]
//...
}In fact, just a line to pay more:
{ test: /\.tsx?$/, loader: "awesome-typescript-loader" }Note that this line need to add the following jsx parsing rule, because the rule execution order is from the bottom up, to parse and tsx js ts re-parsing and jsx.
Of course, with
enforce: 'pre'Adjusted rule order can not care about that.
Solve the problem of using css-moudule
If the code used in this code:
import styles from './index.css'Then it may report the following error:
Cannot find module './index.css'The solution is to file in the root directory create a file called declaration.d.ts, and says:
declare module '*.css' {
const content: any;
export default content;
}This line of code is declared for all css files.
At the same time we need to change tsconfig.json previous file, this file will be placed in the path include the:
"include": [
"./src/**/*",
"./declaration.d.ts"
]This problem by installing some libraries there are ways to solve the problem, but will generate a statement for each css file, it feels a bit strange, I consider myself a bit here above using this method.
Name suffix omitted for configuring
If you are accustomed to using
import Chart from './Chart/index.jsx'Suffix is omitted, namely:
import Chart from './Chart/index'Then resolve webpack the same need to join ts and tsx:
resolve: {
extensions: [".ts", ".tsx", ".js", ".jsx"]
},The introduction of Ant Design
In fact this thing Ant Design's official website there how to use in TypeScript: use in the typescript .
So why is it you want listed?
As I pointed out here that, for the old project Ant Design in terms of installed (usually loaded on demand with the right), during configuration TypeScript above the basic document of no use.
Looks like all online documentation can be found to the program, but in fact we need to do is install the TS-Import-plugin .
npm i ts-import-plugin --save-devThen prior to binding Awesome-the typescript-Loader , as follows in webpack
const tsImportPluginFactory = require('ts-import-plugin')
module.exports = {
// ...
module: {
rules: [
{
test: /\.tsx?$/,
loader: "awesome-typescript-loader",
options: {
getCustomTransformers: () => ({
before: [tsImportPluginFactory([
{
libraryName: 'antd',
libraryDirectory: 'lib',
style: 'css'
}
])]
}),
},
exclude: /node_modules/
}
]
},
// ...
}Configured, ready before the amendment
Note that, until this point, in fact, your project is still not used TypeScript during compilation.
Because we will only deal here .ts and .tsx suffix with TypeScript file, unless set to true in the configuration allowJs.
Before using, assume that you already have knowledge of TypeScript grammar, do not know can refer to: five minutes to get started TypeScript .
That, after all these steps above, your existing code without modification suffix should be able to continue to use.
If you are using TypeScript, and then ts tsx new file or modify the original file extension name.
Next will list some typical examples of modification.
Modified example of functional components (including children)
import React from 'react'
import styles from './index.css'
interface ComputeItemProps {
label: string;
children: React.ReactNode;
}
function ComputeItem({ label, children }: ComputeItemProps) {
return <div className={styles['item']}>
<div className={styles['label']}>{label}:</div>
<div className={styles['content']}>{children}</div>
</div>
}
export default ComputeItem
这个例子中语法都可以在TypeScript的官网查到，唯一需要注意的是children的类型是React.ReactNode。class component modified example (defined event parameters including the function declaration)
import React from 'react'
import styles from './index.css'
interface DataSourceItem {
dayOfGrowth: string;
netValueDate: string;
}
interface ComputeProps {
fundCode: string;
dataSource: DataSourceItem[];
onChange(value: Object): void;
}
export default class Compute extends React.Component<ComputeProps, Object> {
// 改变基金代码
handleChangeFundCode = (e: React.ChangeEvent<HTMLInputElement>) => {
const fundCode = e.target.value
this.props.onChange({
fundCode
})
}
render() {
//...
);
}
}This example shows how to declare class components:
React.Component<ComputeProps, Object>The syntax may seem strange, but this is TypeScript generics, that has been C # or Java experience should be well understood.
Wherein the first type of a parameter defines Props, second parameter defines the type of State.
And react in the event parameter types should be defined as follows:
React.ChangeEvent<HTMLInputElement>Here, too, the use of generics, represent the top of the Change event types Input.
While the function type definition Prop assembly, here is not separately listed.
These few examples is relatively typical example TypeScript and React combination.
Process variables on the window
Use written on the window of global variables will be prompted to attribute does not exist on the window.
To deal with this, you can define variables in declaration.d.ts this file:
// 定义window变量
interface Window{
r:string[]
}Where r is the variable name.
to sum up
I had wanted to write a few more examples, but Dota2 updated version, cause I do not want to continue writing the future, if there is time to update common example of it.
This article focuses only on the installation and integration of TypeScript in React old projects, do not involve as much as possible with the introduction of TypeScript concrete syntax, and introduce these things because it is not a blog can do it up.
The article, if oversight is also please correct me, hoping to help you in the face TypeScript hesitation.