PL 21/22

# TypeScript

# Building, Debugging and Running TS

# With Chrome

See the video Debug Node.js apps with Chrome DevTools and TypeScript

We set a debugger statement inside the code to stop the execution. for instance for the filefindbug.ts:

class FindBug {
  findBugg(bug: string) {
    console.log(`Finding this ${bug} on my program!`)
  }
}
debugger;
const bugs: FindBug = new FindBug()
console.log(bugs.findBugg('Spider'))
1
2
3
4
5
6
7
8

We run the .js generated file with --inspect-brk:

node --inspect-brk fordebug/findbug.js
1

we must compile the .ts source with the sourceMap option activated:

tsc fordebug/findbug.ts --sourceMap true`:
1

Here is an example:

➜  debug pwd
/Users/casianorodriguezleon/campus-virtual/2122/learning/typescript-learning/debug
➜  debug npm run debug

> debug@1.0.0 debug
> npm test; node --inspect-brk fordebug/findbug.js


> debug@1.0.0 test
> tsc fordebug/findbug.ts --sourceMap true

Debugger listening on ws://127.0.0.1:9229/013ee471-d752-447a-904e-6037b8d236d1
For help, see: https://nodejs.org/en/docs/inspector
1
2
3
4
5
6
7
8
9
10
11
12
13

Here is a screenshot of a session with chrome after visiting chrome://inspect:

# With VSCode

Watch Build and Debug NodeJS Typescript with ONLY VSCODE. Basarat Codes (opens new window) Youtube

In addition I had to install as development dependencies locally:

ts-node and ts-config-paths

This is the launch.json file used to debug gh-edu.ts:

{
  // Use IntelliSense para saber los atributos posibles.
  // Mantenga el puntero para ver las descripciones de los existentes atributos.
  // Para más información, visite: https://go.microsoft.com/fwlink/?linkid=830387
  "version": "0.2.0",
  "configurations": [
    {
      "type": "pwa-node",
      "request": "launch",
      "name": "debug gh-edu -h",
      "skipFiles": [
        "<node_internals>/**"
      ],
      // "preLaunchTask": "tsc: build - tsconfig.json",
      "program": "${workspaceFolder}/gh-edu.ts",
      "runtimeArgs": [ "-r", "ts-node/register", "-r", "tsconfig-paths/register" ],
      "args": [ "-h" ],
      "console": "integratedTerminal",
      "outFiles": [
        "${workspaceFolder}/js/**/*.js"
      ]
    }
  ]
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

special interest has the double asterics in /js/**/*.js allowing the debugging of other files, not only the main one. See https://stackoverflow.com/questions/69326439/debug-multiple-files-in-typescript (opens new window)

      "outFiles": [
        "${workspaceFolder}/js/**/*.js"
      ]
1
2
3

# Introduction to TypeScript

# TypeScript - Tutorial desde CERO en Español 🏆

# Tutorial TypeScript con Node.js y Express. ¡Crea tu API REST con tipos estáticos DESDE CERO!

# Writing Modules in TypeScript

# Curso FullStack Open

El curso Profundización en el desarrollo web moderno

https://fullstackopen.com/es/ (opens new window)

📚 🧑‍💻 Presentación del curso y Fundamentos del Desarrollo Web - Bootcamp FullStack Gratuito

MiDuDev comienza aquí el Bootcamp FullStack gratuito con una introducción. Después de eso, una descripción general de los conceptos básicos del desarrollo web y también habla sobre los avances en el desarrollo de aplicaciones web durante las últimas décadas.

# References

Last Updated: 5 months ago