You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: README.md
+17-17Lines changed: 17 additions & 17 deletions
Original file line number
Diff line number
Diff line change
@@ -6,29 +6,29 @@ If you are starting a new React project instead of converting one, you can use [
6
6
7
7
Adopting TypeScript in any project can be broken down into 2 phases:
8
8
9
-
* Adding TypeScript compiler (tsc) to your build pipeline.
9
+
* Adding the TypeScript compiler (tsc) to your build pipeline.
10
10
* Converting JavaScript files into TypeScript files.
11
11
12
12
## Understand the existing JavaScript project
13
13
14
-
Before we dive into TypeScript adoption, let's take a look at the structure of the TicTacToe app. It contains a few components and looks like below with or without TypeScript.
14
+
Before we dive into TypeScript adoption, let's take a look at the structure of the TicTacToe app -- it contains a few components and looks like the below (with or without TypeScript).
15
15
16
16
<palign="center">
17
17
<img src ="image/components.png"/>
18
18
</p>
19
19
20
-
As shown in `package.json`, the app already includes React/ReactDOM, Webpack as bundler & task runner, and [babel-loader](https://github.com/babel/babel-loader) Webpack plugin to use Babel for ES6 and JSX transpilation. The project has the below overall layout before we adopt TypeScript:
20
+
As shown in `package.json`, the app already includes React/ReactDOM, Webpack as the bundler & task runner, and the [babel-loader](https://github.com/babel/babel-loader) Webpack plugin to use Babel for ES6 and JSX transpilation. The project initially has the below overall layout before we adopt TypeScript:
21
21
22
22
```txt
23
23
TicTacToe_JS /
24
-
|---- css/ // css style sheets
25
-
|---- src/ // source files
24
+
|---- css/ // css style sheets
25
+
|---- src/ // source files
26
26
|---- app.jsx // the App React component
27
27
|---- board.jsx // the TicTacToe Board React component
First off, open terminal and `cd` to the `TicTacToe_JS` folder. Install dependencies in `package.json`.
41
+
To get started, open a terminal and `cd` to the `TicTacToe_JS` folder. Install all dependencies defined in `package.json`.
42
42
43
43
```sh
44
44
cd TicTacToe_JS
@@ -57,11 +57,11 @@ Get the type declaration files (.d.ts files) from [@types](https://blogs.msdn.mi
57
57
npm install --save @types/react @types/react-dom
58
58
```
59
59
60
-
If you are using an older version of React/ReacDOM that are incompatible with the latest .d.ts files from @types, you can specify version number for `@types/react`and`@types/react-dom` in `package.json`.
60
+
If you are using an older version of React or ReacDOM that is incompatible with the latest .d.ts files from @types, you can specify a version number for `@types/react`or`@types/react-dom` in `package.json`.
61
61
62
62
### Configure TypeScript
63
63
64
-
Next, configure TypeScript by creating a `tsconfig.json` file in the `TicTacToe_JS` folder, and add,
64
+
Next, configure TypeScript by creating a `tsconfig.json` file in the `TicTacToe_JS` folder, and add:
65
65
66
66
```json5
67
67
{
@@ -81,19 +81,19 @@ Next, configure TypeScript by creating a `tsconfig.json` file in the `TicTacToe_
81
81
}
82
82
```
83
83
84
-
You can edit some of the options or add more based on your own need. See more full [compiler options](https://www.typescriptlang.org/docs/handbook/compiler-options.html).
84
+
You can edit some of the options or add more based on your project's requirements. See more options in the full list of[compiler options](https://www.typescriptlang.org/docs/handbook/compiler-options.html).
85
85
86
86
### Set up build pipeline
87
87
88
-
To add TypeScript compilation as part of our build process, you need to modify the Webpack config file `webpack.configure.js`. This section is specific to Webpack. However, if you are using a different task runner (e.g. Gulp) for your React/Babel project, the idea is the same - replace the Babel build step with TypeScript, as TypeScript also offers transpiling to lower ECMAScript versions and JSX transpilation with a shorter build time in most cases. If you wish, you can also keep Babel by adding a TypeScript build step before Babel and feeding its output to Babel.
88
+
To add TypeScript compilation as part of our build process, you need to modify the Webpack config file `webpack.config.js`. This section is specific to Webpack. However, if you are using a different task runner (e.g. Gulp) for your React/Babel project, the idea is the same - replace the Babel build step with TypeScript, as TypeScript also offers transpiling to lower ECMAScript versions and JSX transpilation with a shorter build time in most cases. If you wish, you can also keep Babel by adding a TypeScript build step before Babel and feeding its output to Babel.
89
89
90
-
Generally, we need to change `webpack.config.js` in a few ways,
90
+
Generally, we need to change `webpack.config.js` in a few ways:
91
91
92
92
1. Expand the module resolution extensions to include `.ts` and `.tsx` files.
93
93
2. Replace `babel-loader` with `ts-loader`.
94
94
3. Add source-map support.
95
95
96
-
Let's modify `webpack.configure.js`as below,
96
+
Let's modify `webpack.config.js`with the below:
97
97
98
98
```js
99
99
module.exports= {
@@ -127,7 +127,7 @@ You can delete `.babelrc` and all Babel dependencies from `package.json` if you
127
127
128
128
Note that if you plan to adopt TypeScript in the entry file, you should change `entry: './src/app.jsx',` to `entry: './src/app.tsx',` as well. For the time being, we will keep it as `app.jsx`.
129
129
130
-
You now have the build pipeline correctly set up with TypeScript handling the transpilation. Try bundling the app with the following command and then open `index.html` in a browser,
130
+
You now have the build pipeline correctly set up with TypeScript handling the transpilation. Try bundling the app with the following command and then open `index.html` in a browser:
0 commit comments