Avatar ·

Как обновить TypeScript до последней версии с помощью npm?

Привет всем! Я начинающий разработчик и недавно начал изучать TypeScript. У меня возникла проблема: я установил TypeScript глобально через npm некоторое время назад, но сейчас мне нужно обновить его до последней версии, чтобы использовать новые возможности, например, template literal types или улучшенную поддержку модулей. Вот что я уже пробовал: 1. Запустил `npm update -g typescript` — но версия не изменилась, осталась 4.5.0. 2. Попробовал `npm install -g typescript@latest` — вроде бы установка прошла, но когда я проверяю версию через `tsc --version`, всё ещё вижу старую. 3. Я также проверил, не установлен ли TypeScript локально в проекте — там стоит `typescript@4.2.0`, и я хочу обновить и его тоже. Мой код: ```typescript // Старый код, который работает function greet(name: string): string { return `Hello, ${name}!`; } // Хочу использовать новую фичу — template literal types type EventName = 'click' | 'focus' | 'blur'; type EventHandler = `on${Capitalize}`; // Эта строка выдаёт ошибку в моей версии ``` Ошибка: `Type 'Capitalize' does not satisfy the constraint 'string'` — я читал, что это из-за старой версии TypeScript. Подскажите, как правильно обновить TypeScript и глобально, и в конкретном проекте? Может быть, я что-то делаю не так с кэшем или путями? Заранее спасибо! <<>>

Пошаговое руководство по обновлению TypeScript

Проблема, с которой вы столкнулись, типична для начинающих. Дело в том, что npm update не всегда обновляет пакет до мажорной версии (например, с 4.x на 5.x), а только до последней в рамках текущего мажора. Кроме того, часто возникает путаница между глобальной и локальной установкой. Давайте разберём всё по порядку.

1. Обновление глобального TypeScript

Глобально установленный TypeScript используется, когда вы запускаете tsc из командной строки. Чтобы обновить его до последней версии, выполните:

npm install -g typescript@latest

Если это не сработало, возможно, у вас установлено несколько версий или кэш мешает. Попробуйте:

npm uninstall -g typescript
npm cache clean --force
npm install -g typescript@latest

После этого проверьте версию:

tsc --version

Вы должны увидеть что-то вроде Version 5.4.0 (актуальная на момент написания).

2. Обновление локального TypeScript в проекте

Локальная версия TypeScript используется, когда вы запускаете npx tsc или скрипты через package.json. Чтобы обновить её:

npm install --save-dev typescript@latest

Или, если TypeScript указан в dependencies (что редкость, но бывает):

npm install --save typescript@latest

После этого проверьте версию в проекте:

npx tsc --version

3. Проверка и настройка tsconfig.json

Даже после обновления TypeScript, новые фичи могут не работать, если в tsconfig.json указана старая версия target. Убедитесь, что у вас настроено правильно:

{
  "compilerOptions": {
    "target": "ES2020" или "ESNext", // Для новых фич
    "module": "ESNext",
    "strict": true
  }
}

Ваша проблема с Capitalize — это фича TypeScript 4.1+. Если вы обновитесь до 4.1+ и укажете target ES2015+, она будет работать.

4. Решение проблемы с вашим кодом

После обновления ваш код заработает:

type EventName = 'click' | 'focus' | 'blur';
type EventHandler = `on${Capitalize}`;
// Теперь EventHandler = "onClick" | "onFocus" | "onBlur"

5. Дополнительные советы

  • Проверьте, какой TypeScript вызывается: Используйте which tsc (Linux/Mac) или where tsc (Windows), чтобы убедиться, что вы используете правильный путь.
  • Используйте npx: Вместо глобальной установки лучше запускать npx tsc — он автоматически использует локальную версию из node_modules.
  • Обновляйте регулярно: TypeScript выходит раз в несколько месяцев. Подписывайтесь на релизы или используйте npm outdated для отслеживания.
  • Для больших проектов: Используйте инструменты вроде npm-check-updates для массового обновления зависимостей.

6. Если ничего не помогает

Иногда проблема в том, что у вас установлен TypeScript через другой менеджер пакетов (yarn, pnpm) или через глобальный менеджер (например, Volta, nvm). Проверьте:

npm list -g --depth=0

Если видите несколько версий, удалите лишние:

npm uninstall -g typescript@старая_версия

Надеюсь, это поможет! После обновления вы сможете использовать все современные возможности TypeScript.

<<>>

Альтернативный подход: использование npx и локальных версий

Вместо того чтобы мучиться с глобальной установкой, рекомендую полностью отказаться от неё в пользу локальной версии TypeScript в каждом проекте. Это современный и более надёжный подход.

Вот как это сделать:

  1. Удалите глобальный TypeScript:
    npm uninstall -g typescript
  2. Установите TypeScript локально в проект:
    npm init -y
    npm install --save-dev typescript
  3. Используйте npx для запуска:
    npx tsc --version
    npx tsc --init
  4. Добавьте скрипты в package.json:
    "scripts": {
      "build": "tsc",
      "watch": "tsc --watch"
    }

    Теперь можно запускать npm run build.

Преимущества:

  • Каждый проект использует свою версию TypeScript — никаких конфликтов.
  • Обновление происходит через npm install --save-dev typescript@latest в конкретном проекте.
  • Вы точно знаете, какая версия используется, глядя в package.json.
  • При совместной работе все разработчики используют одну версию.

Для вашей проблемы: просто обновите локальную версию, и Capitalize заработает без лишних танцев с бубном. Глобальная установка — это наследие прошлого, лучше от неё отказаться.