TypeScript in the browser
If you are using TypeScript to create a web application here are my recommendations:
General Machine Setup
- Install NodeJS
Project Setup
- Create a project dir
mkdir your-project cd your-project
- Create
tsconfig.json
. We discuss modules here. Also good to have it setup fortsx
compilation out of the box.{ "compilerOptions": { "target": "es5", "module": "commonjs", "sourceMap": true, "jsx": "react" }, "exclude": [ "node_modules", "typings/browser", "typings/browser.d.ts" ], "compileOnSave": false }
- Create an npm project:
npm init -y
- Install TypeScript-nightly, webpack,
ts-loader
, typingsnpm install typescript@next webpack ts-loader typings --save-dev
- Init typings (creates a
typings.json
file for you)."./node_modules/.bin/typings" init
- Create a
webpack.config.js
to bundle your modules into a singlebundle.js
file that contains all your resources:module.exports = { entry: './src/app.tsx', output: { filename: './dist/bundle.js' }, resolve: { // Add `.ts` and `.tsx` as a resolvable extension. extensions: ['', '.webpack.js', '.web.js', '.ts', '.tsx', '.js'] }, module: { loaders: [ // all files with a `.ts` or `.tsx` extension will be handled by `ts-loader` { test: /\.tsx?$/, loader: 'ts-loader' } ] } }
- Setup an npm script to run a build. Also have it run
typings install
onnpm install
. In yourpackage.json
add ascript
section:"scripts": { "prepublish": "typings install", "watch": "webpack --watch" },
Now just run the following (in the directory that contains webpack.config.js
):
npm run watch
Now if you make edits to your ts
or tsx
file webpack will generate bundle.js
for you. Serve this up using your web server 🌹.
More
If you are going to use React (which I highly recommend you give a look), here are a few more steps:
npm install react react-dom --save-dev
"./node_modules/.bin/typings" install react --ambient --save
"./node_modules/.bin/typings" install react-dom --ambient --save
A demo index.html
:
<html>
<head>
<meta charset="UTF-8" />
<title>Hello React!</title>
</head>
<body>
<div id="root"></div>
<!-- Main -->
<script src="./dist/bundle.js"></script>
</body>
</html>
A demo ./src/app.tsx
import * as React from "react";
import * as ReactDOM from "react-dom";
const Hello = (props: { compiler: string, framework: string }) => {
return (
<div>
<div>{props.compiler}</div>
<div>{props.framework}</div>
</div>
);
}
ReactDOM.render(
<Hello compiler="TypeScript" framework="React" />,
document.getElementById("root")
);
You can clone this demo project here : https://github.com/basarat/react-typescript