React & TypeScript

React, TypeScript

之前看了一下 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。

Read More