Short Introduction to TypeScript

TypeScript is an open-source language built upon JavaScript. If you have written code in JavaScript, that code is also TypeScript. The difference being that if you were to copy your JavaScript over into a TypeScript file, the TypeScript type-checker would most likely find that your code isn’t doing what you thought it was.

JavaScript is a flexible programming language and allows variables to be reassigned to different data types which can result in type errors. TypeScript’s type-checker resolves this problem with an additional layer that utilizes a type-system language extension. The type-system language within TypeScript will check that data types have been properly assigned within code.

Ready to learn more about TypeScript? Let’s look at what TypeScript adds to JavaScript, examples of writing TypeScript code, and finish with why programmers choose TypeScript.

Basics of TypeScript

TypeScript is a statically typed language which means types are checked when the code is compiled. When a TypeScript file is initialized a configuration file will exist that defines how strict the type checker should be. Meaning, types in TypeScript are actually optional, but that can lessen the overall value of using TypeScript.

What do I mean when the code is compiled? To run on the browser, at run time, TypeScript is converted to JavaScript with a compiler. The TypeScript compiler or 'tsc' is installed when TypeScript is installed via npm.

npm install --global typescript

Another feature of TypeScript is type inference which means the language will infer what type you are assigning to a variable without being explicit. For example, in the snippet below, TypeScript will infer that myName is of the type ‘string’.

const myName = ‘Heather’;

How to Write TypeScript

As stated above, TypeScript is a type-system language meaning that there are rules as to how to construct variables, functions, etc. The examples below will cover a few of the types in TypeScript but not all.

Basic Types

TypeScript has basic types similar to primitive data types in JavaScript. The following examples look at Boolean, Number, and String types.

To declare and initialize a variable

• use a let or const statement
• variable name
• colon
• type
• assign a value.

let isDog: boolean = true; 
let age: number = 8;
let name: string = “Captain”;

An interface names types that focus on the shape of a value. In this example we are requiring the passed in argument for the function ‘getName’ to have a property ‘name’.

interface hasName {
    name: string;
}

function getName(dogObj: hasName) {
    console.log(dogObj.name);
}

let myDog = { name: “Captain”};
getName(myDog); // prints “Captain”

Functions in TypeScript

When creating a function in TypeScript parameters can be given a type as well as the return value of the function.

let dogOwner = function(owner: string, dog: string) => string = function(
    owner: string,
    dog: string,
): string {
    return `{owner} belongs to {dog}`;
}

Why Programmers Choose TypeScript

While TypeScript may seem tedious at first, there are obvious advantages.

1. Self-documenting: By using TypeScript you are essentially commenting your code to let other programmers know what the code is expecting.
2. Tooling: IntelliSense helps with code completion and TypeScript improves this tool by defining types as you go.
3. Debugging: As mentioned at the beginning of this post, JavaScript can be easily written with type errors which are not found until run time and a programmer has to figure out what is causing the problem. With TypeScript you'll know right away if an expected argument is the wrong type.

Cleaning up documentation, improving coding tools, and speeding up debugging should encourage any programmer to checkout TypeScript. As the language grows in popularity, it's worth having basic knowledge of the TypeScript language.