Skip to content
This repository was archived by the owner on Nov 16, 2023. It is now read-only.

Housekeeping upgrades #22

Merged
merged 2 commits into from
Jan 15, 2020
+10,143 −25
Merged

Housekeeping upgrades #22

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
1c152a7
TicTacToe_JS config upgrade
matthewliuswims Jan 7, 2020
3a407d1
TicTacToe_TS config upgrade
matthewliuswims Jan 8, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 5 additions & 5 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -45,10 +45,10 @@ cd TicTacToe_JS
npm install
```

Additionally, install TypeScript (2.3 or higher), [awesome-typescript-loader](https://www.npmjs.com/package/awesome-typescript-loader) and [source-map-loader](https://www.npmjs.com/package/source-map-loader) as dev dependencies if you haven't. awesome-typescript-loader is a Webpack plugin that helps you compile TypeScript code to JavaScript, much like babel-loader for Babel. There are also other alternative loaders for TypeScript, such as [ts-loader](https://github.com/TypeStrong/ts-loader). source-map-loader adds source map support for debugging.
Additionally, install TypeScript (3 or higher), [ts-loader](https://www.npmjs.com/package/ts-loader) and [source-map-loader](https://www.npmjs.com/package/source-map-loader) as dev dependencies if you haven't. ts-loader is a Webpack plugin that helps you compile TypeScript code to JavaScript, much like babel-loader for Babel. There are also other alternative loaders for TypeScript! Source-map-loader adds source map support for debugging.

```sh
npm install --save-dev typescript awesome-typescript-loader source-map-loader
npm install --save-dev typescript ts-loader source-map-loader
```

Get the type declaration files (.d.ts files) from [@types](https://blogs.msdn.microsoft.com/typescript/2016/06/15/the-future-of-declaration-files/) for any library in use. For this project, we have React and ReactDOM.
Expand Down Expand Up @@ -90,7 +90,7 @@ To add TypeScript compilation as part of our build process, you need to modify t
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 `awesome-typescript-loader`.
2. Replace `babel-loader` with `ts-loader`.
3. Add source-map support.

Let's modify `webpack.configure.js` as below,
Expand All @@ -109,7 +109,7 @@ module.exports = {
module: {
rules: [
// changed from { test: /\.jsx?$/, use: { loader: 'babel-loader' } },
{ test: /\.(t|j)sx?$/, use: { loader: 'awesome-typescript-loader' } },
{ test: /\.(t|j)sx?$/, use: { loader: 'ts-loader' } },
// addition - add source-map support
{ enforce: "pre", test: /\.js$/, loader: "source-map-loader" }
]
Expand Down Expand Up @@ -155,7 +155,7 @@ On line 1 `import React from "react";`, change the import statement to `import *

On line 3 `export class GameStateBar extends React.Component {`, change the class declaration to `export class GameStateBar extends React.Component<any, any> {`. The type declaration of `React.Component` uses [generic types](https://www.typescriptlang.org/docs/handbook/generics.html) and requires providing the types for the property and state object for the component. The use of `any` allows us to pass in any value as the property or state object, which is not useful in terms of type checking but suffices as minimum effort to appease the compiler.

By now, awesome-typescript-loader should be able to successfully compile this TypeScript component to JavaScript. Again, try bundling the app with the following command and then open `index.html` in a browser,
By now, ts-loader should be able to successfully compile this TypeScript component to JavaScript. Again, try bundling the app with the following command and then open `index.html` in a browser,

```sh
npx webpack
Expand Down
7 changes: 5 additions & 2 deletions TicTacToe_JS/.babelrc
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,6 @@
{
"presets": ["es2015", "react"]
}
"presets": [
"@babel/preset-env",
"@babel/preset-react"
]
}
4 changes: 2 additions & 2 deletions TicTacToe_JS/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,8 +4,8 @@
<meta charset="utf-8" />
<title>TicTacToe with TypeScript and React</title>
<link rel="stylesheet" href="css/style.css">
<script src="./node_modules/react/dist/react.js"></script>
<script src="./node_modules/react-dom/dist/react-dom.js"></script>
<script src="./node_modules/react/umd/react.production.min.js"></script>
<script src="./node_modules/react-dom/umd/react-dom.production.min.js"></script>
</head>
<body>
<div id="content"></div>
Expand Down
Loading