Ultimate Guide to TypeScript: Features, Examples, and Best Practices

TypeScript is a powerful, statically typed superset of JavaScript that introduces optional types, classes, and modules. By enabling type checking, TypeScript helps developers catch errors early, enhancing code maintainability and readability. Let’s dive deeper into complete TypeScript guide, exploring its core concepts and advanced features to understand how it can benefit your development process. 

What is TypeScript? 

TypeScript is a powerful, statically typed superset of JavaScript developed and maintained by Microsoft. TypeScript aims to make development of large-scale JavaScript applications more efficient and less error-prone, while still allowing developers to leverage the flexibility and ecosystem of JavaScript.  

Here are the key points about TypeScript: 

Superset of JavaScript: TypeScript extends JavaScript by adding optional static typing and other features. Any valid JavaScript code is also valid TypeScript code. 

Static Typing: It allows developers to add type annotations to variables, function parameters, and return values, enabling better error detection during development. 

Object-Oriented Features: TypeScript supports classes, interfaces, and modules, making it easier to build and maintain large-scale applications. 

Compile-time Checking: TypeScript code is transpiled to JavaScript, catching many errors before runtime. 

Enhanced IDE Support: The static typing enables better autocomplete, refactoring, and navigation features in integrated development environments. 

ECMAScript Compatibility: TypeScript supports the latest ECMAScript features and can be compiled to older versions of JavaScript for broader compatibility. 

Gradual Adoption: It can be incrementally adopted in existing JavaScript projects. 

Improved Maintainability: The added type information makes code more self-documenting and easier to understand and maintain. 

Popular Framework Support: Many popular frameworks and libraries, like Angular, have adopted TypeScript. 

Open Source: TypeScript is open-source and has a growing community and ecosystem. 

Basic Concepts of TypeScript 

1. Setting Up TypeScript 

To begin using TypeScript, you first need to install it. This can be done globally using npm (Node Package Manager), making TypeScript available across all your projects: 

npm install -g typescript 

After installation, you can compile TypeScript files into JavaScript using the tsc command. This compiler ensures that your TypeScript code adheres to the specified types and structures, preventing many common errors. 

2. Type Annotations 

Type annotations are a fundamental feature of TypeScript. They allow you to specify the types of variables, function parameters, and return types. This helps in catching errors at compile time rather than runtime, leading to more reliable code. 

Example: 

let message: string = "Hello, TypeScript!"; 
let count: number = 42; 
function greet(name: string): string { 
  return `Hello, ${name}!`; 
} 

console.log(greet("Satya")); 

In this example, message is explicitly annotated as a string and count as a number. The greet function takes a string parameter and returns a string, ensuring type safety. 

3. Interfaces 

Interfaces in TypeScript define the structure of an object, ensuring it conforms to a specific shape. This is particularly useful for creating well-defined data structures and promoting code consistency. 

Example: 

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

function introduce(person: Person): string { 
  return `Hello, my name is ${person.name} and I am ${person.age} years old.`; 
} 

const satya: Person = { name: "Satya", age: 24}; 
console.log(introduce(satya)); 

Here, the Person interface ensures that any object passed to the introduce function has a name and age property, both of which are required. 

4. Classes 

Classes in TypeScript provide a way to define blueprints for objects, similar to object-oriented languages like Java or C#. They can include properties, methods, and constructors. 

Example: 

class Animal { 
  name: string; 
  constructor(name: string) { 
    this.name = name; 
  } 

  makeSound(): void { 
    console.log(`${this.name} makes a sound.`); 
  } 

} 

const dog = new Animal("Dog"); 
dog.makeSound(); 

In this example, the Animal class has a name property, a constructor to initialize it, and a makeSound method to log a message. 

TypeScript Advanced Concepts 

1. Generics 

Generics allow you to create reusable components that work with any data type. This makes your code more flexible and type-safe. 

Example 1: 

function identity<T>(arg: T): T { 
  return arg; 
} 

console.log(identity<string>("Hello"));  // Output: Hello 
console.log(identity<number>(42));       // Output: 42 
The identity function is generic, meaning it can accept arguments of any type and return a value of the same type. 

Example 2:

Create a utils type NullabelProperties that takes object and make every property to be also null 

Challenge one -> Single level object type 
Challenge two -> Nested object type 
interface User { 
    age: number; 
    name: string; 
} 

