"An Introduction to Types in TypeScript: Built-In Types, Type Annotations, Interfaces, and Classes"

amr — Tue, 28 Mar 2023 02:12:35 +0000

TypeScript is a statically typed superset of JavaScript that adds optional type annotations to the language. In TypeScript, you can specify types for variables, function parameters, function return types, and object properties. TypeScript provides a number of built-in types, as well as the ability to create custom types using interfaces and classes.

Here are some of the built-in types in TypeScript:

number: represents numeric values, including integers and floating-point numbers.
string: represents string values.
boolean: represents boolean values (true/false).
null: represents the absence of a value.
undefined: represents a value that has not been defined.
void: represents the absence of a return value from a function.
any: represents any type of value, and can be used to opt out of
type checking for a specific value.
never: represents a value that will never occur, such as a function that always throws an error.
To specify a type for a variable, function parameter, or function return type, you can use a colon followed by the type. For example:

let myNumber: number = 42;
let myString: string = 'hello';
let myBoolean: boolean = true;

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

In the example above, we've used type annotations to specify the types of the myNumber, myString, and myBoolean variables, as well as the a, b, and return types of the addNumbers function.

You can also create custom types in TypeScript using interfaces and classes. Interfaces define a shape for an object, specifying the names and types of its properties. For example:

interface Person {
  firstName: string;
  lastName: string;
  age: number;
}

let person: Person = {
  firstName: 'John',
  lastName: 'Doe',
  age: 42,
};

In the example above, we've defined an interface Person with three properties: firstName, lastName, and age. We've then created an object that conforms to this interface and assigned it to the person variable.

Classes in TypeScript are similar to classes in other object-oriented languages, and can include properties and methods with specified types. For example:

class Animal {
  name: string;

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

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

class Dog extends Animal {
  breed: string;

  constructor(name: string, breed: string) {
    super(name);
    this.breed = breed;
  }

  speak(): void {
    console.log(`${this.name} barks.`);
  }
}

let myDog: Dog = new Dog('Fido', 'Labrador');
myDog.speak(); // output: "Fido barks."

In the example above, we've defined a class Animal with a name property and a speak method. We've then defined a Dog class that extends Animal and adds a breed property and a custom speak method. We've created a new instance of Dog and assigned it to the myDog variable, and called the speak method on it.

I hope this gives you a good introduction to types in TypeScript.

DEV Community: amr

"An Introduction to Types in TypeScript: Built-In Types, Type Annotations, Interfaces, and Classes"