What is TypeScript? A beginner’s guide to the JavaScript superset

TypeScript has a number of key features that fundamentally improve web application development. This TypeScript tutorial gives you an introduction to the programming language and explains some of its most important features and uses as well as its advantages and disadvantages.

What is TypeScript?

TypeScript was developed by Microsoft and builds upon the programming language JavaScript, which is widely used in web development. One feature of TypeScript that stands out is static typing. Unlike JavaScript, which has dynamic typing, TypeScript allows you to declare data types for variables, functions and parameters. This allows for early detection of coding errors, making it possible to identify errors even before the code has been executed. Static typing not only significantly improves code quality, it also improves code readability.

The TypeScript syntax is almost identical to JavaScript, which makes integrating it into existing JavaScript projects a lot easier. In fact, TypeScript is a superset of JavaScript, which means that any JavaScript code that is correct is also valid TypeScript code. This allows you to gradually migrate to TypeScript and benefit from the advantages of static typing and other features without having to completely rewrite your existing codebase.

Here is a simple JavaScript example:

function greet(name) {
    return "Hello, " + name;
}
console.log(greet(123)); // Output: "Hello, 123"

In the code above, the greet function is not restricted to a specific data type for the name parameter. This means that the function will still work, even if we pass a number as an argument.

In TypeScript, the code may look like this:

function greet(name: string): string {
    return "Hello, " + name;
}
console.log(greet(123)); // Error in TypeScript

Here we have declared the parameter name as a string. If we try to use the function with a number, TypeScript will display an error because the passed data type does not match the expected data type.

This example shows how TypeScript helps detect errors early on, enhancing the quality of the code by preventing the incorrect use of data types. It is important to note that TypeScript is eventually compiled to JavaScript, making it possible to run it in any JavaScript environment. This, however, means that you only get the benefits of type safety during the development phase.

What is TypeScript used for?

TypeScript is an essential for various areas of software development, especially in situations where type safety and code quality are of crucial importance.

A prominent use case for TypeScript is web development. Here, TypeScript ensures that JavaScript code is written in a way that makes it more secure and easier to maintain. This is beneficial in extensive frontend projects with complex codebases. However, TypeScript can also be implemented on the server side (backend) in Node.js applications to provide an additional layer of security. In serverless architectures such as AWS Lambda and Azure Functions, TypeScript helps to minimize errors and ensure reliable execution.

Cross-platform development is yet another area where TypeScript showcases its strengths. It can significantly optimize cross-platform applications and mobile app development. Frameworks such as NativeScript and React Native offer support for TypeScript when it comes to programming mobile apps for different platforms. In game development, TypeScript is utilized in projects that use WebGL or game engines such as Phaser or Babylon.js. TypeScript’s type safety helps to improve game quality and maintainability.

TypeScript is also used for data visualization and analysis projects. Libraries such as D3.js provide support for TypeScript and enable the creation of sophisticated dashboards and visualizations.

How to install TypeScript

Installing TypeScript is simple and only takes a few steps. If you have Node.js on your computer, you can install TypeScript with npm (Node Package Manager).

Step 1: Download Node.js

Check whether you have Node.js installed on your computer. If you have not yet set up Node.js, you can download and install it from the official website.

Step 2: Install TypeScript in the terminal

Open your command prompt (e.g., Command Prompt in Windows or the terminal on macOS or Linux) and enter the following command to install TypeScript globally:

npm install -g typescript

The -g (global) flag installs TypeScript on your entire system so that you can use it from anywhere.

Step 3: Check the installed version

You can test whether the installation was successful by executing the following command:

tsc -v

This command shows which version of TypeScript is installed. If a version number is shown, it means the installation was successful.

After installation, you can generate JavaScript files by creating TypeScript files (with the extension .ts) and compiling them with the TypeScript compiler tsc.

Step 4: Create a TypeScript file

Create a TypeScript file, e.g., app.ts, and insert your TypeScript code.

type Person = { name: string, age: number };
const alice: Person = { name: "Alice", age: 30 };
console.log(`Hello, I am ${alice.name} and I am ${alice.age} years old.`);

Step 5: Compile the file

Compile the TypeScript file by entering the following command:

tsc app.ts

This will compile app.ts into a JavaScript file with the name app.js. You can then execute the JavaScript file.

What features does TypeScript have?

Web development has made significant progress in recent years, and TypeScript has emerged as an extremely efficient alternative to JavaScript. Below, we’ve summarized the most important features of this language.

Static typing

Static typing is an essential feature of TypeScript that lets you specify data types for variables, parameters, functions and other elements within your code. Unlike dynamic typing in JavaScript, where data types are determined during execution, in TypeScript data types are assigned during development before the code is executed. This method helps to identify errors and logical issues early on.

function add(a: number, b: number): number {
    return a + b;
}
const result = add(5, 3); // valid
const result = add(5, "3"); // Type Error

