Skip to content
intermediatePhase 35 · TypeScript

Types

Master TypeScript's type system: primitives, arrays, tuples, and special types.

45m
0 problems
Topic Progress0%

Primitive Types

Primitive Types

TypeScript has several primitive types that mirror JavaScript's primitives.

String

let name: string = "Alice";
let template: string = `Hello, ${name}`;

Number

let age: number = 25;
let price: number = 9.99;
let hex: number = 0xff;
let binary: number = 0b1010;

Boolean

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

Null and Undefined

let nothing: null = null;
let notDefined: undefined = undefined;

// With strictNullChecks (recommended)
let maybeNull: string | null = null;
let maybeUndefined: string | undefined = undefined;

BigInt and Symbol

let big: bigint = 100n;
let sym: symbol = Symbol("key");

Arrays and Tuples

Arrays and Tuples

Array Types

Two ways to type arrays:

// Method 1: Type[]
let numbers: number[] = [1, 2, 3];
let names: string[] = ["Alice", "Bob"];

// Method 2: Array<Type>
let numbers2: Array<number> = [1, 2, 3];
let names2: Array<string> = ["Alice", "Bob"];

Readonly Arrays

let readonlyNumbers: readonly number[] = [1, 2, 3];
// readonlyNumbers.push(4); // Error!

Tuples

Tuples are fixed-length arrays with specific types at each position:

// A tuple of [string, number]
let person: [string, number] = ["Alice", 30];

// Accessing tuple elements
let name: string = person[0]; // "Alice"
let age: number = person[1]; // 30

// Named tuples (documentation only)
let point: [x: number, y: number] = [10, 20];

// Optional elements
let flexible: [string, number?] = ["hello"];

// Rest elements
let rest: [string, ...number[]] = ["hello", 1, 2, 3];

When to Use Tuples

  • Return multiple values from a function
  • Represent fixed-structure data
  • Use with React hooks like useState

Special Types

Special Types

any

The any type disables type checking:

let anything: any = 42;
anything = "hello"; // OK
anything = true; // OK
anything.foo.bar; // OK (no error)

Warning: Avoid any when possible—it defeats TypeScript's purpose.

unknown

The unknown type is a safer alternative to any:

let data: unknown = "hello";

// Must check type before using
if (typeof data === "string") {
  console.log(data.toUpperCase()); // OK
}

// Cannot directly use unknown values
// data.toUpperCase(); // Error!

void

The void type represents functions that don't return a value:

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

never

The never type represents values that never occur:

// Function that always throws
function throwError(message: string): never {
  throw new Error(message);
}

// Function with infinite loop
function infiniteLoop(): never {
  while (true) {}
}

// Exhaustive check
type Shape = "circle" | "square";
function getArea(shape: Shape): number {
  switch (shape) {
    case "circle": return Math.PI;
    case "square": return 4;
    default:
      const _exhaustive: never = shape;
      return _exhaustive;
  }
}

Type Assertions

Type assertions tell TypeScript you know more about a type:

// Angle-bracket syntax
let value: unknown = "hello";
let length: number = (<string>value).length;

// as syntax (preferred in React)
let length2: number = (value as string).length;

Practice Problems

0/3solved
Build Types Component

Create a reusable React component implementing Types. Include proper state management and accessibility.

Solution
// Production-ready component with:
// - Proper TypeScript types
// - Accessibility (ARIA)
// - Error boundaries
// - Loading states
// - Memoization where needed
Types Testing

Write unit and integration tests for Types using React Testing Library.

Solution
// Test coverage:
// 1. Rendering tests
// 2. Interaction tests
// 3. Edge case tests
// 4. Accessibility tests
Types Performance

Optimize Types for performance. Consider memoization, code splitting, and bundle size.

Solution
// Optimization techniques:
// 1. React.memo / useMemo / useCallback
// 2. Code splitting with lazy()
// 3. Virtual scrolling for lists
// 4. Image lazy loading
// 5. Bundle analysis

Quiz

1. What is the difference between `any` and `unknown`?

Question 1 options

2. How do you type a tuple?

Question 2 options

3. What does the `never` type represent?

Question 3 options

4. Which is the preferred assertion syntax in React?

Question 4 options

Flashcards

Question

What is the `unknown` type?

Click to reveal answer

Answer

A safer alternative to `any` that requires type checking before use

Question

How do you type a readonly array?

Click to reveal answer

Answer

readonly number[] or ReadonlyArray<number>

Question

What is a tuple?

Click to reveal answer

Answer

A fixed-length array with specific types at each position

Question

When do you use the `void` type?

Click to reveal answer

Answer

For functions that don't return a value

Question

What is Types?

Click to reveal answer

Answer

Types is a key concept in frontend development.

Revision Notes

Key Takeaways

  • 1.TypeScript has all JavaScript primitive types plus BigInt and Symbol
  • 2.Arrays can be typed with Type[] or Array<Type>
  • 3.Tuples have fixed length and specific types at each position
  • 4.Prefer unknown over any for safer type checking
  • 5.Use never for functions that don't return

Interview Tips

  • •Explain the difference between any and unknown
  • •Know when to use tuples vs arrays
  • •Understand the use cases for void and never types

Cheat Sheet

Cheat Sheet

Primitive Types

let s: string = "hello";
let n: number = 42;
let b: boolean = true;
let bn: bigint = 100n;
let sym: symbol = Symbol("key");

Arrays

let arr: number[] = [1, 2, 3];
let arr2: Array<string> = ["a", "b"];
let readonly: readonly number[] = [1, 2];

Tuples

let tuple: [string, number] = ["Alice", 30];
let optional: [string, number?] = ["hello"];
let rest: [string, ...number[]] = ["a", 1, 2];

Special Types

  • any: Disables type checking
  • unknown: Safer alternative to any
  • void: No return value
  • never: Never occurs