Getting Started with TypeScript

Table of Contents

1. TypeScript Version
2. Install TypeScript
3. Create TypeScript File
4. Use TypeScript Syntax
5. How to Learn TypeScript

Introduction

TypeScript is a typed superset of JavaScript that compiles to plain JavaScript. This post covers the basics of getting started with TypeScript, including installation, creating files, and using TypeScript syntax.

TypeScript Version

How to check TypeScript's version using the command line. Type tsc -v to show TypeScript's version.

tsc -v
Version 1.0.3.0

If you're in a Windows environment, the above command line might not give you the latest version of TypeScript, because the command line is probably using the Windows environment's default path for TypeScript to check the version. That's probably why it returns 1.0.3.0, but you have already installed 1.7. To change this, you can try the following different approaches:

Change Windows Environment Path for TypeScript

Or install Visual Studio 2015 Update 2, because this version of Visual Studio contains TypeScript Build, and if you already installed the latest version of TypeScript, it will warn you and update Visual 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 running npm install -g typescript if you have NPM installed, or you can download the TypeScript executable file for Windows and install it.

Create TypeScript File

TypeScript files end with the *.ts extension. Let's say you create a file like the following:

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

Go to the file's location in your command line and type tsc {your file}.ts. Then you should get a JavaScript file generated by the TypeScript compiler, {your file}.js.

Use TypeScript Syntax

Let's change the method to appendStringName(name: string). This is TypeScript syntax that specifies the parameter only accepts a string. When you run the command tsc {your file}.ts, it will throw an error, but the JavaScript file will still be regenerated.

Why TypeScript Sometimes Generates JavaScript and Sometimes Does Not

Sometimes TypeScript will generate JavaScript even with errors, and sometimes it does not. This depends on the severity and type of errors encountered.

Now, the following TypeScript will output the 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 the TypeScript documentation for all the aspects, and try it out!

Conclusion

TypeScript provides type safety on top of JavaScript, making it easier to catch errors at compile time. Start by installing TypeScript, creating .ts files, and experimenting with its type system to improve your development workflow.