Typescript Intro

Master TypeScript's type system to catch bugs at compile-time, enable better tooling, and write more maintainable code. Learn types, interfaces, generics, and utility types.

Learn Python, JavaScript, Java and more with free interactive lessons, real projects and AI-powered help. Beginner-friendly.

Part of the free JavaScript course at LearnCodingFast — hands-on lessons with examples you run in your browser, plus practice exercises and a quick quiz.

TypeScript requires compilation to JavaScript. To practice:

What You'll Learn

Why TypeScript?

JavaScript is dynamically typed — variables can hold any value, functions accept anything, and errors only appear at runtime. TypeScript adds a compile-time type system that catches bugs before your code runs.

Basic Type Annotations

Type annotations tell TypeScript exactly what kind of value a variable, parameter, or return value should hold.

Interfaces

Interfaces describe the shape of objects. They define what properties an object must have and their types, making your code predictable and self-documenting.

Type Aliases & Union Types

Type aliases create reusable type definitions. Union types allow a value to be one of several types, while literal types restrict values to specific options.

Generics

Generics create reusable, type-safe components that work with any type. They're essential for building libraries, APIs, and flexible utilities.

💡 Key Insight: Generics are type placeholders. When you call a generic function, TypeScript infers or you specify the actual type, giving you full type safety without duplicating code.

Type Narrowing & Guards

Type narrowing lets TypeScript understand the specific type within conditional blocks. Discriminated unions are the most powerful pattern for complex data.

Utility Types

TypeScript includes powerful built-in utility types that transform existing types. These are essential for everyday TypeScript development.

Mapped & Conditional Types

Advanced type transformations let you create new types programmatically. These power the utility types and enable sophisticated type logic.

Async Types & Promises

TypeScript fully understands asynchronous code. Type your async functions, API responses, and error handling for complete safety.

Decorators

Decorators are a meta-programming feature for modifying classes, methods, and properties. They're used extensively in Angular, NestJS, and TypeORM.

Declaration Files

Declaration files (.d.ts) add type information to JavaScript libraries. Module augmentation lets you extend existing types.

Key Takeaways

Practice quiz

What problem does TypeScript solve compared to plain JavaScript?

  • It makes code run faster at runtime
  • It removes the need for a browser
  • It catches type errors at compile-time before the code runs
  • It replaces HTML and CSS

Answer: It catches type errors at compile-time before the code runs. TypeScript adds a compile-time type system that catches bugs before your code runs, instead of failing at runtime like dynamically typed JavaScript.

What does an interface describe in TypeScript?

  • The shape of an object — its properties and their types
  • A CSS layout
  • A network request
  • A runtime loop

Answer: The shape of an object — its properties and their types. Interfaces describe the shape of objects: what properties an object must have and their types.

In the lesson, what does the '?' do in an interface property like 'description?: string'?

  • Makes the property readonly
  • Makes the property a union
  • Makes the property private
  • Makes the property optional

Answer: Makes the property optional. A '?' after a property name marks it as optional, so the object can omit it.

What is a union type such as 'string | number'?

  • A type that must be both string and number at once
  • A value that can be one of several listed types
  • A function that returns nothing
  • An array of strings

Answer: A value that can be one of several listed types. Union types allow a value to be one of several possible types, like 'string | number'.

What do generics like 'identity<T>(value: T): T' provide?

  • Reusable, type-safe code that works with any type
  • Faster compilation
  • Automatic network requests
  • Runtime type checking only

Answer: Reusable, type-safe code that works with any type. Generics create reusable, type-safe components that work with any type while preserving full type safety.

Which utility type makes all properties of a type optional?

  • Required<T>
  • Readonly<T>
  • Partial<T>
  • Pick<T, Keys>

Answer: Partial<T>. Partial<T> makes all properties of T optional; Required<T> does the opposite.

What does 'Omit<User, "password">' produce?

  • Only the password property
  • The User type with the password property removed
  • A union of User and password
  • An array of users

Answer: The User type with the password property removed. Omit<T, Keys> removes the specified properties from a type, so Omit<User, 'password'> drops password.

Which narrowing technique works for distinguishing primitive types like string vs number?

  • instanceof
  • the 'new' operator
  • JSON.parse
  • typeof

Answer: typeof. typeof narrowing checks primitive types (e.g., typeof value === 'string'); instanceof is for class instances.

In a discriminated union, what is the 'kind' field used for?

  • Styling the object
  • Acting as a discriminant so TypeScript can narrow to the specific shape
  • Storing the object id
  • Making the type generic

Answer: Acting as a discriminant so TypeScript can narrow to the specific shape. A literal discriminant property like 'kind' lets a switch narrow a discriminated union to one specific member type.

What is the purpose of a declaration file (.d.ts)?

  • To run JavaScript faster
  • To compile CSS
  • To add type information to JavaScript libraries
  • To bundle images

Answer: To add type information to JavaScript libraries. Declaration files (.d.ts) add type information to JavaScript libraries, and module augmentation lets you extend existing types.