“Do”s and “Don’t”s Many common mistakes in declaration files can be easily avoided. The Do’s and Don’ts section identifies common errors, describes how to detect them, and how to fix them. Everyone should read this section to help themselves avoid common mistakes.

Write a simple example Let’s write a Hello World program. In src, create the file main.ts: function hello(compiler: string) { console.log(`Hello from ${compiler}`); } hello("TypeScript"); In the project root, proj, create the file tsconfig.json: { "files": [ "src/main.ts" ], "compilerOptions": { "noImplicitAny": true, "target": "es5" } }

Writing a Configuration File

Writing a Configuration File TypeScript uses a file called tsconfig.json for managing your project’s options, such as which files you want to include, and what sorts of checking you want to perform. Let’s create a bare-bones one for our project: { "compilerOptions": { "outDir": "./built", "allowJs": true, "target": "es5" }, "include": [ "./src" ] } Here we’re specifying a few things to TypeScript: Read in any files it understands in the src directory (with include). Acc

Write an HTML page

Write an HTML page Add a New Item named index.html inside wwwroot. Use the following code for index.html: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <script src="scripts/app.js"></script> <title></title> </head> <body> <div id="message"></div> <div> Compiler: <input id="compiler" value="TypeScript" onkeyup="document.getElementById('message').innerText = sayHello()" /><br /> Fr

Write a simple Angular app in TypeScript

Write a simple Angular app in TypeScript First, change the code in app.ts to: import {Component} from "angular2/core" import {MyModel} from "./model" @Component({ selector: `my-app`, template: `<div>Hello from </div>` }) class MyApp { model = new MyModel(); getCompiler() { return this.model.compiler; } } Then add another TypeScript file in src named model.ts: export class MyModel { compiler = "TypeScript"; } And then another TypeScript file in src named main.ts: i

Write some code

Write some code Let’s write our first TypeScript file using React. First, create a file named Hello.tsx in src/components and write the following: import * as React from "react"; export interface HelloProps { compiler: string; framework: string; } export class Hello extends React.Component<HelloProps, {}> { render() { return <h1>Hello from {this.props.compiler} and {this.props.framework}!</h1>; } } Note that while this example is quite classy, we didn’t need to use

Write some code

Write some code Let’s write our first TypeScript file using Knockout. First, create a new file in your src directory named hello.ts. import * as ko from "knockout"; class HelloViewModel { language: KnockoutObservable<string> framework: KnockoutObservable<string> constructor(language: string, framework: string) { this.language = ko.observable(language); this.framework = ko.observable(framework); } } ko.applyBindings(new HelloViewModel("TypeScript", "Knockout")); N

Writing the function type

Writing the function type Now that we’ve typed the function, let’s write the full type of the function out by looking at the each piece of the function type. let myAdd: (x: number, y: number)=>number = function(x: number, y: number): number { return x+y; }; A function’s type has the same two parts: the type of the arguments and the return type. When writing out the whole function type, both parts are required. We write out the parameter types just like a parameter list, giving each parame

Void

Void void is a little like the opposite of any: the absence of having any type at all. You may commonly see this as the return type of functions that do not return a value: function warnUser(): void { alert("This is my warning message"); } Declaring variables of type void is not useful because you can only assign undefined or null to them: let unusable: void = undefined;

Watchify

Watchify We’ll start with Watchify to provide background compilation: npm install --save-dev watchify gulp-util Now change your gulpfile to the following: var gulp = require("gulp"); var browserify = require("browserify"); var source = require('vinyl-source-stream'); var watchify = require("watchify"); var tsify = require("tsify"); var gutil = require("gulp-util"); var paths = { pages: ['src/*.html'] }; var watchedBrowserify = watchify(browserify({ basedir: '.', debug: true, entries: