Introduction to TypeScript: Adding Static Typing to JavaScript

Sep 22

JavaScript has been the language of the web for decades, driving interactive web experiences, powering frontend frameworks, and even running server-side applications. While its flexibility is one of its greatest strengths, it can also be a source of bugs and confusion, especially when applications scale. Enter TypeScript—a superset of JavaScript that introduces static typing.

In this post, we'll explore what TypeScript is, why you might want to use it, and how it enhances JavaScript with static typing.

What is TypeScript?

TypeScript is an open-source language developed by Microsoft. At its core, TypeScript is JavaScript. But, it introduces optional static types which are removed during the compilation process, resulting in pure JavaScript code that can run anywhere JavaScript runs.

Why Use TypeScript?

Catch Errors Early: By introducing types, TypeScript can catch errors at compile time that would otherwise only be discovered at runtime in JavaScript.
Better Readability: Types serve as a form of documentation. When functions or components expect certain types, it's clearer to understand what data is required and how it's being used.
Richer IDE Experience: Many IDEs, like Visual Studio Code, provide enhanced code suggestions, intellisense, and error checking for TypeScript code, streamlining the development process.
Scalability: Large codebases benefit from TypeScript's features, making the code more maintainable and reducing bugs as applications grow.

Static Typing in Action

Let’s look at a simple JavaScript function:

function add(a, b) {
    return a + b;
}

console.log(add(5, 3));  // 8
console.log(add("Hello", "World"));  // HelloWorld

The above function can accept any values for a and b. However, with TypeScript, we can define the expected types:

function add(a: number, b: number): number {
    return a + b;
}

console.log(add(5, 3));  // 8
// console.log(add("Hello", "World"));  // Error: Argument of type 'string' is not assignable to parameter of type 'number'.

The : number annotations specify that both parameters and the return type are numbers. If you tried to call add("Hello", "World"), TypeScript would throw a compile-time error.

More on Types

TypeScript offers a variety of built-in types including:

Basic types: number, string, boolean, etc.

let isDone: boolean = false;
let age: number = 42;
let name: string = "Alice";

Object types: { name: string, age: number }.

interface Person {
    name: string;
    age: number;
}

let person: Person = {
    name: "Bob",
    age: 30
};

Array types: number[] or Array<number>.

let list: number[] = [1, 2, 3];
let anotherList: Array<number> = [4, 5, 6];

Special types: any, unknown, never, and void.

let notSure: any = 4;
notSure = "maybe a string";
notSure = false;

let unknownValue: unknown = "hello";
// unknownValue.toFixed();  // Error: Property 'toFixed' does not exist on type 'unknown'.

function error(message: string): never {
    throw new Error(message);
}

let unusable: void = undefined;

You can also create custom types and interfaces, making it easier to model complex data structures.

Getting Started with TypeScript

1. Installation: Install TypeScript globally via npm:

npm install -g typescript

2. Compiling: Write your TypeScript code in .ts files. Compile them to JavaScript using the TypeScript compiler:

tsc filename.ts

3. Configuration: Use a tsconfig.json file to manage compiler options for larger projects.

4. Integration: Many modern build tools and frameworks offer TypeScript integrations, allowing you to incorporate TypeScript into your existing workflow.

In Conclusion

TypeScript enhances JavaScript by introducing static typing, making it a powerful tool for developers who want the flexibility of JavaScript with the added benefits of type safety. Whether you're building a small web application or a large-scale enterprise solution, consider giving TypeScript a try to see how it can improve your development experience.

javascripttypescriptintro

Amelia Hayes