Из этого туториала Вы узнаете, как интегрировать TypeScript в ваши приложения Nextjs. Для этого нам необходимо установить необходимые библиотеки машинописного текста для нашего проекта Nextjs.
Если вы начинаете новый проект и начинаете с Typescript, вы также можете создать новое приложение nextjs за секунды с помощью
npx create-next-app your-app-name
Установите необходимые библиотеки для поддержки Typescript
// with Npm npm install -D typescript @types/react @types/node // with Yarn yarn add — dev typescript @types/react @types/node
Внутри корневой папки для использования TypeScript необходимо добавить tsconfig.json.
tsconfig.js
Как вы можете видеть в массиве include, мы определили некоторые окончания файлов.
"next-env.d.ts", "**/*.ts", "**/*.tsx"
Наша конфигурация машинописного текста будет работать с этими файлами. Теперь мы можем начать использовать машинописный текст в нашем проекте!
использование
Если вы создали новое приложение nextjs с помощью create-next-app, вы можете напрямую изменить имена файлов, оканчивающиеся на .tsx, и начать использовать свои собственные типы.
Давайте создадим компонент Layout для нашего приложения nextjs с помощью машинописного текста.
components / Layout.tsx
Мы определили наш объект типа Props и добавили типы дочерние элементы и заголовок.
При вызове компонента Layout мы передаем свойства в качестве аргумента, и мы использовали его с объектом типа Props.
({ children, title = 'This is the default title' }: Props)
Теперь наш компонент nextjs готов к использованию с Typescript.
index.tsx
Поздравляю!
Интеграция Next.js + Typescript завершена! Вы можете создавать свои собственные объекты Type и использовать их в своих компонентах по своему усмотрению!
Спасибо, что дочитали до этого места.
Следуйте за мной на Medium или Github, если вы заинтересованы в более подробных и информативных статьях, подобных этой, в будущем. 😀
Мелих
