// @ts-check в JS; JSDoc для получения типов
Включайте проверку типов в .js с помощью // @ts-check и JSDoc; добавляйте @param/@returns, @type/@typedef и @template для обобщённых шаблонов; настраивайте tsconfig для постепенной миграции.
«// @ts-check в JS; JSDoc для получения типов» — бесплатный урок TypeScript Academy на CoddyKit. Это урок 1 из 1. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения TypeScript Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс TypeScript Academy содержит 1 уроков всего.
Введение
Цель: использовать преимущества TypeScript внутри файлов .js. Вы включите // @ts-check, добавите типы JSDoc и настроите tsconfig для постепенного внедрения.
- Проверка отдельных файлов и всего проекта
- @param, @returns, @type, @typedef
- @template для вспомогательных функций, подобных обобщённым
Включение проверки
Добавьте // @ts-check в начало файла .js. Используйте @param/@returns, чтобы документировать и типизировать функцию.
// calculator.js
// @ts-check
/**
* Adds two numbers.
* @param {number} a
* @param {number} b
* @returns {number}
*/
export function add(a, b) {
return a + b
}
// Usage: type errors appear if you pass non-numbers
// add("2", 3) // TS will flag this in JSОпределение и аннотация типов
Используйте @typedef, чтобы определить повторно используемую структуру, и @type, чтобы аннотировать переменные. Необязательные поля помечаются с помощью ?.
// models.js
// @ts-check
/** @typedef {{ id: string; name: string; age?: number }} User */
/** @type {User} */
export const currentUser = { id: "u1", name: "Ada" }
/**
* Greets a user.
* @param {User} u
* @returns {string}
*/
export function greet(u) {
return `Hello, ${u.name}!`
}Параметры шаблона
@template вводит параметры типов для функций, подобных обобщённым, в JS. Вывод типов работает в местах вызова.
// helpers.js
// @ts-check
/**
* Maps items with a function, preserving types.
* @template T,U
* @param {T[]} items
* @param {(x: T) => U} f
* @returns {U[]}
*/
export function map(items, f) {
const out = []
for (const x of items) out.push(f(x))
return out
}
// Inference: T=number, U=string
// map([1,2], n => n.toFixed(2))tsconfig для JS
Для всего проекта: включите checkJs для всех файлов .js. Установите allowJs, чтобы включить файлы JS в программу. Используйте noEmit, когда выводом занимается сборщик.
// tsconfig.json
{
"compilerOptions": {
"target": "ES2020",
"module": "ESNext",
"checkJs": true,
"allowJs": true,
"strict": true,
"noEmit": true
},
"include": ["./**/*.js"],
"exclude": ["node_modules"]
}Советы по миграции
Советы по миграции:
- Начните с критически важных файлов, используя
// @ts-check. - Создайте небольшие
@typedefдля общих структур. - Постепенно переименовывайте часто используемые участки в
.ts, когда типы стабилизируются.
Проверка ts-check
Быстрая проверка: как включить проверку TS в файле .js?
Повторение
Повторение: включите // @ts-check, добавьте @param/@returns/@typedef/@template и ужесточите настройки tsconfig для проектов на JS перед миграцией в .ts.
Часто задаваемые вопросы
Урок «// @ts-check в JS; JSDoc для получения типов» бесплатный?
Да — полный текст урока «// @ts-check в JS; JSDoc для получения типов» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс TypeScript Academy, подпишись на CoddyKit PRO. Курс TypeScript Academy содержит 1 уроков всего.
Чему я научусь в уроке «// @ts-check в JS; JSDoc для получения типов»?
Включайте проверку типов в .js с помощью // @ts-check и JSDoc; добавляйте @param/@returns, @type/@typedef и @template для обобщённых шаблонов; настраивайте tsconfig для постепенной миграции. Ты практикуешь TypeScript Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать TypeScript Academy?
Предыдущий опыт не требуется. TypeScript Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 1 из 1.
Сколько времени занимает урок «// @ts-check в JS; JSDoc для получения типов»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке TypeScript Academy?
Да. Каждый урок TypeScript Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.