In this example, we used static typing for the add function. The two parameters a and b are declared as numbers (number) and the function returns a value of type number. Any attempt to use this function with a different data type will cause TypeScript to identify it as an error.

Optional typing

With optional typing, you have the ability to specify data types for certain variables and parameters, while leaving others without a defined data type.

function sayHello(name: string, age: any): string {
    if (age) {
        return `Hello, ${name}, you are ${age} years old.`;
    } else {
        return `Hello, ${name}.`;
    }
}

The sayHello function is defined with the parameters name and age. The designation any indicates that the age parameter can be any data type.

ES6+ features

TypeScript supports modern JavaScript features, including ES6 and newer features such as arrow functions and template strings.

const multiply = (a: number, b: number): number => a * b;
const greeting = (name: string) => `Hello, ${name}!`;

The arrow functions lead to a shorter and more concise syntax.

Code organization

TypeScript offers better code organization and ensures that code is divided into reusable parts. This is made possible due to modules and namespaces.

// Math.ts
export function add(a: number, b: number): number {
    return a + b;
}
// Main.ts
import { add } from './Math';
const result = add(5, 3);

Here, we demonstrate how to structure code with modules and utilize import and export for organization. The add function is defined within a distinct module named Math.ts and then imported and integrated into a different module, Main.ts.

Object-oriented programming (OOP)

TypeScript facilitates object-oriented programming through TypeScript classes, interfaces and inheritance:

class Person {
    constructor(public name: string, public age: number) {}
    greet() {
        console.log(`Hello, my name is ${this.name} and I'm ${this.age} years old.`);
    }
}
const person = new Person("Alice", 30);
person.greet();

This example shows the use of classes and object-oriented programming (OOP) in TypeScript. The class Person has the properties name, age and a method greet, which is used to introduce the person and provide information about them.

Extended type system

The TypeScript type system is flexible and extensive. You can create user-defined types and interfaces and even extend existing types.

interface Animal {
    name: string;
}
interface Dog extends Animal {
    breed: string;
}
const myDog: Dog = { name: "Buddy", breed: "Labrador" };

The interface Animal defines a property name, while the interface Dog inherits from Animal and adds an additional property breed. The object myDog has the characteristics of both interfaces.

Compatibility with JavaScript

TypeScript is compatible with JavaScript, allowing it to run in any JavaScript environment. This compatibility makes it easier to progressively incorporate TypeScript into current JavaScript projects.

// JavaScript-Code
function greet(name) {
    return "Hello, " + name;
}
// TypeScript-Code
function greet(name: string): string {
    return "Hello, " + name;
}

The JavaScript code above (without typification) can be used in a TypeScript code (with typification) without any problems.

What are the advantages and disadvantages of TypeScript?

While TypeScript offers a number of advantages, it also comes with some disadvantages. Here is an overview:

Advantages

TypeScript has an extensive ecosystem of type definitions for many JavaScript libraries and frameworks. This makes integrating third-party code into TypeScript projects seamless and straightforward. This is helpful in today’s world of web-based applications that often rely on multiple libraries and frameworks.

In addition to static typing, TypeScript offers a wealth of development features, including interfaces, classes, modules and support for current ECMAScript standards. These features improve the structuring of the code, facilitate the maintainability and scalability of projects, and promote productivity in development. Many integrated development environments (IDEs) such as Visual Studio Code provide excellent support for TypeScript.

Disadvantages

TypeScript takes time to get used to, especially for developers that have only worked with JavaScript prior to using it. TypeScript code must be compiled in JavaScript before it can be executed in browsers or Node.js environments. This creates an additional step in the development process.

In smaller projects, TypeScript can be perceived as overly complex, as the benefits of type safety may not be as obvious. TypeScript projects may require more resources due to additional type information and compilation steps.

What are some alternatives to TypeScript?

There are various web programming languages that may be a good alternative to TypeScript depending on a project’s specific requirements and the preference of the developer(s).

• Flow: Flow is a static type checker for JavaScript that was developed by Facebook. It allows you to add types to JavaScript code without having to make a complete switch to TypeScript. Flow is a good choice if you want to gradually integrate typing into your JavaScript projects.
• Dart: This is a programming language developed by Google that can be used to create web applications and mobile apps. It offers type safety and good performance. Dart is often used in combination with the Flutter framework for mobile app development.
• PureScript: PureScript is a strongly typed functional programming language that includes strong type safety and a purely functional programming style. It enables JavaScript libraries to be imported.
• Elm: Elm is a functional, strongly typed language designed for the development of web applications. Elm promotes the principle of Elm Architecture and has a high level of type safety.
• ReasonML (BuckleScript): This language was developed by Facebook and is based on OCaml. BuckleScript is a compiler that compiles ReasonML into JavaScript. It also enables type safety and is easy to integrate with React for frontend development.