← Back to Curriculum

Basic Types and Type Annotations

📚 Lesson 2 of 15 ⏱️ 30 min

Basic Types and Type Annotations

30 min

TypeScript provides several basic types: string, number, boolean, array, tuple, enum, any, void, null, and undefined. These types form the foundation of TypeScript's type system and enable static type checking. Understanding these types is crucial for writing type-safe TypeScript code.

Type annotations are optional in TypeScript due to type inference. The compiler can often infer types from context, reducing the need for explicit annotations. However, explicit annotations improve code readability and catch errors early, especially in function signatures and complex types.

The `any` type allows you to opt out of type checking for specific variables, but it should be used sparingly as it defeats the purpose of TypeScript. Use `unknown` instead when you need a type-safe way to handle values of unknown type. The `void` type represents the absence of a value, typically used for functions that don't return anything.

Arrays can be typed in two ways: `string[]` or `Array<string>`. Both are equivalent, but the bracket notation is more common. Tuples allow you to express an array with a fixed number of elements where each element has a known type, like `[string, number]` for a pair of string and number.

TypeScript's type system includes literal types, union types, and intersection types. Literal types allow you to specify exact values (like \`"red" | "blue"\`), union types allow multiple types (\`string | number\`), and intersection types combine types (\`A & B\`). These advanced types enable powerful type modeling.

Understanding the difference between `null` and `undefined` is important. `null` is an intentional absence of value, while `undefined` means a value hasn't been assigned. TypeScript's `strictNullChecks` option makes these distinctions important for type safety.

Key Concepts

  • TypeScript provides basic types: string, number, boolean, array, tuple, enum.
  • Type annotations are optional due to type inference.
  • any type opts out of type checking (use sparingly).
  • Arrays can be typed as string[] or Array<string>.
  • Tuples allow fixed-length arrays with specific element types.

Learning Objectives

Master

  • Using basic TypeScript types (string, number, boolean, array)
  • Understanding type inference and when to use explicit annotations
  • Working with tuples and enums
  • Avoiding any type and using unknown instead

Develop

  • Type safety thinking and best practices
  • Understanding TypeScript's type system
  • Writing self-documenting code with types

Tips

  • Let TypeScript infer types when they're obvious from context.
  • Use explicit types for function parameters and return values.
  • Avoid using any—use unknown for values of unknown type.
  • Use const assertions for literal types: const colors = ['red', 'blue'] as const.

Common Pitfalls

  • Overusing any type, defeating TypeScript's purpose.
  • Not understanding the difference between null and undefined.
  • Forgetting that type annotations don't affect runtime behavior.
  • Using type assertions (as) incorrectly, bypassing type checking.

Summary

  • TypeScript provides basic types for type-safe programming.
  • Type inference reduces the need for explicit annotations.
  • any should be avoided—use unknown for type-safe handling of unknown values.
  • Understanding basic types is the foundation of TypeScript development.

Exercise

Declare variables with different TypeScript types.

let name: string = "Alice";
let age: number = 30;
let isStudent: boolean = true;
let hobbies: string[] = ["reading", "coding"];
let tuple: [string, number] = ["age", 25];

console.log(name, age, isStudent, hobbies, tuple);

Exercise Tips

  • Try removing type annotations to see TypeScript's type inference in action.
  • Experiment with union types: let value: string | number = 'hello'.
  • Create an enum for a set of related constants.
  • Use const assertions to create literal types.

Code Editor

Output