React & TypeScript

React, TypeScript

  1. 1. 环境构建
  2. 2. 第一个组件

之前看了一下 TypeScript 的知识，但是一直没有上手，最近开始结合 React 和 TypeScript 一起尝试了一下，感受还是很好的，所以写一下笔记。

环境配置没有参考其他东西，就是看了下 Webpack 和 TypeScript 的官方文档，使用 Webpack 进行构建还是比较简单的。

环境构建

创建一个项目目录，然后切换当前目录到项目目录下：

1
$ mkdir tsc && cd ./tsc

然后使用 npm 初始化项目：

1
$ npm init -y

然后创建一些项目文件：

1
2
$ mkdir build src
$ touch build/webpack.base.conf.js build/webpack.dev.conf.js build/webpack.prod.conf.js index.html src/index.tsx tsconfig.json

接下来，就可以安装一些依赖了：

1
2
3
$ npm i webpack webpack-cli webpack-merge webpack-dev-server -D
$ npm i html-webpack-plugin clean-webpack-plugin typescript ts-loader style-loader css-loader @types/react @types/react-dom -D
$ npm i react react-dom -S

可以注意到我们没有安装 babel 转译器，如果我们只写 .ts 或者 .tsx 文件，可以不安装 babel。如果要转译处理 .js 文件的话，还是要使用到 babel。

我们先写基础配置：

webpack.base.conf.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
27
28
29
30
31
32
33
const path = require('path');
const htmlWebpackPlugin = require('html-webpack-plugin');
const cleanWebpackPlugin = require('clean-webpack-plugin');

module.exports = {
  entry: path.resolve(__dirname, '../src/index.tsx'),
  output: {
    filename: '[name].[hash].js'
  },
  resolve: {
    extensions: ['*', '.js', '.json', '.ts', '.tsx']
  },
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        use: 'ts-loader',
        exclude: /node_modules/
      },
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader']
      }
    ]
  },
  plugins: [
    new htmlWebpackPlugin({
      inject: true,
      template: path.resolve(__dirname, '../index.html')
    }),
    new cleanWebpackPlugin(['dist'])
  ]
};

然后可以构造开发环境下的配置文件：

webpack.dev.conf.js

1
2
3
4
5
6
7
8
9
10
11
12
13
const merge = require('webpack-merge');
const path = require('path');
const baseConfig = require('./webpack.base.conf');

module.exports = merge(baseConfig, {
  mode: 'development',
  devtool: 'source-map',
  devServer: {
    port: 9999,
    open: true,
    contentBase: path.resolve(__dirname, '../dist')
  }
});

然后添加 npm 脚本到 package.json 中：

1
2
3
4
"scripts": {
  "test": "echo \"Error: no test specified\" && exit 1",
  "dev": "webpack-dev-server --config ./build/webpack.dev.conf.js"
}

然后添加我们的 ts 配置到 tsconfig.json：

1
2
3
4
5
6
7
8
9
10
11
12
{
  "compilerOptions": {
    "outDir": "./dist/",  // 打包输出目录
    "noImplicitAny": true,  // 默认必须为变量指定类型
    "module": "es6", // 使用 ESM 模块化方案
    "target": "es5", // 代码编译成 ES 5
    "jsx": "react", // 开启 JSX，使用 react 方式编译，如果要使用 babel 编译，那就将 jsx 设置为 ‘preserve’
    "allowJs": true, // 允许编译 js 代码
    "sourceMap": true,  // 编译后同时产出 map 文件
    "removeComments": true // 移除注释
  }
}

更多的配置项解释，参考：翻译 | 开始使用 TypeScript 和 React。

写完了以后我们就可以添加内容到我们的开发文件中了：

index.html

1
2
3
4
5
6
7
8
9
10
11
12
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <div id="root"></div>
</body>
</html>

src/index.tsx

1
2
3
4
5
6
7
import * as React from 'react';
import * as ReactDOM from 'react-dom';

ReactDOM.render(
  <h1>Hello TSX!</h1>,
  document.getElementById('root') as HTMLElement
);

可以注意到引入 React 和 ReactDOM 的方式和之前有一些不同。
另外由于 TypeScript 的强制转换符 <> 和 JSX 的元素相冲突，所以使用 as 作为强制转换符。

运行 npm run dev，可以查看效果。

