Getting Start with TypeScript

2016/4/303 min read
bookmark this
Responsive image

TypeScript Version

How to check TypeScript's version by MS Command. Type tsc -v will show TypeScript's version.

tsc -v
Version 1.0.3.0

If you're in windows enviroment, above command line might not give you the latest version of TypeScript, because the command line is probably use the windows enviroment's default path for TypeScript to check the version. That's probably why it's return 1.0.3.0, but you have already install 1.7. For change this, you can try following different things,

Change windows enviroment path for TypeScript.

Or install the Visual Studo 2015 version 2, becausae this version of visual studio will contains TypeScrit Build on the Visual Studio and if you already installed latest version of TypeScript, it'll warn you and will update the visaul studio for you.

TypeScript Visual Studio 2015 Update 2 includes TypeScript 1.8, which includes the following new and improved features. Support for string literal types, F-bounded polymorphism, 'this'-based type guards, and improved union type inference. The compiler now highlights common bugs such as unreachable code, missing return statements, and unused labels. JSX support has been updated to recognize and colorize the latest changes in the JSX syntax. Improved tsconfig.json support for better control over build configurations. Ability to design more modular libraries using module augmentation. JavaScript source files can be included as input to the TypeScript compiler. For more information, see the TypeScript blog on MSDN.

Install TypeScript

You can install TypeScript by either npm install -g typescript if you have NPM installed, or you can download TypeScritp Executable file to windows and install.

Create TypeScript file

TypeScript end up extension with *.ts, let's say you create file like following.

function appendName(name) {
	return "Hi, " + name;
}

Go to the location at that file at your command line, type tsc {your file}.ts, then you should get a javascript generate by TypeScript command, {your file}.js.

Use TypeScript Syntax

Let's change the method to appendStringName(name: string), it is TypeScript syntax that it will only take string for the parameter, when you run the command tsc {your file}.ts, it will throw error but the javascript file will regenerated. I'm kind of not really TypeScript at this point already...

Why? becuase sometime TypeScript will generate Javascript, sometime it doesn't generate Javascript.

Now, following TypeScript will output be second snippet's javascript result.

TypeScript example of using Class
function appendStringName(name: string) {
	return "Hi, " + name;
}

class User {
	name: string;
	age: number;
	constructor (public firstName, public lastName, public age) {
	this.name = firstName + " " + lastName + " " + age;
	
	}
}

// passing number to the string is ok
appendStringName(1);
// passing string to the int is not okay
var user = User("john", "kenny", "1");

TypeScript's output result in Javascript
function appendStringName(name) {
    return "Hi, " + name;
}

var User = (function () {
    function User(firstName, lastName, age) {
        this.firstName = firstName;
        this.lastName = lastName;
        this.age = age;
        this.name = firstName + " " + lastName + " " + age;
    }
    return User;
})();

// passing number to the string is ok
appendStringName(1);

// passing string to the int is not okay
var user = User("john", "kenny", "1");

How to learn TypeScript

Check TypeScript Document's all the aspects, and try it out!