Где можно посмотреть скомпилированный TypeScript-код в браузере?

Как браузер работает с TypeScript

Браузеры не понимают TypeScript напрямую. Код на TypeScript сначала компилируется в JavaScript с помощью компилятора (например, tsc или через сборщик вроде Webpack). Затем этот JavaScript выполняется в браузере. Поэтому в DevTools вы видите именно JavaScript, а не TypeScript.

Где искать скомпилированный код

Откройте DevTools (F12) и перейдите на вкладку Sources. В дереве файлов слева вы увидите все загруженные скрипты. Если ваш TypeScript-код был скомпилирован в отдельный файл (например, app.js), он будет там. Если используется сборщик, код может быть объединён в один бандл, и его можно найти в папке static/js или аналогичной.

Роль source maps

Source maps — это специальные файлы, которые связывают скомпилированный JavaScript с исходным TypeScript. Если они подключены, DevTools автоматически показывают исходный TypeScript-код при отладке, что удобно для разработчика. Чтобы увидеть именно скомпилированный JavaScript, вы можете отключить source maps в настройках DevTools (Settings → Sources → Enable JavaScript source maps) или найти файл .js в списке ресурсов и открыть его.

Практический пример

// Исходный код: app.ts
const greeting: string = "Hello";
console.log(greeting);

// После компиляции (app.js):
var greeting = "Hello";
console.log(greeting);

В DevTools вы увидите либо app.ts (если source maps включены), либо app.js (если отключены).

Вывод

Чтобы посмотреть скомпилированный TypeScript-код, используйте вкладку Sources в DevTools и при необходимости отключите source maps. Это полезно для отладки, когда нужно проверить, как именно TypeScript преобразуется в JavaScript, особенно при подозрении на ошибки компиляции.