Software Engineer & Educator
TypeScript: From First Steps to Professional
7 hours, 58 minutes
CC
Course Description
Learn how to move from JavaScript to TypeScript while building real projects that highlight the power of static typing. Add type annotations, interfaces, and generics to write safer, more predictable code. Configure the TypeScript compiler, reuse types across files, and convert both client and server code to TypeScript to achieve add type safety across your entire codebase!
This course and others like it are available as part of our Frontend Masters video subscription.
Preview
CloseWhat They're Saying
This course was so fun and very engaging. I was a total beginner before starting the course (but with some experience in other languages).The exercises were well-made. Also, all the links to the docs and the state of the community were very welcome. Thank you!
laurent brusa
Anjana Vakil seems like a genuinely kind and engaging instructor. I really enjoyed following her course, it was both insightful and refreshing. I revisited familiar concepts and discovered new approaches to learning. Her enthusiasm made the experience even more enjoyable!
Gaëtan Dammaretz
Course Details
Published: October 9, 2025
Rating
Learning Paths
Learn Straight from the Experts Who Shape the Modern Web
Your Path to Senior Developer and Beyond
- 250+ In-depth courses
- 24 Learning Paths
- Industry Leading Experts
- Live Interactive Workshops
Table of Contents
Introduction
Section Duration: 26 minutes
Anjana introduces the course by explaining the motivations behind TypeScript, walking through setup, and showing how to move from JavaScript to TypeScript while adding types. She also explores key features like union types, type guards, and interfaces.
Anjana discusses the need for TypeScript by highlighting the issues JavaScript developers face due to its dynamic and weak type system, leading to unexpected behaviors and errors. She explains how JavaScript's flexibility can be both advantageous and problematic, showcasing examples of coercion and type inconsistencies.
Anjana introduces TypeScript as a solution developed by Microsoft to address these challenges, providing a more structured and type-safe approach to JavaScript development.
TypeScript Overview
Section Duration: 34 minutes
Anjana explains that TypeScript is not only a language but also a type checker, build tool, and IDE enhancer. It adds static typing, strong types, and new syntax, while compiling to JavaScript for compatibility and better development support.
Anjana discusses how TypeScript can be used as a type checker for JavaScript, even before writing any TypeScript code. She demonstrates using TypeScript to check a JavaScript file for errors, highlighting the benefits of catching potential issues early in the development process.
Anjana instructs students to run the TypeScript compiler with the strict flag, identify, and fixed errors in provided JavaScript code. She then walks through a possible solution highlighting how TypeScript can help catch common coding mistakes and improve code quality.
TypeScript Language Fundamentals
Section Duration: 1 hour, 43 minutes
Anjana explains how TypeScript type annotations define variable types, function parameters, and return values. She shows how they enforce strict typing compared to JavaScript, using primitive and literal types to prevent errors and improve code clarity.
Anjana explains how to add types to variables and functions in TypeScript using type annotations, focusing on arrays and objects. She demonstrates how to define array types using brackets and object types using curly brackets, ensuring strict typing for elements in arrays and properties in objects. Anjana also covers optional properties in objects, allowing for flexibility in defining types and handling potential undefined values.
Anjana explains union types in TypeScript using the pipe operator to combine multiple types into one, creating wider types. She demonstrates how to define union types, handle optional properties, and compose different types together to constrain TypeScript to expected value types. Anjana also discusses typing variables before assigning values in TypeScript to ensure type constraints are met during development.
Anjana discusses union types, where a type can encompass multiple values. She demonstrates how to narrow down union types to avoid errors, such as calling properties on undefined values. Anjana also introduces type guards to handle different narrower types within union types and explains the use of type aliases to simplify type annotations and reuse type definitions.
Anjana discusses adding type annotations to transition from writing JavaScript to TypeScript by renaming a .js file to .ts and using a utility called TSX to run TypeScript files as JavaScript.
Anjana instructs students practice adding type annotations to variables, function parameters, and return types in a TypeScript file. She also walks through a possible solution including handling undefined values, using type guards, and leveraging TypeScript's type inference capabilities.
Anjana explains the difference between TSX (TypeScript execute tool) and TSC (TypeScript compiler) in a development context. TSX allows quick iteration on TypeScript files without rigorous type checking, while TSC performs type checking and compiles TypeScript to JavaScript.
Configuring the TypeScript Compiler
Section Duration: 42 minutes
Anjana discusses the process of compiling and highlights the TypeScript compiler's ability to generate JavaScript code from TypeScript source code. She also mentions exploring type inference, advanced type concepts like interfaces and generics, and configuring the compiler using tsconfig.json files.
Anjana discusses how TypeScript code is compiled to JavaScript, emphasizing that the extra TypeScript syntax and type information only exist during compilation. Anjana also touches on compiler flags like --noEmit, --checkJs, and --strict, which allow for customization of TypeScript compiler input and output files.
Anjana explains the importance of specifying the target version of JavaScript when using TypeScript to compile code, as different versions have varying syntax and features. She demonstrates how to set the target version using flags like "target ES 2020" and introduces other TypeScript flags like "remove comments".
Anjana discusses the importance of the tsconfig.json file in TypeScript projects, which allows specifying compiler options without using command-line flags every time. She walks through setting up a TypeScript project by installing dependencies, such as TypeScript itself, and generating a tsconfig.json file to configure the TypeScript compiler.
Anjana discusses the tsconfig.json file and its role in configuring TypeScript compilation. She explains how TypeScript compiler generates various output files like declaration files, declaration map files, and source map files based on the tsconfig.json.
Interfaces & Generics
Section Duration: 1 hour, 6 minutes
Anjana explains interfaces in TypeScript and how they allow for defining object-like types with additional features such as extension and composition. She emphasizes the benefits of interfaces for creating reusable and composable types and demonstrates how interfaces can be extended to create even more specific types.
Anjana demonstrates handling promises correctly to avoid errors, and discusses how TypeScript uses angle brackets to specify the type of the promised value. Anjana demonstrates how TypeScript helps catch errors by enforcing type checking for promises, ensuring that the promised value matches the specified type.
Anjana explains generic types in TypeScript, where a type can take a type parameter inside angle brackets, allowing for flexibility in defining types that can later be instantiated by other types. She demonstrates creating a reusable type to handle scenarios where a type may be null or of any other type.
Anjana explains the utility type `partial`, which makes all properties of a type optional by adding question marks after each property. She also introduces related utility types `pick` and `omit`, which allow selecting specific properties or excluding certain properties from a type, respectively.
Anjana explains how to handle cases where TypeScript's type inference might not be helpful by using the 'any' type to allow any value, overriding type inference, and using '//@ts-ignore' comments to ignore type errors.
Anjana provides an overview of the topics covered so far including TypeScript's relationship with JavaScript, tools like TSC and TSX, syntax additions like type annotations and type aliases, advanced concepts like unions, interfaces, and generic types, as well as compiler settings.
Anjana discusses using the no emit flag for type checking without emitting files and the watch flag in TSC for recompiling on file save but noted potential performance issues for larger projects. Anjana also demonstrates incorporating type checking commands before executing subsequent tasks to maintain type integrity throughout the development workflow.
Anjana instructs students to declare missing types in the TypeScript files to resolve errors flagged by the TypeScript compiler. She then walks through the solution creating types, handling optional properties and type unions, and utilizing utility types like omit to manipulate existing interfaces and resolve errors.
Client Application TypeScript
Section Duration: 1 hour, 58 minutes
Anjana outlines the next part of the course, which focuses on configuring TypeScript for real use cases, ensuring type safety, reusing types, and exploring community tools. She will demonstrate these concepts by TypeScript-ifying the full-stack EventMe app, with both backend and frontend integration.
Anjana walks through installing TypeScript as a development dependency, setting up tsconfig.json, and exploring compiler options to configure TypeScript effectively for the Event Me repo.
Anjana explains the benefits of leveraging base configurations in TypeScript to avoid manually setting up compiler options for different project types. By installing and extending recommended base configurations, developers can efficiently inherit pre-configured settings for various project environments such as Node, React, and other JavaScript runtimes.
Anjana converts component files to .ts and suggests using interfaces and data structures from tests and backend code to guide fixing the resulting errors.
Anjana explains how TSC inherits options from base configs, demonstrates tweaking base extensions, and emphasizes using show config to verify TypeScript compiler settings.
Anjana explains the importance of declaration files in TypeScript to provide type information for JavaScript code. She also demonstrates how to address errors related to missing type information by configuring TypeScript to recognize type definitions from external packages like Vite.
Anjana demonstrates creating a custom event type, discusses the event type related to the DOM model, and guides participants through defining properties like ID, title, description, host, and RSVPs within the event interface using interfaces and arrays.
Anjana demonstrates how to specify types for function parameters and return values to help TypeScript understand the code better. Anjana also explains the use of async functions, promises, and handling errors, showcasing how TypeScript infers types based on the provided information.
Anjana continues fixing errors in forms.ts by adding types to resolve implicit any issues. She highlights the importance of understanding HTML and DOM interactions and demonstrates how to specify types for both functions and variables.
Anjana demonstrates using literal types to enforce specific values, catching errors that JavaScript might overlook. She emphasizes that while TypeScript helps with static type checking, programmers will still need to ensure code behavior matches intentions through testing and manual checks.
Server Application TypeScript
Section Duration: 1 hour, 8 minutes
Anjana instructs students to convert the backend of Event Me into TypeScript. She then demonstrates installing TypeScript, creating a TS config, extending it for a Node.js backend, renaming files, handling errors, installing type definitions for Node, and configuring TypeScript to recognize Node-specific types.
Anjana introduces Definitely Typed as a valuable resource for acquiring missing type declarations and demonstrates how to install type declarations for common Node.js dependencies using npm.
Anjana walks through adding type declarations and enabling TypeScript compiler options, highlighting how TypeScript integrates with VS Code. She emphasizes fixing missing type annotations to prevent implicit any errors in function signatures during conversion.
Anjana instructs students to create the needed backend types, define their properties, and ensure the types are appropriately structured for effective use throughout the application. She also guides students through the process of creating interfaces for main entities like events, users, and RSVPs, emphasizing the reusability of these types across different parts of the application.
Anjana explains how to manage TypeScript type definitions in a project by importing and exporting types between modules. She demonstrates how to use the `import type` syntax to bring in type information and ensure TypeScript recognizes the correct types.
Anjana demonstrates using VS Code tools to import and annotate types, explores accessing interface types with pick, index access, and type aliases, and highlights building reusable, modular types in TypeScript projects.
Anjana explains the concept of type assertions, where developers can override TypeScript's type inference by explicitly specifying the type of a value using the "as" keyword. Anjana demonstrates how type assertions can be used to inform TypeScript about the expected types in situations where it may not be able to infer them accurately.
Fullstack TypeScript
Section Duration: 8 minutes
Anjana explains how TypeScript’s type safety prevents runtime errors and improves reliability, highlighting end-to-end type safety across front and back ends. She also mentions tools like Zod for runtime validation to align objects with type definitions, and various tools and resources available for working with TypeScript, such as vitest for type-aware testing, and TypeORM for maintaining consistency between database data and program schemas.
Wrapping Up
Section Duration: 8 minutes
Anjana wraps up the course by briefly reviewing key topics such as JavaScript vs. TypeScript, type annotations, TS config, type reuse, and tools for end-to-end type safety. She also points to further resources like the official docs, Frontend Masters courses, and Josh Goldberg’s books.
Learn Straight from the Experts Who Shape the Modern Web
- 250+In-depth Courses
- Industry Leading Experts
- 24Learning Paths
- Live Interactive Workshops