Файл TypeScript в Vite

Файл с расширением ts подключают как модуль, и сервер отдаёт странице уже переведённый код.

В index.html меняют только путь в атрибуте src: вместо src/main.js указывают src/main.ts. Тип module остаётся тем же. Фрагмент страницы выглядит так:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>hello</title>
  </head>
  <body>
    <script type="module" src="/src/main.ts"></script>
  </body>
</html>

В точке входа можно описать функцию с типами параметра и результата. Браузер получит код без двоеточий и имён типов, а на экране останется обычный текст. Запишем модуль так:

function show(text: string): string {
  return text;
}

document.body.textContent = show('hello');

Запустим сервер разработки и откроем http://localhost:5173. На странице появится слово hello. При команде npm с подкомандой run и именем build Vite снова переведёт src/main.ts и положит итог в dist, как для JavaScript.

Создайте src/caption.ts с функцией, которая принимает строку и возвращает строку, и выведите из src/main.ts на странице слово ready.

Откройте ответ сервера для main.ts во вкладке сети и убедитесь, что в теле нет аннотаций типов.