Как заменить TypeScript на JavaScript?

Как заменить TypeScript на JavaScript

Замена TypeScript на JavaScript — миграция типизированного кода в нетипизированный. Процесс простой, но требует внимания к деталям.

Шаг 1: Переименование файлов

Все .ts и .tsx → .js и .jsx:

find src -name "*.ts" ! -name "*.d.ts" -exec sh -c 'mv "$1" "${1%.ts}.js"' _ {} \;
find src -name "*.tsx" -exec sh -c 'mv "$1" "${1%.tsx}.jsx"' _ {} \;

Шаг 2: Удалить типы из кода

Было (TypeScript):

interface User {
  id: number;
  name: string;
}

function getUser(id: number): User {
  return { id, name: 'Alice' };
}

Стало (JavaScript):

function getUser(id) {
  return { id, name: 'Alice' };
}

Шаг 3: Удалить аннотации типов

// Было
const greeting: string = 'Hello';
function add(a: number, b: number): number { return a + b; }

// Стало
const greeting = 'Hello';
function add(a, b) { return a + b; }

Шаг 4: React компоненты

Было:

interface Props {
  label: string;
  onClick: () => void;
}

export const Button: React.FC<Props> = ({ label, onClick }) => (
  <button onClick={onClick}>{label}</button>
);

Стало:

export function Button({ label, onClick }) {
  return <button onClick={onClick}>{label}</button>;
}

Шаг 5: Конфигурация

Удали tsconfig.json:

rm tsconfig.json

Next.js, Vite, CRA автоматически переключатся на JavaScript.

Шаг 6: Зависимости

npm uninstall typescript @types/react @types/node

Удали из package.json: typescript, @types/* пакеты, type-check скрипты.

Валидация вместо типов

JSDoc для документации:

/**
 * @param {number} id - User ID
 * @returns {Promise<Object>} User data
 */
async function getUser(id) {
  return fetch(`/api/users/${id}`).then(r => r.json());
}

Zod для runtime валидации:

import { z } from 'zod';

const UserSchema = z.object({
  id: z.number(),
  name: z.string(),
});

function processUser(data) {
  return UserSchema.parse(data);
}

PropTypes для React:

import PropTypes from 'prop-types';

function Button({ label, onClick }) {
  return <button onClick={onClick}>{label}</button>;
}

Button.propTypes = {
  label: PropTypes.string.isRequired,
  onClick: PropTypes.func.isRequired,
};

Чеклист миграции

• Все .ts -> .js, .tsx -> .jsx
• Удалены типы (: string, : number)
• Удалены интерфейсы и enum
• Обновлены React компоненты
• Удалён tsconfig.json
• Обновлён package.json
• Установлена валидация (Zod/PropTypes)
• Тесты проходят
• npm start/dev работает

Минусы JavaScript

❌ Нет проверки типов во время разработки ❌ Ошибки выявляются только в runtime ❌ IDE помощь слабее ❌ Сложнее рефакторить

Плюсы JavaScript

✅ Нет времени компиляции ✅ Проще для маленьких проектов ✅ Меньше зависимостей ✅ Быстрее стартует

Вывод

Миграция простая, но TypeScript полезнее для больших проектов. Удаление типов теряет safety и IDE помощь.