“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.

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

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 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

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 example

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" } }

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 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

Weeding out Errors

Weeding out Errors Like we mentioned, it’s not unexpected to get error messages after conversion. The important thing is to actually go one by one through these and decide how to deal with the errors. Often these will be legitimate bugs, but sometimes you’ll have to explain what you’re trying to do a little better to TypeScript.