Back to Course

Learn TypeScript

0% Complete
0/0 Steps
Lesson 25 of 25
In Progress

Tips and Tricks for Debugging Typescript Code

Debugging Typescript code can be a bit trickier than debugging regular JavaScript code, since the compiled code may not always match the original Typescript code. However, there are a few tools and techniques that can make debugging Typescript code easier.

Using the Typescript Compiler Flags

One way to make debugging Typescript code easier is by using the appropriate compiler flags. The --sourceMap flag generates source maps, which allow you to debug the original Typescript code rather than the compiled JavaScript code. The --inlineSourceMap flag includes the source map as a data URL in the compiled JavaScript file, which can be useful for debugging in certain environments.

The --inlineSources flag includes the original Typescript source code in the source map, which can be useful for debugging when the source maps are not available. However, this can increase the size of the compiled JavaScript file, so it should be used sparingly.

Using a Debugger

Most modern code editors and IDEs have built-in debuggers that can be used to debug Typescript code. These debuggers typically allow you to set breakpoints, step through code, and inspect variables.

To use a debugger, you will need to configure the debugger to use the source maps generated by the Typescript compiler. This typically involves specifying the location of the source maps and the root directory of the Typescript files.

Console Logging

Sometimes, using a debugger is not practical or possible, and in these cases, console logging can be a useful tool for debugging Typescript code. By inserting console.log statements into your code, you can print out the values of variables and expressions to the console, which can help you identify problems in your code.

Tips and Tricks

  • Use type assertions to temporarily override the type of a variable. This can be useful for debugging when you suspect that the wrong type is being inferred.
  • Use the --strict flag to enable additional type checking and catch more bugs at compile time.
  • Use the --noEmitOnError flag to prevent the compiler from generating JavaScript code if there are type errors. This can be useful for catching type errors early on.

If you’re having a particularly difficult time debugging your code, you might consider using a debugger. Many code editors have built-in debuggers, or you can use a standalone debugger like the Chrome DevTools. Debuggers allow you to step through your code line by line, see the values of variables at different points in time, and even set breakpoints to pause the execution of your code.


Finally, don’t be afraid to ask for help. Whether it’s from coworkers, online communities like Stack Overflow, or a mentor, getting a fresh perspective on your code can often lead to a breakthrough in understanding what’s going wrong.


To review these concepts, we will go through a series of exercises designed to test your understanding and apply what you have learned.

Consider the following code:

function add(a: number, b: number): number {
  return a + b;

console.log(add(1, '2'));

What will be logged to the console?

An error will be thrown because the add function expects two numbers, but a string is being passed as the second argument.

Consider the following code:

interface Point {
  x: number;
  y: number;

function printPoint(point: Point): void {
  console.log(`(${point.x}, ${point.y})`);

const point = { x: 1, y: 2, z: 3 };

What will be logged to the console?

The point (1, 2) will be logged to the console because the printPoint function only expects the x and y properties of the Point interface, and those are the only properties provided in the point object.

Consider the following code:

function add(a: number, b: number): number {
  return a + b;

console.log(add(1, 2));

How could you use a debugger to understand what’s happening in this code?

You could set a breakpoint on the first line of the add function. Then, when you run the code in the debugger, it will pause execution at that point. You can then step through the code line by line to see how the values of a and b are being used to calculate the sum.

How can you use the Typescript compiler to catch type errors during development?

The Typescript compiler can catch type errors during development by using the “strict” option in the “tsconfig.json” file. When this option is set to “true”, the compiler will perform additional type checking and will report any type errors it finds. This can be very helpful for catching issues early on and ensuring that your code is correct before it is compiled and run. To enable the “strict” option, you can include the following in your “tsconfig.json” file:

  "compilerOptions": {
    "strict": true

What is the “debugger” keyword and how can it be used in Typescript?

The “debugger” keyword is a way to pause the execution of your code at a certain point, allowing you to inspect variables and step through the code line by line. To use it in Typescript, you can simply include the “debugger” keyword in your code where you want to pause the execution. For example:

function myFunction() {
  let x = 1;
  let y = 2;
  debugger; // execution will pause here, allowing you to inspect x and y
  let z = x + y;