Перенос приложения create-react-приложения из javascript в typescript

Ответ 1

Я нашел решение для переноса create-реагировать-приложения из JavaScript в машинописный текст, этот способ не требует извлечения.

1. Создайте проект временного реагирования с использованием машинописного текста, выполнив команду create-react-app --scripts-version=react-scripts-ts (Примечание. Требуется глобальная установка create-react-app)
2. В вашем собственном проекте - под файлом package.json удалите react-scripts
3. Добавьте к вашему проекту react-scripts-ts, выполнив команду yarn add react-scripts-ts или, если вы используете npm, тогда npm install react-scripts-ts. Или добавьте "react-scripts-ts": "2.8.0" в package.json.
4. Из проекта, который вы создали на шаге 1, скопируйте файлы: tsconfig.json, tsconfig.test.json tslint.json в ваш собственный проект
5. В рамках собственного проекта, в package.json, при сценарии раздела, изменения react-scripts экземпляров react-scripts-ts (должно быть под start, build, test и eject
6. Установите наборы для реакции, установив следующие модули, используя пряжу или npm: @types/node, @types/react и @types/react-dom. Поместите в раздел devDependencies если используете package.json.
7. Измените index.js файла index.tsx на index.tsx
8. В вашем файле tsconfig.json добавьте следующую конфигурацию: "allowSyntheticDefaultImports": true - для получения дополнительной информации

ПРИМЕЧАНИЕ. Шаг 7 может потребовать дополнительной модификации в зависимости от того, что у вас есть в файле index.js (если это зависит от модулей JS в проекте).

Теперь вы можете запустить свой проект, и он может работать, для тех из вас, кто получает сообщение об ошибке. You may need an appropriate loader to handle this file type отношении файлов .js, это происходит потому, что babel не знает, как загрузить .js. файл из .tsx файлов. Что нам нужно сделать, это изменить конфигурацию проекта. Я обнаружил, что делать это без запуска eject - это использование пакета response-app-rewired. Этот пакет позволяет вам настроить внешнюю конфигурацию, в которую будут добавлены/переопределены параметры проекта по умолчанию. Мы будем использовать babel для загрузки файлов такого типа. Пусть перешел на:

1. Установите пакет react-app-rewired используя пряжу или npm
2. В вашей корневой папке (где находится package.json) создайте новый файл с именем config-overrides.js

3. Поместите этот код в файл config-overrides:

   var paths = require('react-scripts-ts/config/paths')
   
   module.exports = function override(config) {
     config.module.rules.push({
       test: /\.(js|jsx)$/,
       include: paths.appSrc,
       loader: require.resolve('babel-loader'),
       options: {
           babelrc: false,
           presets: [require.resolve('babel-preset-react-app')],
           cacheDirectory: true,
       },
     })
   
     return config
   }
   

Отредактируйте файл package.json, чтобы в сценариях start/start-js, build, test и eject использовался response-app-rewired, как показано в файле readme проекта. Например, "test": "react-app-rewired test --scripts-version react-scripts-ts --env=jsdom".

Теперь вы можете начать проект, и проблема должна быть решена. Вам могут потребоваться дополнительные модификации в зависимости от вашего проекта (дополнительные типы и т.д.).

Надеюсь, поможет

Как предложено здесь в комментариях, можно определить: "compilerOptions": { "allowJs": true} в вашем файле tsconfig.json, так что вы можете смешивать JS и TS без перереагирования по app-app. Спасибо за упоминание этого!

ОБНОВЛЕНИЕ: создание-реакция-приложение версии 2.1.0 поддерживает машинописный текст, поэтому для тех из вас, кто начинает с нуля, вы можете использовать его для создания нового приложения с машинописным шрифтом, и в соответствии с документацией это должно быть сделано с помощью следующей команды:

$ npx create-react-app my-app --typescript

Для существующих проектов после обновления до версии 2.1.0 добавьте следующие пакеты в зависимости вашего проекта с помощью следующей команды:

$ npm install --save typescript @types/node @types/react @types/react-dom @types/jest

и тогда вы можете просто переименовать .js в .ts файлы.

Ответ 2

Приложение Create React v2.1.0 было выпущено сегодня с поддержкой TypeScript. Это означает, что вам больше не нужно извлекать или использовать react-scripts-ts вилку; все, что вам нужно сделать, если у вас есть существующий проект Create React App, это установить необходимые пакеты:

$ npm install --save typescript @types/node @types/react @types/react-dom @types/jest
$ # or
$ yarn add typescript @types/node @types/react @types/react-dom @types/jest

Затем вы можете просто переименовать файлы .js файлы .ts чтобы начать использовать TypeScript.

(Если у вас есть существующее приложение, использующее ветвь create-реагировать-app-typecript, здесь учебник о том, как перенести его в обычное приложение Create React.)

Ответ 3

Для этого вам нужно будет выгрузить конфигурацию.

После извлечения вы должны выполнить следующие шаги:

• Добавьте typescript расширения tsx и ts в таблицу extensions в конфигурациях webpack (dev и prod).

• Добавьте ts-loader. Вот пример

  {
    test: /\.(ts|tsx)$/,
    include: paths.appSrc,
    use: [
      {
        loader: require.resolve('ts-loader'),
      },
    ],
  },
  

• Измените eslint на tslint

• Добавить source-map-loader, чтобы получить возможность отлаживать файлы typescript.

  {
    test: /\.js$/,
    loader: require.resolve('source-map-loader'),
    enforce: 'pre',
    include: paths.appSrc,
  }
  

• Создайте конфигурационный файл typescript и не забудьте установить allowJs на правда.