14.08.2023 в 15:25

Преобразование сайта Gatsby для использования TypeScript

Когда я изучал веб-разработку, я создал свой сайт-портфолио, используя шаблон Gatsby-starter-hello-world без использования Typescript. Typescript был в моем списке вещей, которые нужно изучить, но я никогда не занимался им, пока не начал работать профессионально. Изучив Typescript, я не могу представить себе создание чего-либо без него!

Если вы не знаете о преимуществах Typescript, вот список того, почему вы должны начать его использовать:

Раннее обнаружение ошибок: Статическая проверка типов TypeScript может обнаруживать ошибки на ранних этапах процесса разработки, снижая вероятность возникновения проблем во время выполнения.
Улучшенное качество кода: с TypeScript вы получаете лучшую поддержку инструментов, что позволяет выполнять более надежный рефакторинг и улучшать читаемость кода.
Улучшенная навигация по коду: аннотации типов TypeScript предоставляют обширную информацию для навигации по коду и автоматического завершения в вашей среде IDE.
Типозащищенные запросы GraphQL: если вы используете GraphQL для выборки данных, TypeScript позволяет обеспечить безопасность типов для ваших результатов GraphQL, уменьшая вероятность ошибок, связанных с данными.
Улучшение совместной работы: добавленная информация о типе облегчает членам команды понимание кода, написанного другими.

Вот как перенести сайт Gatsby на Typescript.

Шаг 1: Очистка

Перед интеграцией TypeScript очистите кеш:

gatsby clean

Шаг 2: Конвертируйте файлы в TypeScript

Первым шагом в процессе преобразования является переименование существующих файлов .js и .jsx в .ts и .tsx соответственно. Это говорит Gatsby, что эти файлы теперь написаны на TypeScript.

Шаг 3: Установите зависимости

Далее нам нужно установить необходимые TypeScript зависимости. В каталоге вашего проекта выполните следующую команду:

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

Шаг 4: Создайте tsconfig.json

Файл tsconfig.json необходим для настройки TypeScript в вашем проекте. Вы можете сгенерировать его с помощью компилятора TypeScript, выполнив:

npx tsc --init

В качестве альтернативы вы можете использовать файл tsconfig.json из официального репозитория Gatsby для минимального запуска TypeScript:

// tsconfig.json
// Replace your existing tsconfig.json with the one from the repository

Вы можете изменить некоторые свойства tsconfig.json, чтобы отразить настройки/конфигурации вашего проекта.

Шаг 5: Переименуйте файлы Gatsby

Переименуйте эти имена файлов Gatsby, чтобы они соответствовали новым расширениям файлов. Соответственно переименуйте следующие файлы:

gatsby-node.js в gatsby-node.ts
gatsby-config.js в gatsby-config.ts
gatsby-browser.js в gatsby-browser.tsx
gatsby-ssr.js в gatsby-ssr.tsx

Шаг 6: Замените require.resolve на path.resolve

TypeScript не поддерживает require.resolve, поэтому вам нужно будет заменить эти экземпляры вызовами path.resolve. Вот пример того, как это сделать в файле gatsby-node.ts:

import path from "path";

const template = path.resolve(`./src/templates/template.tsx`);

Обратите внимание на расширение файла в ./src/templates/template.tsx. Вам нужно будет изменить все расширения .js и .jsx в gatsby.node на .tsx, иначе разработка Gatsby выдаст ошибку.

Шаг 7: Горячая перезагрузка

Имейте в виду, что при изменении siteMetadata в gatsby-config горячая перезагрузка не произойдет во время разработки. В этом случае потребуется перезапуск сервера разработки.

Шаг 8: Генерация типов GraphQL

Чтобы обеспечить безопасность типов для ваших результатов GraphQL и автозаполнение в вашей среде IDE, вы можете использовать функцию Gatsby GraphQL Typegen. Установите для параметра graphqlTypegen значение true в файле gatsby-config.ts:

// gatsby-config.ts
module.exports = {
  graphqlTypegen: true,
};

Убедитесь, что ваш tsconfig.json включает «include»: [»./src/**/*»].

Шаг 9: Работа с запросами GraphQL

При использовании TypeScript с запросами GraphQL убедитесь, что у вашего запроса есть имя:

export const query = graphql`
  query blogsPage {
    # ... your query here ...
  }
`;

Чтобы получить типы запросов GraphQL, вам нужно будет перезапустить сервер разработки, чтобы Gatsby забрал его.

Теперь вы можете получить доступ к типу запроса, используя глобальное пространство имен Queries:

import { PageProps } from "gatsby"

const Blogs = ({ data }: PageProps<Queries.blogsPageQuery>) => {
  // ...
};

Шаг 10. Работа с типами только для чтения

При использовании данных из запросов GraphQL в вашем состоянии вы можете столкнуться с типами только для чтения, которые не допускают изменения. Чтобы решить эту проблему, явно приведите данные к нужному типу, например:

import { PageProps } from "gatsby"

const Blogs = ({ data }: PageProps<Queries.blogsPageQuery>) => {

  const [blogs, setBlogs] = useState<Queries.ContentfulBlog[]>(data.allContentfulBlog.nodes as Queries.ContentfulBlog[]);
  .
  .
  .
  setBlogs(data.allContentfulBlog.nodes as Queries.ContentfulBlog[]);
  .
  .
  .

}

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

TypeScript может жаловаться на потенциально неопределенные значения в вашем коде. Использование необязательной цепочки .? справлятся с такими случаями изящно. Если вы конвертируете большую существующую кодовую базу в TypeScript, подумайте о том, чтобы сделать это управляемыми шагами. Сосредоточьтесь на критических компонентах и постепенно переносите другие части проекта.

И вот как преобразовать сайт Gatsby в использование Typescript.

Источник:

#React #TypeScript #GraphQL

Войти на сайт