Typescript - Beginner Guide to type keyword with example

Typescript - Beginner Guide to type keyword with example

In this short tutorial, learn about the type keyword in typescript with examples.

TypeScript type Keyword Examples

The type keyword in TypeScript functions as an alias for existing or custom types, enhancing code readability and type safety.

It enables you to declare a new type based on existing types:

type StringType = string;

const strrVariable: StringType = "New Type example";

StringType represents a new type, akin to the primitive type string. You can instantiate variables, like strVariable, using this new type and assign values accordingly.

The advantage lies in the ability to exert more control over type safety and enhance code readability. This includes crafting more complex types to facilitate developer workflows.

You can check another post on Fix for Object is possibly null Let’s explore more examples on type keyword.

How to Declare a Type Nullable in TypeScript

Let’s define the Employee interface in a TypeScript file.

interface Employee {
  name: string;
  id: number;
  salary: number;
}

Create an empty typed array of an interface or class

Employee object holds different types of data. There are multiple ways we can create typed empty arrays

  • Using generics type declaration

    Declare the array variable with a generic array of Employee by assigning an empty array.

    let employees: Array<Employee> = [];

    This creates a variable storing an empty typed array.

  • type assertion

    Type assertion is like assigning an object of one type to a variable to prevent errors at compile time. No performance impact at runtime. Two syntaxes are commonly used.

    The first is as syntax, and the second is angle-bracket syntax.

    • using as keyword The following is an example for creating an empty typed array with as syntax.

      let empArray1 = [] as Employee[];

    • Using Angular bracket syntax

      The above syntax can also be written with angle-bracket syntax as follows

      let empArray = <Employee[]>[];

      Both are equal in terms of usage and performance.

  • Array Constructor Using array constructors is a common practice, although it may have a performance impact due to creating a reference in memory.

let empArray = new Array<Employee>();
let empArray: Array<Employee> = new Array<Employee>();

While it enhances readability, it may impact performance.

Creating an Empty Typed String Array with Examples

Typed string arrays can be created using various syntaxes.

let emptyStringArray: string[] = [];
let emptyStringArray1 = new Array<string>();
let emptyStringArray2: Array<string> = new Array<string>();

Creating and Initializing Typed Empty Objects in an Array

In this example, create a non-empty array with object data that is empty or default values.

let us declare an interface for the User

interface User {
  name: string;
  id: number;
  password: string;
}

Here’s an example of initializing an array with three empty user objects using Partial<User> to construct objects with optional fields.

Partial in typescript allows you to construct an object with optional fields Partial<User> return User with optional id, name, and password

users: Partial<User>[] = [{}, {}, {}];

Alternatively, you can manually set values for each object with default values:

users1: User[] = [{ id: null, name: null, password:null }{ id: null, name: null, password:null }]

Conclusion

In conclusion, you’ve learned various methods for creating typed empty arrays and initializing arrays with empty objects in TypeScript.