TypeScript Simple Types: A Comprehensive Tutorial

TypeScript is a statically-typed superset of JavaScript that introduces type annotations and compile-time type checking. One of its main features is type safety, which helps prevent errors by catching issues early during development.

TypeScript includes a range of simple types (or primitive types) that can be used to describe the kind of values you expect to work with in your program.

In this tutorial, we will cover the most commonly used simple types in TypeScript, including examples of how to use them to ensure type safety.

1. Basic TypeScript Types

In TypeScript, every variable or constant can have a type annotation that describes the type of data it holds. These basic types are fundamental building blocks in TypeScript.

Here are some of the simple types we'll cover:

string
number
boolean
null
undefined
any
unknown
void
never

2. Type Annotations

TypeScript allows you to explicitly declare the type of a variable, function parameter, or return type using type annotations.

Example 1: Basic Type Annotations

let name: string = 'Alice';
let age: number = 25;
let isStudent: boolean = true;

console.log(name);  // Output: Alice
console.log(age);   // Output: 25
console.log(isStudent);  // Output: true

Explanation:

name is explicitly declared as a string.
age is explicitly declared as a number.
isStudent is explicitly declared as a boolean.

3. String Type

The string type is used to represent textual data.

Example 2: Using the string Type

let firstName: string = 'John';
let lastName: string = 'Doe';
let fullName: string = `${firstName} ${lastName}`;

console.log(fullName);  // Output: John Doe

Explanation:

The string type holds text values. In this example, we concatenate firstName and lastName to form fullName.

4. Number Type

The number type is used to represent both integers and floating-point numbers.

Example 3: Using the number Type

let score: number = 100;
let pi: number = 3.14159;
let total: number = score + pi;

console.log(total);  // Output: 103.14159

Explanation:

The number type can represent both integers and decimals.
Arithmetic operations like addition, subtraction, multiplication, and division work just like in JavaScript.

5. Boolean Type

The boolean type can hold true or false.

Example 4: Using the boolean Type

let isAvailable: boolean = true;
let isActive: boolean = false;

if (isAvailable && !isActive) {
  console.log('Item is available but not active.');
}

Explanation:

The boolean type is used for values that are either true or false.

Logical operations like && (AND), || (OR), and ! (NOT) can be applied to boolean values.

6. null and undefined Types

In TypeScript, null and undefined are their own types. They represent the absence of a value.

Example 5: Using null and undefined

let emptyValue: null = null;
let notAssigned: undefined = undefined;

console.log(emptyValue);  // Output: null
console.log(notAssigned);  // Output: undefined

Explanation:

null represents a deliberate absence of a value.
undefined represents an uninitialized value or absence of a value by default.

7. The any Type

The any type allows a variable to hold any type of value. It disables type checking for that variable, making it behave like JavaScript's dynamic typing.

Example 6: Using the any Type

let dynamicVar: any = 'Hello';
dynamicVar = 42;
dynamicVar = true;

console.log(dynamicVar);  // Output: true

Explanation:

The any type lets you assign any value to the variable, even changing its type over time. However, overusing any can reduce type safety.

8. The unknown Type

The unknown type is safer than any because you need to check its type before performing operations on it. It is useful when dealing with values from external sources or unknown inputs.

Example 7: Using the unknown Type

let inputValue: unknown;

inputValue = 'A string';
console.log(inputValue);  // Output: A string

inputValue = 42;
if (typeof inputValue === 'number') {
  console.log(inputValue + 10);  // Output: 52
}

Explanation:

The unknown type requires a type check before performing operations. This prevents unsafe operations and enforces more type safety compared to any.

9. The void Type

The void type is used for functions that don't return any value.

Example 8: Using the void Type

function logMessage(message: string): void {
  console.log(message);
}

logMessage('This is a message');  // Output: This is a message

Explanation:

The void type indicates that the function does not return a value. This is common for functions that perform side effects like logging or modifying global state.

10. The never Type

The never type represents values that never occur, such as functions that always throw an error or infinite loops.

Example 9: Using the never Type

function throwError(message: string): never {
  throw new Error(message);
}

function infiniteLoop(): never {
  while (true) {
    // Infinite loop
  }
}

Explanation:

The never type is used for functions that either throw errors or never finish executing (like an infinite loop).
These functions never return a value.

11. Type Inference

In TypeScript, you don’t always need to provide type annotations explicitly. The compiler can infer the type based on the value assigned to the variable.

Example 10: Type Inference in TypeScript

let inferredString = 'Hello, TypeScript!';  // Inferred as string
let inferredNumber = 123;  // Inferred as number

console.log(inferredString);  // Output: Hello, TypeScript!
console.log(inferredNumber);  // Output: 123

Explanation:

TypeScript infers the type of inferredString as string and inferredNumber as number based on the values assigned to them.

12. Union Types

Union types allow a variable to hold multiple types. You can define a union type by separating types with a vertical bar (|).

Example 11: Using Union Types

let id: number | string;

id = 123;  // Valid
id = 'ABC';  // Valid

console.log(id);  // Output: ABC

Explanation:

The id variable can hold either a number or a string.
This is useful when a value can be of multiple types (e.g., a user ID that could be numeric or alphanumeric).

Conclusion

TypeScript’s simple types provide the foundation for writing type-safe code, ensuring that variables, functions, and objects behave as expected at compile-time.

By explicitly defining types, TypeScript helps catch bugs early, improving the overall robustness of your code.

Key Simple Types Covered:

string: Represents textual data.
number: Represents numeric data (both integers and floating-point numbers).
boolean: Represents true or false.
null and undefined: Represent the absence of a value.
any: Disables type checking and allows any type of value.
unknown: Requires explicit type checking before usage, providing more safety than any.
void: Used for functions that do not return any value.
never: Represents functions that never return or always throw an error.
Union types: Allow multiple possible types for a value.

By understanding and leveraging these basic types, you can write cleaner, more maintainable TypeScript code with fewer runtime errors.

Related posts

TypeScript null & undefined: A Comprehensive Tutorial with Code Examples

TypeScript Casting: A Comprehensive Tutorial with Code Examples

TypeScript Functions: A Comprehensive Tutorial with Code Examples