使用 TypeScript 以后，项目配置要稍微简单一点。配置好开发环境以后，就可以写代码啦！

第一个组件

我以一个 Header 组件为例，效果如下：

新建一个 Header.tsx 文件和一个 Header.css 文件到 src/components 下。

由于头部栏的标题文字应该是可以修改的，然后右边的 menu 应该是可以自定义的，所以这些数据应该都可以通过 props 传入我们的 Header 组件。

写我们的 Header 组件：

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
// Header.tsx

// 引入 React
import * as React from 'react';
// 引入我们的组件样式
import './Header.css';

// 定义的接口，用于规范 Header 组件的 props，向外界公开，
// 便于在其他组件中引用时实现这个接口，减少错误
export interface HeaderProps {
  title: string; // 必须给定 title，一个 string 类型的值
  menus?: MenuItemProps[];  // menus 是可选属性，是一个符合 MenuItemProps 接口规范的对象的数组
  height?: string;  // 问号都代表可选项
  bgColor?: string;
}

// 这个接口定义了 MenuItem 组件的 props 规范，同时也定义了
// HeaderProps 中 menus 数组的元素的规范
interface MenuItemProps {
  name: string;  // 给定 menu 的名称
  href: string;  // 给定 menu 要跳转的链接
}

// 定义了 Header 组件的 state 的规范
interface HeaderState {
  isVisible: boolean // 代表 Header 组件是否可见
}

// Header 组件
// 注意 React.Component 后面的泛型，就是我们上方定义的接口，它们分别制定了组件的 props 和 state 的规范
class Header extends React.Component<HeaderProps, HeaderState> {
  // 指定组件实例的 state，必须符合 HeaderState 的规范
  state = {
    isVisible: true
  }
  render() {
    const {
      title,
      menus = [],
      height = '50px',
      bgColor = 'lightblue'
    } = this.props;  // 从 props 获取值，其中可选项都有默认值
    const style = {
      height,
      backgroundColor: bgColor
    };  // 构造 Header 内联样式
    return this.state.isVisible ? <div style={style} className="header">
      <span>{title}</span>
      <div className="header-menus">
        {
          menus.map(item => <MenuItem {...item}/>)
        }
      </div>
    </div> : null;
  }
}

// MenuItem 组件
// state 的规范是一个 object，未指定具体接口类型
class MenuItem extends React.Component<MenuItemProps, object> {
  render() {
    const { name, href } = this.props;
    return <a className="header-menu-item" href={href} key={href}>
      {name}
    </a>
  }
}

// 最后向外部暴露 Header 组件
export default Header;

可以看到 TypeScript 结合 React 其实很好用，尤其在规范 props 的时候很好用，能够避免很多编程时候的错误。而 IDE 的提示能够更加地方便我们开发。写起来何止舒服，简直舒服啊～

然后在 Header.css 写一下我们的样式：

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
html,
body,
div {
  margin: 0;
  padding: 0;
  font-size: 16px;
}

.header {
  font-size: 1.5rem;
  line-height: 1rem;
  padding: 1rem;
  box-sizing: border-box;
  position: relative;
}

.header-menus {
  position: absolute;
  right: 1rem;
  top: 50%;
  transform: translateY(-50%);
}

.header-menu-item {
  margin: 0 .5rem;
}

这里仅仅是做个示例，排版没有在意太多的通用性，大家看看就好～

然后我们就可以在 index.tsx 中使用我们的 Header 组件了：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import Header, { HeaderProps } from './components/Header';  // 引入接口规范和组件


// 构造 Header 组件的 props，必须符合 HeaderProps 接口规范。
// 在写的过程中 IDE 也能给我们很多的提示，方便了开发
const headerProps: HeaderProps = {
  title: 'Hello TSX!',
  menus: [{
    name: 'menu1',
    href: 'https://www.zhongdeming.fun'
  }, {
    name: 'menu2',
    href: 'https://www.baidu.com'
  }],
  bgColor: 'lightyellow'
};

ReactDOM.render(
  <Header {...headerProps}/>,
  document.getElementById('root') as HTMLElement
);

这样一个组件就写完了，可以感受到 TypeScript 确实能够加速我们的开发，减少开发中的错误。

下面是一些利用 TypeScript 开发的时候 IDE 给出的提示的截图：




prev： next：