TypeScript in the browser

If you are using TypeScript to create a web application here are my recommendations to get a quick TypeScript + React (my UI framework of choice) project setup.

General Machine Setup

Project Setup Quick

Use https://github.com/basarat/react-typescript as a base. 

  1. git clone https://github.com/basarat/react-typescript.git
  2. cd react-typescript
  3. npm install

Now jump to develop your amazing application

Project Setup Detailed

To see how that project is created, its documented below.

  • Create a project dir:
  1. mkdir your-project
  2. cd your-project
  • Create tsconfig.json:
  1. {
  2.   "compilerOptions": {
  3.     "sourceMap": true,
  4.     "module": "commonjs",
  5.     "target": "es5",
  6.     "jsx": "react"
  7.   },
  8.   "include": [
  9.     "src"
  10.   ],
  11.   "compileOnSave": false
  12. }
  • Create package.json.
  1. {
  2.   "name": "react-typescript",
  3.   "version": "0.0.0",
  4.   "license": "MIT",
  5.   "repository": {
  6.     "type": "git",
  7.     "url": "https://github.com/basarat/typescript-react.git"
  8.   },
  9.   "scripts": {
  10.     "build": "webpack ./webpack.config.js -p",
  11.     "start": "webpack-dev-server ./webpack.config.js --content-base ./public"
  12.   },
  13.   "dependencies": {
  14.     "@types/react": "16.0.40",
  15.     "@types/react-dom": "16.0.4",
  16.     "react": "16.2.0",
  17.     "react-dom": "16.2.0",
  18.     "ts-loader": "4.0.1",
  19.     "typescript": "2.7.2",
  20.     "webpack": "4.1.1",
  21.     "webpack-cli": "2.0.11",
  22.     "webpack-dev-server": "3.1.1"
  23.   }
  24. }
  • Create a webpack.config.js to bundle your modules into a single app.js file that contains all your resources:
  1. module.exports = {
  2.   mode: 'development',
  3.   devtool: 'inline-source-map',
  4.   entry: './src/app/app.tsx',
  5.   output: {
  6.     path: __dirname + '/public',
  7.     filename: 'build/app.js'
  8.   },
  9.   resolve: {
  10.     extensions: ['.ts', '.tsx', '.js']
  11.   },
  12.   module: {
  13.     rules: [
  14.       { test: /\.tsx?$/, loader: 'ts-loader' }
  15.     ]
  16.   }
  17. }
  • public/index.html file that will be served from your webserver: 
  1. <html>
  2.   <body>
  3.       <div id="root"></div>
  4.       <script src="./build/app.js"></script>
  5.   </body>
  6. </html>
  • src/app/app.tsx that is your frontend application entry point: 
  1. import * as React from 'react';
  2. import * as ReactDOM from 'react-dom';
  4. const Hello: React.SFC<{ compiler: string, framework: string }> = (props) => {
  5.   return (
  6.     <div>
  7.       <div>{props.compiler}</div>
  8.       <div>{props.framework}</div>
  9.     </div>
  10.   );
  11. }
  13. ReactDOM.render(
  14.   <Hello compiler="TypeScript" framework="React" />,
  15.   document.getElementById("root")
  16. );

Develop your amazing application

You can get the latest packages using npm install typescript@latest react@latest react-dom@latest @types/react@latest @types/react-dom@latest webpack@latest ts-loader@latest webpack-dev-server@latest webpack-cli@latest

  • Do live development by running npm start.
  • Build production assets by running npm run build.
    • Serve the public folder (which contains the built assets) from your server.