You will be able to
- Install Node.js and the TypeScript compiler, then compile a .ts file to JavaScript with tsc
- Configure a tsconfig.json to set the compile target, output folder and strictness checks
- Debug TypeScript code in VS Code using source maps and breakpoints
- Annotate variables, arrays, tuples, enums, functions and objects with precise types
- Model data with type aliases, union, intersection and literal types, and narrow unions safely
- Handle null and undefined values with optional chaining and the optional call operator
Good to know first
- Basic JavaScript: variables, constants, arrays, functions and objects
- Basic use of the command line and running npm commands
- Familiarity with Visual Studio Code's file explorer and terminal
Syllabus
10 lessons and a final project
- 1
What TypeScript adds to JavaScript, and its tradeoffs Free
You learn what TypeScript is: JavaScript with static types checked before the code runs. You also see the benefits it brings, such as catching mistakes early and better editor help, and the costs it asks of you.
1 code1 exercise3 questions - 2
Installing Node, npm, the TypeScript compiler and VS Code Beyond Pass
You learn why TypeScript needs a compile step, and how to set up Node, npm, the TypeScript compiler (tsc) and VS Code on your machine. You finish by checking the compiler version and opening a project folder in VS Code.
1 code6 build steps3 exercises3 questions - 3
Writing and compiling your first TypeScript program Beyond Pass
You will create a .ts file, compile it with the tsc command into JavaScript, and see how a type annotation catches a mistake at compile time. You will also see why the compiled output has no type annotations and uses var by default.
3 code5 build steps2 exercises - 4
Creating and configuring tsconfig.json Beyond Pass
You will create a TypeScript configuration file with tsc --init and change the key settings: target, rootDir, outDir, removeComments and noEmitOnError. You will then compile a whole project with a single tsc command.
3 code6 build steps3 exercises3 questions - 5
Debugging TypeScript with source maps and VS Code Beyond Pass
You will learn how a source map links your TypeScript lines to the generated JavaScript, so a debugger can stop on your .ts code. You will set up VS Code to compile and debug a TypeScript file step by step, watching variables change.
3 code8 build steps2 exercises - 6
Primitive Types, the any Type, and Strict Mode Beyond Pass
You will learn how TypeScript annotates and infers primitive types like number, string and boolean, and why the any type quietly switches off type checking. You will also see how the strict setting in tsconfig.json controls the implicit any check.
2 code5 build steps3 exercises3 questions - 7
Arrays, Tuples and Enums in TypeScript Beyond Pass
You will learn how TypeScript types arrays so every element has the type you expect, how tuples describe a fixed-length array with a type for each position, and how enums group related named constants. Each idea comes with a small example you can run and check yourself.
3 code3 build steps3 exercises4 questions - 8
Annotating Functions: Return Types, Optional and Default Parameters Beyond Pass
You will learn to annotate function parameters and return types in TypeScript so the compiler catches mistakes before your code runs. You will also learn how optional and default parameters change the rules for calling a function.
2 code3 build steps3 exercises3 questions - 9
Typing objects and methods in TypeScript Beyond Pass
You will learn how to give an object an explicit type annotation listing its properties, how to mark a property as read-only, and how to describe a method's parameters and return type. You will also see how to handle a property that every object must have.
1 code5 build steps2 exercises3 questions - 10
Type Aliases, Unions, Intersections and Literal Types Beyond Pass
This lesson shows how to reuse types with type aliases, combine types with unions (|) and intersections (&), and limit values with literal types. It also covers nullable types and the optional operators (?. and ?.[ ] and ?.()) that keep code safe when values may be null or undefined.
5 code5 build steps3 exercises4 questions
Final project
Typed Shop Order Tracker
Build a small TypeScript project that models shop customers and orders, then prints a summary report. You will set up the compiler and a tsconfig.json, use the type features from the course, and debug the result in VS Code with source maps. The goal is a project where the compiler catches your mistakes before the code runs.
Its 8 tasks open with Beyond Pass.
Free preview · Lesson 1 in full
What TypeScript adds to JavaScript, and its tradeoffs
You learn what TypeScript is: JavaScript with static types checked before the code runs. You also see the benefits it brings, such as catching mistakes early and better editor help, and the costs it asks of you.
Draw and write next to the video.
The idea
TypeScript is a programming language built on top of JavaScript. Every JavaScript file is already a valid TypeScript file, so you can use TypeScript wherever you use JavaScript, on the front end or the back end. Mosh's picture: JavaScript is a kid with no discipline who does whatever they want; TypeScript is the same kid with some discipline. It was created at Microsoft to fix some shortcomings of JavaScript.
The most important thing TypeScript adds is static typing. Languages come in two families. In statically typed languages such as C++, C# and Java, each variable has a type fixed when you write the code, and an integer variable can only hold integers. In dynamically typed languages such as JavaScript, Python and Ruby, a variable's type is decided at runtime and can change: you can set a variable to a number and later to a string. That flexibility is useful, but it means a function that expects a number may quietly receive a string, and you find out only when the program runs or a unit test fails.
TypeScript brings the discipline back. You declare the type of a variable when you write it, for example let x: number = 10;. Then the TypeScript compiler checks your code before it runs. If you later write x = "a";, the compiler stops you right there, at compile time. You do not have to run the application or write a test for every case to catch that bug.
Typing also powers your editor. Most code editors understand TypeScript, so they know the type of each variable and offer code completion (suggesting the properties you can use) and refactoring (safely renaming or moving code). TypeScript also adds newer language features, written in shorthand notation, that help you write cleaner, shorter code. Browsers take time to support new JavaScript features, so writing TypeScript lets you use features from future JavaScript today.
Now the tradeoffs. TypeScript is an extra step: your code must be compiled, and you must write type information, which means more typing and more to learn. You gain safety and tooling in exchange for that effort. For small throwaway scripts the extra work may not pay off; for large, long-lived applications that many people maintain, the early error catching and clear types usually do. In short: TypeScript is JavaScript plus type checking, and you can always run what it produces as JavaScript.
Key points
- TypeScript is built on top of JavaScript; every JavaScript file is a valid TypeScript file. 0:22
- Static typing means types are set when you write the code and checked by the compiler before the program runs. 3:43
- In dynamic languages like JavaScript, a variable's type can change at runtime, which is flexible but can hide bugs until the program runs. 4:20
- The compiler catches a mistake such as assigning a string to a number variable at compile time, so you do not have to test every piece of code to find it. 5:40
- Typing also gives editors code completion and refactoring, and lets you use newer JavaScript features early. 6:06
- The cost: an extra compile step and more typing and learning, a good trade for large applications. 6:30
Words to know
- Static typing
- Each variable's type is declared and checked before the program runs.
- Dynamic typing
- A variable's type is decided at runtime and can change while the program runs.
- Compiler
- A program that checks and translates source code; TypeScript's compiler checks types before the code runs.
- Code completion
- The editor suggests valid names, such as properties or functions, as you type.
- Refactoring
- Changing code's structure, such as renaming, safely with the editor's help.
- Shorthand notation
- A shorter way to write common code that TypeScript supports alongside JavaScript.
Code from the screen
let x: number = 10;
x = "a";Watch out
- TypeScript does not make JavaScript faster at runtime; its main gain is catching mistakes before the program runs. 5:40
- TypeScript is not a different runtime. Its output runs as JavaScript, so it works wherever JavaScript works. 6:30
- Types are checked at compile time, not while the program runs; this is why you do not need to test every case to find type errors. 5:40
Practice
In your own words, explain why a dynamically typed language like JavaScript can let a bug hide until runtime, and how static typing changes that.
Solution
- In JavaScript, a variable's type is decided while the program runs and can change, so passing a string where a number is expected is allowed by the language.
- The mistake only shows up when that line executes, perhaps in production or in a failing test.
- With static typing, you declare the type up front and the compiler checks every assignment and call before the program runs, so the mistake is reported at compile time.
Model answer: In JavaScript, a variable can change type at runtime, so a wrong type is accepted until the code runs. Static typing declares types in advance and the compiler checks them before running, so the error is caught early.
On your scratchpad
Draw two columns: on the left, a variable in JavaScript that changes from number to string; on the right, a TypeScript variable with a declared type. Next to each, write when the error is noticed (at runtime or at compile time).
Quiz
What is the main thing TypeScript adds to JavaScript?
- Static typing checked by a compiler
- A new runtime that replaces the browser
- Faster code that runs in less memory
- A database for storing variables
Show the answer
A. Static typing checked by a compiler · The video says the most important feature is static typing, with a compiler that checks types.
3:43 watch the momentIn the example, what happens when you write x = "a" after let x: number = 10?
- The compiler stops you at compile time
- The program runs and x becomes the string a
- x is automatically converted to 0
- Nothing, because JavaScript allows it at runtime
Show the answer
A. The compiler stops you at compile time · The compiler flags the mistake before the program runs.
5:51 watch the momentWhich is a tradeoff of TypeScript?
- It adds a compile step and more typing to write
- It cannot run wherever JavaScript runs
- It removes the need for editors
- It makes you test every function
Show the answer
A. It adds a compile step and more typing to write · Mosh notes the extra compile step and typing; the output still runs as JavaScript.
6:30 watch the moment
Lessons 2–10 and the final project
They open with Beyond Pass: every lesson of every course, in full. One payment: $14.99 for 90 days or $29 for a year. No subscription.
Made by Beyond from the video “TypeScript Tutorial for Beginners” by Programming with Mosh. The video plays in YouTube's own player. Watch it on YouTube · All lessons