diff --git a/README.md b/README.md index fbc80c2d..ad220e52 100644 --- a/README.md +++ b/README.md @@ -6,29 +6,29 @@ If you are starting a new React project instead of converting one, you can use [ Adopting TypeScript in any project can be broken down into 2 phases: -* Adding TypeScript compiler (tsc) to your build pipeline. +* Adding the TypeScript compiler (tsc) to your build pipeline. * Converting JavaScript files into TypeScript files. ## Understand the existing JavaScript project -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. +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).

-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: +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: ```txt TicTacToe_JS / - |---- css/ // css style sheets - |---- src/ // source files + |---- css/ // css style sheets + |---- src/ // source files |---- app.jsx // the App React component |---- board.jsx // the TicTacToe Board React component - |---- constants.js // some shared constants - |---- gameStateBar.jsx // GameStatusBar React component - |---- restartBtn.jsx // RestartBtn React component - |---- .babelrc // a list of babel presets + |---- constants.js // some shared constants + |---- gameStateBar.jsx // GameStatusBar React component + |---- restartBtn.jsx // RestartBtn React component + |---- .babelrc // a list of babel presets |---- index.html // web page for our app |---- package.json // node package configuration file |---- webpack.config.js // Webpack configuration file @@ -38,7 +38,7 @@ TicTacToe_JS / ### Install dependencies -First off, open terminal and `cd` to the `TicTacToe_JS` folder. Install dependencies in `package.json`. +To get started, open a terminal and `cd` to the `TicTacToe_JS` folder. Install all dependencies defined in `package.json`. ```sh cd TicTacToe_JS @@ -57,11 +57,11 @@ Get the type declaration files (.d.ts files) from [@types](https://blogs.msdn.mi npm install --save @types/react @types/react-dom ``` -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`. +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`. ### Configure TypeScript -Next, configure TypeScript by creating a `tsconfig.json` file in the `TicTacToe_JS` folder, and add, +Next, configure TypeScript by creating a `tsconfig.json` file in the `TicTacToe_JS` folder, and add: ```json5 { @@ -81,19 +81,19 @@ Next, configure TypeScript by creating a `tsconfig.json` file in the `TicTacToe_ } ``` -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). +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). ### Set up build pipeline -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. +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. -Generally, we need to change `webpack.config.js` in a few ways, +Generally, we need to change `webpack.config.js` in a few ways: 1. Expand the module resolution extensions to include `.ts` and `.tsx` files. 2. Replace `babel-loader` with `ts-loader`. 3. Add source-map support. -Let's modify `webpack.configure.js` as below, +Let's modify `webpack.config.js` with the below: ```js module.exports = { @@ -127,7 +127,7 @@ You can delete `.babelrc` and all Babel dependencies from `package.json` if you 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`. -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, +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: ```sh npx webpack