В этом уроке мы собираемся создать шаблонный код, который вы сможете использовать, когда захотите настроить интерфейс React с серверной частью Express при использовании TypeScript. В идеале вы должны быть немного знакомы с React и Express, прежде чем следовать этому руководству.
Если вы не знаете, что такое TypeScript, рекомендую прочитать Руководство по TypeScript в Документации по TypeScript. Вам понадобится 30–45 минут, чтобы пройти его, но после прочтения вы получите отличное представление о силе TypeScript.
Чтобы получить максимальную отдачу от этого руководства, я настоятельно рекомендую вам использовать Visual Studio Code в качестве вашей IDE. Чтобы воспользоваться всеми преимуществами TypeScript, необходимо использовать Visual Studio Code.
Теперь давайте начнем с нашего приложения.
Во-первых, мы настроим каталог нашего проекта. Откройте свой терминал и перейдите в каталог, в котором вы хотите настроить свой проект. Как только вы окажетесь в этом каталоге, выполните приведенные ниже команды (эти команды работают на машинах Unix и Windows).
mkdir typescript-react-express-app cd typescript-react-express-app
Теперь, когда у нас настроен каталог нашего проекта, давайте откроем его в Visual Studio Code с помощью приведенной ниже команды.
code .
Теперь нам нужно настроить наш файл package.json и установить наши зависимости. Откройте терминал в Visual Studio Code и выполните приведенную ниже команду.
npm init -y
Это даст вам файл package.json, который должен выглядеть следующим образом. Сейчас в этом нет ничего особенного, но позже мы добавим несколько скриптов после того, как настроим больше нашего приложения.
Теперь пришло время установить зависимости для нашего проекта. Это все пакеты npm, которые позволяют запустить наше приложение.
npm install react react-dom express
Далее мы установим наши зависимости для разработки. Нам нужно установить довольно много, поэтому мы разделим наши команды установки на несколько разных команд. Мы будем использовать флаг save-dev, чтобы сообщить узлу, что мы хотим установить их как зависимости для разработки. Давайте сначала установим наши зависимости, связанные с TypeScript.
npm install --save-dev typescript @types/react @types/react-dom @types/node @types/express ts-loader
Далее мы установим nodemon.
npm install --save-dev nodemon
Наконец, мы можем установить Webpack и интерфейс командной строки Webpack.
npm install --save-dev webpack webpack-cli
Теперь, когда у нас установлены зависимости, мы можем настроить файл tsconfig.json. Это файл конфигурации, который позволит нам указать поведение TypeScript в нашем приложении. Чтобы создать этот файл, все, что нам нужно сделать, это запустить приведенную ниже команду в нашем терминале.
tsc --init
Это должно дать вам файл с именем tsconfig.json в корневом каталоге с приведенным ниже содержимым.
Самое замечательное в этой команде то, что она предоставила нам наш файл tsconfig.json с описаниями каждой спецификации в файле. Если вам нужны дополнительные разъяснения по любому из этих параметров, я бы порекомендовал вам обратиться к документации по TypeScript. Как и в случае с файлом package.json, мы вернемся к нему позже, чтобы внести еще некоторые изменения.
Теперь давайте настроим наш сервер. Запустите приведенные ниже команды в терминале Visual Studio Code.
mkdir src touch src/index.ts
Теперь приступим к работе на нашем сервере. Откройте файл index.ts в папке src и добавьте код из списка ниже. С помощью этого кода мы настраиваем сервер, который будет работать на порту 3000 на вашем локальном компьютере. После того, как мы сделаем еще несколько обновлений, вы сможете перейти на http://localhost:3000 и увидеть текст Hello World.
Вы можете заметить забавный код в строке 5. «:Request», «:Response», «:NextFunction» и «:void» — это объявления типов. Первые три — это типы для наших параметров, мы импортировали их в строке 1. Объявление типа «: void» говорит о том, что наша функция не имеет возвращаемого значения.
Теперь мы можем обновить наши файлы tsconfig.json и package.json, чтобы убедиться, что наш серверный код компилируется правильно, а стартовые сценарии, которые мы пишем, будут ссылаться на правильные файлы.
Откройте файл tsconfig.json и обновите значение ключа «outDir», чтобы оно равнялось «./dist». В этом обновлении мы указываем, где мы хотим разместить наш скомпилированный серверный код. Мы продолжим и отправим его в папку с именем dist. Затем мы добавим ключ «include» под объектом «compilerOptions» и установим значение, равное [«src/»]. Теперь ваш файл tsconfig.json должен выглядеть так, как показано ниже.
Теперь мы можем настроить некоторые скрипты в нашем файле package.json. Откройте файл package.json, удалите тестовый скрипт и добавьте приведенные ниже скрипты.
"build:dev": "tsc --watch --preserveWatchOutput", "start:dev": "nodemon dist/index.js"
Первый скрипт скомпилирует код нашего сервера в JavaScript, зарегистрирует все ошибки в нашем коде, а затем просмотрит наши файлы в папке src. Теперь каждый раз, когда мы делаем обновление файла в этой папке, код будет снова компилироваться и отправляться в каталог dist. Это здорово, так что нам не нужно запускать команду каждый раз, когда мы обновляем файл в нашей папке src.
Второй скрипт будет запускать файл index.js в нашей папке dist, а затем перезапускаться каждый раз при обновлении файла в каталоге dist.
Теперь откройте два терминала в Visual Studio Code и запустите по одной из приведенных ниже команд в каждом терминале.
npm run build:dev npm run start:dev
Теперь вы можете перейти по адресу http://localhost:3000 в своем браузере и увидеть результат работы вашего замечательного приложения.
Хорошо, может быть, это не так уж и здорово, но похлопайте себя по спине. Вы только что успешно настроили сервер Express с помощью TypeScript. Кроме того, если вам интересно, почему текст на изображении выше такой большой, это потому, что мой браузер увеличен.
Теперь, когда наш сервер запущен и работает, давайте поработаем над интерфейсом нашего приложения. Во-первых, идите вперед и убейте два терминала, которые у вас запущены. Теперь мы можем создать наш общедоступный каталог, где мы будем хранить наши файлы HTML и CSS. Идите вперед и выполните приведенные ниже команды в терминале.
mkdir public touch public/index.html public/style.css
Откройте файл index.html и добавьте приведенный ниже код.
Вам может быть интересно узнать об этом файле bundle.js, на который ссылались в строке 10. Это файл, который будет создан Webpack, когда он объединит наш код в один файл JavaScript (отсюда и название bundle).
Теперь мы можем настроить наш клиентский каталог, где мы будем хранить весь наш код React. Для начала вы можете запустить приведенные ниже команды в своем терминале.
mkdir client touch client/index.tsx client/App.tsx
Сначала мы настроим базовый компонент в App.tsx.
Вы заметите, что в строке 3 после объявления функции есть еще какой-то забавный код. «: React.FC» — это еще одно объявление типа. Здесь мы сообщаем компилятору, что эта функция возвращает функциональный компонент React.
Теперь давайте настроим наш файл index.tsx.
Еще несколько шагов, и наше приложение снова заработает. Нам просто нужно создать наш файл webpack.config.js и внести обновления в файлы package.json, tsconfig.json и src/index.ts. Сначала давайте продолжим и создадим наш файл webpack.config.js.
touch webpack.config.js
Теперь продолжайте и добавьте приведенный ниже код в файл.
Здесь мы сообщаем Webpack, что нужно начать с client/index.tsx и связать наш интерфейсный код в файл с именем bundle.js, который будет находиться в общем каталоге, чтобы на него можно было легко ссылаться в нашем HTML-файле.
Теперь мы можем обновить наш стартовый скрипт в файле package.json. Откройте файл package.json и обновите значение «start: dev», чтобы оно соответствовало приведенной ниже команде.
"start:dev": "nodemon dist/index.js & webpack -w"
Теперь, когда мы запускаем наше приложение, Webpack будет пересобираться при внесении любых изменений в файлы в нашем клиентском каталоге.
Далее нам нужно внести одно изменение в наш файл tsconfig.json.
Наконец, нам просто нужно обновить наш файл src/index.ts, чтобы отправлять данные из нашей общей папки.
Теперь, если вы запустите скрипты build:dev и start:dev в своем терминале, вы должны увидеть следующее: http://localhost:3000/.
Способ пойти. Теперь у вас есть функциональный внешний интерфейс и сервер, которые вы создали на TypeScript. Теперь вы можете использовать этот шаблонный код для своего следующего веб-приложения. Вот ссылка на репозиторий с кодом, который мы только что написали, если вы просто хотите сделать форк и клонировать. Пожалуйста, дайте мне знать, если у вас возникнут какие-либо проблемы при навигации по этому руководству или если вы не согласны с моим подходом. Спасибо, что нашли время прочитать эту статью.
