TypeScript guide for JavaScript users

TypeScript Transformation is an exciting guide for JavaScript users to elevate their coding game discover features.

TypeScript Guide for JavaScript Users

Welcome to this comprehensive guide on TypeScript tailored for JavaScript developers. In this post, we'll explore how TypeScript extends JavaScript by adding syntax for types, making your code more robust and maintainable. Before diving in, make sure you are familiar with the basics of JavaScript and the concept of typing.

TypeScript = JavaScript + Syntax for Types

This simple equation summarizes TypeScript's essence and primary purpose. TypeScript builds on JavaScript by adding a type system, which helps catch errors during development instead of at runtime.

What is TypeScript?

TypeScript is a statically typed superset of JavaScript developed by Microsoft. It compiles to plain JavaScript and provides a way to check for type-related errors before executing the program, enhancing code quality and developer productivity.

Types by Inference

TypeScript can infer types based on the values you assign to variables. Here are some examples:

let calories = 89;
let calories: number;
let fruits = ['Banana', 'Orange'];
let fruits: string[];

If you prefer to explicitly specify the type during declaration, you can do so like this:

let calories: number = 89;

Defining Types

You can define the shape of your objects using interface declarations. This helps ensure that objects conform to a specific structure. For instance:

interface Fruit {
    id: number;
    name: string;
}

If you attempt to assign an object that doesn't match the interface, TypeScript will throw an error:

let fruit: Fruit = {
    description: 'What am I doing here?'
};
// Type '{ description: string; }' is not assignable to type 'Fruit'.

Unions

Unions allow you to declare that a type could be one of several types. For example:

type FruitSize = 'S' | 'M' | 'L';
let validSize: FruitSize = 'M';
let invalidSize: FruitSize = 'Medium';
// Type '"Medium"' is not assignable to type 'FruitSize'.

Generics

Generics enable you to create reusable components that work with various types. Here's how you can use generics in an interface:

interface Page {
    data: T[];
}

let fruitsPage: Page = {
    data: [fruit1, fruit2]
};

let vegetablesPage: Page = {
    data: [vegetable1, vegetable2]
};

Structural Type System

TypeScript uses a structural type system, meaning that if two objects have the same shape, they are considered to be of the same type. For example:

function eatFruit(fruit: Fruit) {
    console.log(`Yummy! ${fruit.name} is delicious`);
}

// Passing an object with the same shape
eatFruit({ id: 1, name: 'Banana' });
// Console Output: Yummy! Banana is delicious

Conclusion

TypeScript enhances JavaScript by adding a powerful type system, which helps catch errors early and improves code maintainability. By using TypeScript, you can write more reliable and robust applications. Whether you are defining types, working with generics, or leveraging TypeScript's type inference, you will find that TypeScript offers numerous benefits for modern JavaScript development.