Create a webpack configuration file Create a webpack.config.js file at the root of the project directory. module.exports = { entry: "./src/index.tsx", output: { filename: "./dist/bundle.js", }, // Enable sourcemaps for debugging webpack's output. devtool: "source-map", resolve: { // Add '.ts' and '.tsx' as resolvable extensions. extensions: ["", ".webpack.js", ".web.js", ".ts", ".tsx", ".js"] }, module: { loaders: [ // All files with a '.ts' or '.tsx' ex

Set up the build Right click on the project and click New Item. Then choose TypeScript Configuration File and use the default name tsconfig.json. Replace the default tsconfig.json with the following: { "compilerOptions": { "noImplicitAny": true, "noEmitOnError": true, "sourceMap": true, "target": "es5", "outDir": "./Scripts/App" }, "files": [ "./src/app.ts", ], "compileOnSave": true } This is similar to the default, with the following differences: It sets "noImplicitAny"

Lay out the project Let’s start out with a new directory. We’ll name it proj for now, but you can change it to whatever you want. mkdir proj cd proj To start, we’re going to structure our project in the following way: proj/ +- src/ | +- components/ | +- dist/ TypeScript files will start out in your src folder, run through the TypeScript compiler, then webpack, and end up in a bundle.js file in dist. Any components that we write will go in the src/components folder. Let’s scaffold

const declarations const declarations are another way of declaring variables. const numLivesForCat = 9; They are like let declarations but, as their name implies, their value cannot be changed once they are bound. In other words, they have the same scoping rules as let, but you can’t re-assign to them. This should not be confused with the idea that the values they refer to are immutable. const numLivesForCat = 9; const kitty = { name: "Aurora", numLives: numLivesForCat, } // Error kitty

Public by default In our examples, we’ve been able to freely access the members that we declared throughout our programs. If you’re familiar with classes in other languages, you may have noticed in the above examples we haven’t had to use the word public to accomplish this; for instance, C# requires that each member be explicitly labeled public to be visible. In TypeScript, each member is public by default. You may still mark a member public explicitly. We could have written the Animal class fr

Decorator Factories If we want to customize how a decorator is applied to a declaration, we can write a decorator factory. A Decorator Factory is simply a function that returns the expression that will be called by the decorator at runtime. We can write a decorator factory in the following fashion: function color(value: string) { // this is the decorator factory return function (target) { // this is the decorator // do something with 'target' and 'value'... } } NOTE You can see a more

Ambient Modules In Node.js, most tasks are accomplished by loading one or more modules. We could define each module in its own .d.ts file with top-level export declarations, but it’s more convenient to write them as one larger .d.ts file. To do so, we use a construct similar to ambient namespaces, but we use the module keyword and the quoted name of the module which will be available to a later import. For example: node.d.ts (simplified excerpt) declare module "url" { export interface Url {

NuGet Right-Click -> Manage NuGet Packages Search for Microsoft.TypeScript.MSBuild Hit Install When install is complete, rebuild! More details can be found at Package Manager Dialog and using nightly builds with NuGet

React integration To use JSX with React you should use the React typings. These typings define the JSX namespace appropriately for use with React. /// <reference path="react.d.ts" /> interface Props { foo: string; } class MyComponent extends React.Component<Props, {}> { render() { return <span>{this.props.foo}</span> } } <MyComponent foo="bar" />; // ok <MyComponent foo={0} />; // error

Decorator Evaluation There is a well defined order to how decorators applied to various declarations inside of a class are applied: Parameter Decorators, followed by Method, Accessor, or Property Decorators are applied for each instance member. Parameter Decorators, followed by Method, Accessor, or Property Decorators are applied for each static member. Parameter Decorators are applied for the constructor. Class Decorators are applied for the class.