Чтобы установить Gatsby с помощью TypeScript, вы можете воспользоваться несколькими способами. Вот три распространенных подхода:

Метод 1. Создайте новый проект Gatsby с помощью TypeScript

1. Во-первых, убедитесь, что в вашей системе установлены Node.js и npm (менеджер пакетов Node).
2. Откройте терминал или командную строку и выполните следующую команду, чтобы установить Gatsby глобально:

   npm install -g gatsby-cli

3. Создайте новый проект Gatsby с помощью TypeScript, выполнив следующую команду:

   gatsby new my-gatsby-project https://github.com/gatsbyjs/gatsby-starter-typescript

   Эта команда создаст новый проект Gatsby с использованием официального Gatsby Starter для TypeScript.

4. Перейдите в каталог проекта:

   cd my-gatsby-project

5. Наконец, запустите сервер разработки с помощью следующей команды:

   gatsby develop

   При этом запустится локальный сервер разработки по адресу http://localhost:8000, где вы сможете просматривать свой сайт Gatsby с помощью TypeScript.

Метод 2: добавление TypeScript в существующий проект Gatsby

Если у вас уже есть проект Gatsby и вы хотите добавить поддержку TypeScript:

1. Перейдите в корневой каталог вашего проекта Gatsby.
2. Установите необходимые зависимости, выполнив следующую команду:

   npm install --save gatsby-plugin-typescript typescript @types/react @types/react-dom

3. Создайте файл tsconfig.jsonв корне вашего проекта со следующим содержимым:

   {
    "compilerOptions": {
      "allowJs": true,
      "baseUrl": "./src",
      "esModuleInterop": true,
      "jsx": "react",
      "lib": ["dom", "esnext"],
      "module": "esnext",
      "moduleResolution": "node",
      "noEmit": true,
      "resolveJsonModule": true,
      "skipLibCheck": true,
      "strict": true,
      "target": "esnext"
    },
    "include": ["src//*.ts", "src//*.tsx"],
    "exclude": ["node_modules", "/*.spec.ts"]
   }

   Этот файл конфигурации настраивает TypeScript для вашего проекта Gatsby.

4. Переименуйте файлы .jsв файлы .tsx, чтобы указать использование TypeScript.
5. Запустите или перезапустите сервер разработки Gatsby.

Метод 3: настройка TypeScript вручную

Если вы предпочитаете вручную настраивать TypeScript в своем проекте Gatsby:

1. Выполните шаги 1–4 из метода 2, чтобы создать базовый проект Gatsby.
2. Создайте файл tsconfig.jsonв корне вашего проекта. Вы можете использовать следующую минимальную конфигурацию:

   {
    "compilerOptions": {
      "module": "commonjs",
      "target": "esnext",
      "lib": ["dom", "esnext"],
      "esModuleInterop": true,
      "allowJs": true,
      "jsx": "react",
      "strict": true,
      "noEmit": true,
      "skipLibCheck": true
    },
    "include": ["src//*"],
    "exclude": ["node_modules", ".cache"]
   }

3. Установите необходимые зависимости TypeScript, выполнив следующую команду:

   npm install --save-dev typescript @types/react @types/react-dom

4. Переименуйте файлы .jsв файлы .tsx, чтобы указать использование TypeScript.
5. Запустите или перезапустите сервер разработки Gatsby.