type NullableExample = NullabelProperties<Example>; 
Solution : 
// Recursive utility type to make every property of an object nullable 
type DeepNullableProperties<T> = { 
  [K in keyof T]: T[K] extends object ? DeepNullableProperties<T[K]> | null : T[K] | null; 
}; 

 interface NestedUser { 
  age: number; 
  profile: { 
    name: string; 
    address: { 
      city: string; 
    }; 
  }; 
} 

type NullableNestedUser = DeepNullableProperties<NestedUser>; 

2. Decorators 

Decorators are special declarations that can be attached to classes, methods, or properties to modify their behavior. They are commonly used for metadata and cross-cutting concerns like logging or validation. 

Example: 

function log(target: any, propertyKey: string, descriptor: PropertyDescriptor) { 
  const originalMethod = descriptor.value; 
  descriptor.value = function (...args: any[]) { 
    console.log(`Called ${propertyKey} with args: ${JSON.stringify(args)}`); 
    return originalMethod.apply(this, args); 
  }; 

  return descriptor; 
} 

class Calculator { 
  @log 
  add(a: number, b: number): number { 
    return a + b; 
  } 

} 
const calculator = new Calculator(); 
console.log(calculator.add(2, 3));

In this example, the log decorator modifies the add method of the Calculator class to log its arguments before executing. 

3. Advanced Types 

TypeScript supports advanced types such as Union Types, Intersection Types, and Type Guards, allowing for more sophisticated type definitions and checks. 

Union Types 

Union Types allow a variable to hold more than one type. 

Example: 

function printId(id: number | string) { 
  console.log(`ID: ${id}`); 
} 

printId(123); 
printId("ABC"); 

Here, the printId function can accept either a number or a string as its parameter. 

Intersection Types 

Intersection Types combine multiple types into one. 

Example: 

interface Printable { 
  print(): void; 
} 

interface Scannable { 
  scan(): void; 
} 

type MultiFunctionDevice = Printable & Scannable; 
const device: MultiFunctionDevice = { 
  print() { 
    console.log("Printing..."); 
  }, 

  scan() { 
    console.log("Scanning..."); 
  } 

}; 
device.print(); 
device.scan(); 

In this example, MultiFunctionDevice combines Printable and Scannable, ensuring that objects of this type have both print and scan methods. 

Type Guards 

Type Guards are used to narrow down the type of a variable within a conditional block. 

Example: 

function isString(value: any): value is string { 
  return typeof value === "string"; 
} 

function printValue(value: number | string) { 
  if (isString(value)) { 
    console.log(`String: ${value}`); 
  } else { 
    console.log(`Number: ${value}`); 
  } 

} 
printValue(42); 
printValue("Hello"); 

Here, the isString function acts as a type guard, allowing printValue to handle number and string types differently. 

Advanced Example 1: Custom Type Guards 

Custom type guards allow for more complex type checks. 

Example: 

interface Fish { 
  swim: () => void; 
} 

interface Bird { 
  fly: () => void; 
} 

function isFish(pet: Fish | Bird): pet is Fish { 
  return (pet as Fish).swim !== undefined; 
} 

function move(pet: Fish | Bird) { 
  if (isFish(pet)) { 
    pet.swim(); 
  } else { 
    pet.fly(); 
  } 

} 

const goldfish: Fish = { swim: () => console.log("Swimming") }; 
const sparrow: Bird = { fly: () => console.log("Flying") }; 
move(goldfish); 
move(sparrow); 

In this example, the isFish type guard determines whether a pet is a Fish or a Bird, allowing the move function to call the appropriate method. 

Advanced Example 2: Using Mapped Types 

Mapped types allow you to create new types based on existing types, modifying their properties. 

Example: 

type Readonly<T> = { 

  readonly [P in keyof T]: T[P]; 
}; 

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

const john: Readonly<Person> = { 
  name: "John", 
  age: 30 
}; 

// john.age = 31; // Error: Cannot assign to 'age' because it is a read-only property.

In this example, the Readonly type takes a type T and makes all its properties read-only, preventing any modifications. 

Also Read: TypeScript vs JavaScript

Conclusion 

TypeScript enhances JavaScript by adding static types, classes, interfaces, and advanced type features. By understanding the basics and exploring advanced topics, developers can leverage TypeScript’s power to write more robust and maintainable code.  

Whether you are building simple applications or complex systems, TypeScript’s features help you catch errors early, improve readability, and ensure code consistency. Start integrating TypeScript into your projects to experience the benefits of a statically typed language within the JavaScript ecosystem. 

About Author:

This blog is written by Satya Narayan Mishra, a Full Stack Developer at BigOhTech. He specializes in MEAN stack technologies to craft innovative products.