add typescript support. fixed #14

Author: lxieyang

README.md

@@ -7,7 +7,10 @@
 [![dependencies Status](https://david-dm.org/lxieyang/chrome-extension-boilerplate-react/status.svg)](https://david-dm.org/lxieyang/chrome-extension-boilerplate-react)
 [![devDependencies Status](https://david-dm.org/lxieyang/chrome-extension-boilerplate-react/dev-status.svg)](https://david-dm.org/lxieyang/chrome-extension-boilerplate-react?type=dev)
 
-**_Recently updated from React 16 to 17 and Webpack 4 to 5!_**
+## Announcements
+
+- **_Recently updated from React ~~16~~ to 17 and Webpack ~~4~~ to 5!_**
+- **_Recently added [TypeScript](https://www.typescriptlang.org/) Support!_**
 
 ## Features
 
@@ -20,6 +23,7 @@ This boilerplate is updated with:
 - [React Hot Loader](https://github.com/gaearon/react-hot-loader)
 - [eslint-config-react-app](https://www.npmjs.com/package/eslint-config-react-app)
 - [Prettier](https://prettier.io/)
+- [TypeScript](https://www.typescriptlang.org/)
 
 This boilerplate is heavily inspired by and adapted from [https://github.com/samuelsimoes/chrome-extension-webpack-boilerplate](https://github.com/samuelsimoes/chrome-extension-webpack-boilerplate), with additional support for React 17 features and Webpack 5.
 
@@ -48,6 +52,10 @@ All your extension's code must be placed in the `src` folder.
 
 The boilerplate is already prepared to have a popup, an options page, a background page, and a new tab page (which replaces the new tab page of your browser). But feel free to customize these.
 
+## TypeScript
+
+This boilerplate now supports TypeScript! The `Options` Page is implemented using TypeScript. Please refer to `src/pages/Options/` for example usages.
+
 ## Webpack auto-reload and HRM
 
 To make your workflow much more efficient this boilerplate uses the [webpack server](https://webpack.github.io/docs/webpack-dev-server.html) to development (started with `npm start`) with auto reload feature that reloads the browser automatically every time that you save some file in your editor.

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "chrome-extension-boilerplate-react",
-  "version": "3.0.1",
+  "version": "3.1.0",
   "description": "A chrome extension boilerplate built with React 17 and Webpack 4",
   "license": "MIT",
   "repository": {
@@ -16,6 +16,7 @@
     "@hot-loader/react-dom": "^17.0.0",
     "@types/chrome": "0.0.125",
     "@types/react": "^16.9.53",
+    "@types/react-dom": "^16.9.8",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
     "react-hot-loader": "^4.13.0"
@@ -45,8 +46,11 @@
     "node-sass": "^4.14.1",
     "prettier": "^2.1.2",
     "sass-loader": "^10.0.4",
+    "source-map-loader": "^1.1.2",
     "style-loader": "^2.0.0",
     "terser-webpack-plugin": "^5.0.2",
+    "ts-loader": "^8.0.7",
+    "typescript": "^4.0.5",
     "webpack": "^5.2.0",
     "webpack-cli": "^4.1.0",
     "webpack-dev-server": "^3.11.0"

package.json

@@ -0,0 +1,12 @@
+import React from 'react';
+import './Options.css';
+
+interface Props {
+  title: string;
+}
+
+const Options: React.FC<Props> = ({ title }: Props) => {
+  return <div className="OptionsContainer">{title.toUpperCase()} Page</div>;
+};
+
+export default Options;

src/pages/Options/Options.jsx

@@ -4,4 +4,7 @@ import { render } from 'react-dom';
 import Options from './Options';
 import './index.css';
 
-render(<Options />, window.document.querySelector('#app-container'));
+render(
+  <Options title={'settings'} />,
+  window.document.querySelector('#app-container')
+);

src/pages/Options/Options.tsx

@@ -0,0 +1,20 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "noFallthroughCasesInSwitch": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "noEmit": false,
+    "jsx": "react"
+  },
+  "include": ["src"],
+  "exclude": ["build", "node_modules"]
+}