Автор выбралTech Education Fund для получения пожертвования в рамках программыWrite for DOnations.
Вступление
TypeScript значительно улучшил то, как разработчикиJavaScript структурируют и пишут код для приложений, особенно веб-приложений. Определенный как расширенный набор JavaScript, TypeScript ведет себя идентично JavaScript, но с дополнительными функциями, разработанными, чтобы помочь разработчикам создавать более крупные и более сложные программы с меньшим количеством ошибок или без них. TypeScript все больше набирает популярность; принят крупными компаниями, такими как Google, для веб-фреймворка Angular. Внутренняя структураNest.js также была создана с использованием TypeScript.
Одним из способов повышения производительности труда разработчика является возможность максимально быстро внедрять новые функции, не беспокоясь о том, чтобы сломать существующее приложение в работе. Для этого написание статически типизированного кода - это стиль, принятый многими опытными разработчиками. Статически типизированные языки программирования, такие как TypeScript, обеспечивают связь для каждой переменной с типом данных; такие как строка, целое число, логическое значение и т. д. Одним из основных преимуществ использования языка программирования со статической типизацией является то, что проверка типов завершается во время компиляции, поэтому разработчики могут увидеть ошибки в своем коде на самой ранней стадии.
React - это библиотека JavaScript с открытым исходным кодом, которую разработчики используют для создания высокопроизводительных пользовательских интерфейсов для масштабируемых веб-приложений. Высокая производительность и динамические пользовательские интерфейсы, созданные с помощью React для одностраничных приложений, делают его популярным среди разработчиков.
В этом руководстве вы создадите приложение для управления списком клиентов с отдельным интерфейсом REST API и внешним интерфейсом, созданным с использованием React и TypeScript. Вы создадите бэкэнд, используя поддельный REST API с именемjson-server. Вы будете использовать его для быстрой настройки бэкэнда CRUD (создание, чтение, обновление и удаление). Следовательно, вы можете сосредоточиться на обработке внешней логики приложения, используя React и TypeScript.
Предпосылки
Для завершения этого урока вам понадобится:
-
Локальная установкаNode.js (минимум v6) и
npm(минимум v5.2). Node.js is a JavaScript run-time environment that allows you to run your code outside of the browser. Он поставляется с предустановленным менеджером пакетов под названиемnpm, который позволяет вам устанавливать и обновлять пакеты. Чтобы установить их в macOS или Ubuntu 18.04, выполните действия, описанные вHow to Install Node.js and Create a Local Development Environment on macOS или в разделе «Установка с помощью PPA»How To Install Node.js on Ubuntu 18.04. -
Локальная установка Yarn; follow these steps, чтобы установить Yarn в вашей операционной системе.
-
Базовое понимание TypeScript иJavaScript.
-
Установлен текстовый редактор; напримерVisual Studio Code,Atom илиSublime Text.
[[step-1 -—- install-typescript-and-Creating-the-react-application]] == Шаг 1. Установка TypeScript и создание приложения React
На этом этапе вы глобально установите пакет TypeScript на свой компьютер с помощью диспетчера пакетов узлов (npm). После этого вы также установите React и его зависимости и убедитесь, что ваше приложение React работает, запустив сервер разработки.
Для начала откройте терминал и выполните следующую команду для установки TypeScript:
npm install -g typescriptПосле завершения процесса установки выполните следующую команду, чтобы проверить установку TypeScript:
tsc -vВы увидите текущую версию, установленную на вашем компьютере:
OutputVersion 3.4.5Затем вы установите приложение React, используя инструментcreate-react-app, чтобы настроить приложение с помощью одной команды. Вы воспользуетесь командойnpx, которая представляет собой средство запуска пакетов, которое поставляется сnpm 5.2+. Инструментcreate-react-app имеет встроенную поддержку для работы с TypeScript без какой-либо дополнительной настройки. Выполните следующую команду, чтобы создать и установить новое приложение React с именемtypescript-react-app:
npx create-react-app typescript-react-app --typescriptПредыдущая команда создаст новое приложение React с именемtypescript-react-app. Флаг--typescript установит тип файла по умолчанию для компонентов React на.tsx.
Прежде чем завершить этот раздел, приложению потребуется перейти с одного порта на другой. Для этого вам необходимо установить библиотеку маршрутизации для вашего приложения React с именемReact Router и соответствующие определения TypeScript. Вы будете использоватьyarn для установки библиотеки и других пакетов для этого проекта. Это потому, чтоyarn работает быстрее, особенно для установки зависимостей для приложения React. Перейдите во вновь созданную папку проекта и затем установите React Router с помощью следующей команды:
cd typescript-react-app
yarn add react-router-domТеперь у вас есть пакет React Router, который обеспечит функциональность маршрутизации в вашем проекте. Затем выполните следующую команду, чтобы установить определения TypeScript для React Router:
yarn add @types/react-router-domТеперь вы установитеaxios, который является обещанным HTTP-клиентом для браузеров, чтобы помочь в процессе выполнения HTTP-запросов от различных компонентов, которые вы создадите в приложении:
yarn add axiosПосле завершения процесса установки запустите сервер разработки с помощью:
yarn startВаше приложение будет работать наhttp://localhost:3000.
Вы успешно установили TypeScript, создали новое приложение React и установили React Router, чтобы помочь с переходом с одной страницы приложения на другую. В следующем разделе вы настроите внутренний сервер для приложения.
[[step-2 -—- created-a-json-server]] == Шаг 2. Создание сервера JSON
На этом шаге вы создадите фиктивный сервер, с которым ваше приложение React может быстро соединиться, а также будете использовать его ресурсы. Важно отметить, что этот внутренний сервис не подходит для применения в производстве. Вы можете использовать Nest.js, Express или любую другую серверную технологию для создания RESTful API в производстве. json-server - полезный инструмент, когда вам нужно создать прототип и смоделировать внутренний сервер.
Вы можете использоватьnpm илиyarn для установкиjson-server на свой компьютер. Это сделает его доступным из любого каталога вашего проекта, когда вам может понадобиться его использовать. Откройте новое окно терминала и запустите эту команду, чтобы установитьjson-server, пока вы все еще находитесь в каталоге проекта:
yarn global add json-serverЗатем вы создадите файл JSON, который будет содержать данные, которые будут представлены API REST. Для объектов, указанных в этом файле (который вы создадите), конечная точка CRUD будет сгенерирована автоматически. Для начала создайте новую папку с именемserver и перейдите в нее:
mkdir server
cd serverТеперь используйтеnano, чтобы создать и открыть новый файл с именемdb.json:
nano db.jsonДобавьте следующее содержимое в файл:
/server/db.json
{
"customers": [
{
"id": 1,
"first_name": "Customer_1",
"last_name": "Customer_11",
"email": "[email protected]",
"phone": "00000000000",
"address": "Customer_1 Address",
"description": "Customer_1 description"
},
{
"id": 2,
"first_name": "Customer_2",
"last_name": "Customer_2",
"email": "[email protected]",
"phone": "00000000000",
"address": "Customer_2 Adress",
"description": "Customer_2 Description"
}
]
}Структура JSON состоит из объекта customer, которому назначены два набора данных. Каждый заказчик состоит из семи свойств:id,description,first_name,last_name,email,phone иaddress.
Сохраните и выйдите из файла.
По умолчаниюjson-server работает на порту3000 - это тот же порт, на котором работает ваше приложение React. Чтобы избежать конфликта, вы можете изменить порт по умолчанию дляjson-server. Для этого перейдите в корневой каталог приложения:
cd ~/typescript-react-appОткройте приложение в предпочитаемом текстовом редакторе и создайте новый файл с именемjson-server.json:
nano json-server.jsonТеперь вставьте следующее, чтобы обновить номер порта:
/json-server.json
{
"port": 5000
}Это будет действовать как файл конфигурации дляjson-server, и он будет гарантировать, что сервер всегда будет работать на указанном в нем порту.
Сохраните и выйдите из файла.
Чтобы запустить сервер, используйте следующую команду:
json-server --watch server/db.jsonЭто запуститjson-server на порту5000. Если вы перейдете кhttp://localhost:5000/customers в своем браузере, вы увидите сервер, на котором отображается ваш список клиентов.
Чтобы упростить процесс запускаjson-server, вы можете обновитьpackage.json новым свойством с именемserver для объектаscripts, как показано здесь:
/package.json
{
...
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"server": "json-server --watch server/db.json"
},
...
}Сохраните и выйдите из файла.
Теперь, когда вы захотите запуститьjson-server, все, что вам нужно сделать, это запуститьyarn server с терминала.
Вы создали простой REST API, который вы будете использовать в качестве внутреннего сервера для этого приложения. Вы также создали объект JSON клиента, который будет использоваться в качестве данных по умолчанию для REST API. Наконец, вы настроили альтернативный порт для внутреннего сервера, работающего наjson-server. Далее вы создадите компоненты многократного использования для вашего приложения.
[[step-3 -—- created-reusable-components]] == Шаг 3 - Создание повторно используемых компонентов
В этом разделе вы создадите необходимые компоненты React для приложения. Это будет включать компоненты для создания, отображения и редактирования сведений о конкретном клиенте в базе данных соответственно. Вы также создадите некоторые из интерфейсов TypeScript для своего приложения.
Для начала вернитесь к терминалу, на котором запущено приложение React, и остановите сервер разработки, нажавCTRL + C. Затем перейдите в папку./src/:
cd ./src/Затем создайте внутри нее новую папку с именемcomponents и переместите в новую папку:
mkdir components
cd componentsВо вновь созданной папке создайте папкуcustomer, а затем перейдите в нее:
mkdir customer
cd customerТеперь создайте два новых файла с именамиCreate.tsx иEdit.tsx:
touch Create.tsx Edit.tsxЭти файлы представляют собой повторно используемые компоненты React, которые будут визуализировать формы и содержать всю бизнес-логику для создания и редактирования сведений о клиенте соответственно.
Откройте файлCreate.tsx в текстовом редакторе и добавьте следующий код:
/src/components/customer/Create.tsx
import * as React from 'react';
import axios from 'axios';
import { RouteComponentProps, withRouter } from 'react-router-dom';
export interface IValues {
first_name: string,
last_name: string,
email: string,
phone: string,
address: string,
description: string,
}
export interface IFormState {
[key: string]: any;
values: IValues[];
submitSuccess: boolean;
loading: boolean;
}Здесь вы импортировалиReact,axios и другие необходимые компоненты, необходимые для маршрутизации из пакета React Router. После этого вы создали два новых интерфейса с именамиIValues иIFormState. TypeScript interfaces помогают определить конкретный тип значений, которые должны быть переданы объекту, и обеспечить согласованность во всем приложении. Это гарантирует, что ошибки будут менее вероятны в вашей программе.
Затем вы создадите компонентCreate, который расширяетReact.Component. Добавьте следующий код в файлCreate.tsx сразу после интерфейсаIFormState:
/src/components/customer/Create.tsx
...
class Create extends React.Component {
constructor(props: RouteComponentProps) {
super(props);
this.state = {
first_name: '',
last_name: '',
email: '',
phone: '',
address: '',
description: '',
values: [],
loading: false,
submitSuccess: false,
}
}
}
export default withRouter(Create) Здесь вы определили компонент React в Typescript. В этом случае компонент классаCreate принимаетprops (сокращение от «свойства») типаRouteComponentProps и использует состояние типаIFormState. Затем внутри конструктора вы инициализировали объектstate и определили все переменные, которые будут представлять отображаемые значения для клиента.
Затем добавьте эти методы в компонент классаCreate сразу после конструктора. Вы будете использовать эти методы для обработки клиентских форм и обработки всех изменений в полях ввода:
/src/components/customer/Create.tsx
...
values: [],
loading: false,
submitSuccess: false,
}
}
private processFormSubmission = (e: React.FormEvent): void => {
e.preventDefault();
this.setState({ loading: true });
const formData = {
first_name: this.state.first_name,
last_name: this.state.last_name,
email: this.state.email,
phone: this.state.phone,
address: this.state.address,
description: this.state.description,
}
this.setState({ submitSuccess: true, values: [...this.state.values, formData], loading: false });
axios.post(`http://localhost:5000/customers`, formData).then(data => [
setTimeout(() => {
this.props.history.push('/');
}, 1500)
]);
}
private handleInputChanges = (e: React.FormEvent) => {
e.preventDefault();
this.setState({
[e.currentTarget.name]: e.currentTarget.value,
})
}
...
export default withRouter(Create)
... МетодprocessFormSubmission() получает сведения о клиенте из состояния приложения и отправляет их в базу данных, используяaxios. handleInputChanges() используетReact.FormEvent для получения значений всех полей ввода и вызываетthis.setState() для обновления состояния приложения.
Затем добавьте методrender() в компонент классаCreate сразу после методаhandleInputchanges(). Этот методrender() отобразит форму для создания нового клиента в приложении:
/src/components/customer/Create.tsx
...
public render() {
const { submitSuccess, loading } = this.state;
return (
Create Post
{!submitSuccess && (
Fill the form below to create a new post
)}
{submitSuccess && (
The form was successfully submitted!
)}
)
}
...Здесь вы создали форму с полями ввода для хранения значенийfirst_name,last_name,email,phone,address иdescription) s клиента. У каждого поля ввода есть методhandleInputChanges(), который запускается при каждом нажатии клавиши, обновляя Reactstate значением, полученным из поля ввода. Кроме того, в зависимости от состояния приложения логическая переменная с именемsubmitSuccess будет управлять сообщением, которое приложение будет отображать до и после создания нового клиента.
Вы можете увидеть полный код этого файла в этомGitHub repository.
Сохраните и выйдите изCreate.tsx.
Теперь, когда вы добавили соответствующую логику в файл компонентаCreate для приложения, вы перейдете к добавлению содержимого для файла компонентаEdit.
Откройте файлEdit.tsx в папкеcustomer и начните с добавления следующего содержимого для импортаReact,axios, а также определите интерфейсы TypeScript:
/src/components/customer/Edit.tsx
import * as React from 'react';
import { RouteComponentProps, withRouter } from 'react-router-dom';
import axios from 'axios';
export interface IValues {
[key: string]: any;
}
export interface IFormState {
id: number,
customer: any;
values: IValues[];
submitSuccess: boolean;
loading: boolean;
}Как и в случае с компонентомCreate, вы импортируете необходимые модули и создаете интерфейсыIValues иIFormState соответственно. ИнтерфейсIValues определяет тип данных для значений полей ввода, в то время как вы будете использоватьIFormState для объявления ожидаемого типа для объекта состояния приложения.
Затем создайте компонент классаEditCustomer сразу после интерфейсного блокаIFormState, как показано здесь:
/src/components/customer/Edit.tsx
...
class EditCustomer extends React.Component, IFormState> {
constructor(props: RouteComponentProps) {
super(props);
this.state = {
id: this.props.match.params.id,
customer: {},
values: [],
loading: false,
submitSuccess: false,
}
}
}
export default withRouter(EditCustomer) Этот компонент принимаетRouteComponentProps<any> и интерфейсIFormState в качестве параметра. Вы используете добавление<any> кRouteComponentProps, потому что всякий раз, когда React Router анализирует параметры пути, он не выполняет никакого преобразования типа, чтобы определить, является ли тип данныхnumber илиstringс. Поскольку вы ожидаете параметр дляuniqueId клиента, безопаснее использоватьany.
Теперь добавьте следующие методы в компоненте:
/src/components/customer/Edit.tsx
...
public componentDidMount(): void {
axios.get(`http://localhost:5000/customers/${this.state.id}`).then(data => {
this.setState({ customer: data.data });
})
}
private processFormSubmission = async (e: React.FormEvent): Promise => {
e.preventDefault();
this.setState({ loading: true });
axios.patch(`http://localhost:5000/customers/${this.state.id}`, this.state.values).then(data => {
this.setState({ submitSuccess: true, loading: false })
setTimeout(() => {
this.props.history.push('/');
}, 1500)
})
}
private setValues = (values: IValues) => {
this.setState({ values: { ...this.state.values, ...values } });
}
private handleInputChanges = (e: React.FormEvent) => {
e.preventDefault();
this.setValues({ [e.currentTarget.id]: e.currentTarget.value })
}
...
}
export default withRouter(EditCustomer) Сначала вы добавляете методcomponentDidMount(), который представляет собой метод жизненного цикла, который вызывается при создании компонента. Метод принимаетid, полученные из параметра маршрута, чтобы идентифицировать конкретного клиента в качестве параметра, использует его для извлечения их данных из базы данных, а затем заполняет ими форму. Кроме того, вы добавляете методы для обработки отправки формы и обработки изменений, внесенных в значения полей ввода.
Наконец, добавьте методrender() для компонентаEdit:
/src/components/customer/Edit.tsx
...
public render() {
const { submitSuccess, loading } = this.state;
return (
{this.state.customer &&
< h1 > Customer List Management App
Built with React.js and TypeScript
Edit Customer
{submitSuccess && (
Customer's details has been edited successfully
)}
}
)
}
...Здесь вы создали форму для редактирования сведений о конкретном клиенте, а затем заполнили поля ввода в этой форме сведениями о клиенте, полученными из состояния вашего приложения. Подобно компонентуCreate, изменения, внесенные во все поля ввода, будут обрабатываться методомhandleInputChanges().
Вы можете увидеть полный код этого файла в этомGitHub repository.
Сохраните и выйдите изEdit.tsx.
Чтобы просмотреть полный список клиентов, созданных в приложении, создайте новый компонент в папке./src/components и назовите егоHome.tsx:
cd ./src/components
nano Home.tsxДобавьте следующий контент:
/src/components/Home.tsx
import * as React from 'react';
import { Link, RouteComponentProps } from 'react-router-dom';
import axios from 'axios';
interface IState {
customers: any[];
}
export default class Home extends React.Component {
constructor(props: RouteComponentProps) {
super(props);
this.state = { customers: [] }
}
public componentDidMount(): void {
axios.get(`http://localhost:5000/customers`).then(data => {
this.setState({ customers: data.data })
})
}
public deleteCustomer(id: number) {
axios.delete(`http://localhost:5000/customers/${id}`).then(data => {
const index = this.state.customers.findIndex(customer => customer.id === id);
this.state.customers.splice(index, 1);
this.props.history.push('/');
})
}
} Здесь вы импортировалиReact,axios и другие необходимые компоненты из React Router. Вы создали два новых метода в компонентеHome:
-
componentDidMount(): приложение вызывает этот метод сразу после монтирования компонента. В его обязанности входит получение списка клиентов и обновление домашней страницы вместе с ним. -
deleteCustomer(): этот метод приметidв качестве параметра и удалит сведения о клиенте, идентифицированном этимidиз базы данных.
Теперь добавьте методrender() для отображения таблицы, содержащей список клиентов для компонентаHome:
/src/components/Home.tsx
...
public render() {
const customers = this.state.customers;
return (
{customers.length === 0 && (
No customer found at the moment
)}
Firstname
Lastname
Email
Phone
Address
Description
Actions
{customers && customers.map(customer =>
{customer.first_name}
{customer.last_name}
{customer.email}
{customer.phone}
{customer.address}
{customer.description}
Edit Customer
)}
)
}
...В этом блоке кода вы извлекаете списки клиентов из состояния приложения в виде массива, перебираете его и отображаете в HTML-таблице. Вы также добавляете параметрcustomer.id, который метод использует для идентификации и удаления сведений о конкретном клиенте из списка.
Сохраните и выйдите изHome.tsx.
Вы применили принцип статической типизации для всех компонентов, созданных с помощью этого приложения, определив типы для компонентов и параметров с помощью интерфейсов. Это один из лучших подходов к использованию TypeScript для приложения React.
С этим вы завершили создание всех необходимых повторно используемых компонентов для приложения. Теперь вы можете обновить компонент приложения со ссылками на все компоненты, которые вы создали до сих пор.
[[шаг-4 -—- настройка-маршрутизация-и-обновление-точки-входа-приложения]] == Шаг 4. Настройка маршрутизации и обновление точки входа приложения
На этом шаге вы импортируете необходимые компоненты из пакета React Router и настроите компонентApp для визуализации различных компонентов в зависимости от загруженного маршрута. Это позволит вам перемещаться по разным страницам приложения. Как только пользователь посещает маршрут, например/create, React Router будет использовать указанный путь для рендеринга содержимого и логики в соответствующем компоненте, определенном для обработки такого маршрута.
Перейдите к./src/App.tsx:
nano App.tsxЗатем замените его содержимое следующим:
/src/App.tsx
import * as React from 'react';
import './App.css';
import { Switch, Route, withRouter, RouteComponentProps, Link } from 'react-router-dom';
import Home from './components/Home';
import Create from './components/customer/Create';
import EditCustomer from './components/customer/Edit';
class App extends React.Component> {
public render() {
return (
);
}
}
export default withRouter(App); Вы импортировали все необходимые компоненты из пакета React Router, а также импортировали повторно используемые компоненты для создания, редактирования и просмотра сведений о клиентах.
Сохраните и выйдите изApp.tsx.
Файл./src/index.tsx является точкой входа для этого приложения и отображает приложение. Откройте этот файл и импортируйте в него React Router, а затем оберните компонентApp внутриBrowserRouter:
/src/index.tsx
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import { BrowserRouter } from 'react-router-dom';
import * as serviceWorker from './serviceWorker';
ReactDOM.render(
, document.getElementById('root')
);
serviceWorker.unregister();React Router использует компонентBrowserRouter, чтобы ваше приложение знало о навигации, такой как история и текущий путь.
Закончив редактированиеIndex.tsx, сохраните и выйдите.
Наконец, вы будете использовать Bootstrap, чтобы добавить стиль вашему приложению. Bootstrap - это популярный фреймворк HTML, CSS и JavaScript для разработки адаптивных, ориентированных на мобильные устройства проектов в Интернете. Это позволяет разработчикам создавать привлекательный пользовательский интерфейс без необходимости писать слишком много CSS. Он поставляется с гибкой сеточной системой, которая придает веб-странице законченный вид, который работает на всех устройствах.
Чтобы включить Bootstrap и стиль для вашего приложения, замените содержимое./src/App.css следующим:
/src/App.css
@import 'https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css';
.form-wrapper {
width: 500px;
margin: 0 auto;
}
.App {
text-align: center;
margin-top: 30px;
}
nav {
width: 300px;
margin: 0 auto;
background: #282c34;
height: 70px;
line-height: 70px;
}
nav ul li {
display: inline;
list-style-type: none;
text-align: center;
padding: 30px;
}
nav ul li a {
margin: 50px 0;
font-weight: bold;
color: white;
text-decoration: none;
}
nav ul li a:hover {
color: white;
text-decoration: none;
}
table {
margin-top: 50px;
}
.App-link {
color: #61dafb;
}
@keyframes App-logo-spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}Вы использовали Bootstrap, чтобы улучшить внешний вид приложения, предоставив ему макет, стили и цвет по умолчанию. Вы также добавили несколько пользовательских стилей, особенно в панель навигации.
Сохраните и выйдите изApp.css.
В этом разделе вы настроили React Router для рендеринга соответствующего компонента в зависимости от маршрута, который посетил пользователь, а также добавили некоторые стили, чтобы сделать приложение более привлекательным для пользователей. Далее вы протестируете всю функциональность, реализованную для приложения.
[[step-5 -—- running-your-application]] == Шаг 5. Запуск вашего приложения
Теперь, когда вы настроили интерфейс этого приложения с помощью React и TypeScript, создав несколько повторно используемых компонентов, а также построили REST API сjson-server, вы можете запустить свое приложение.
Вернитесь в корневую папку проекта:
cd ~/typescript-react-appЗатем запустите следующую команду, чтобы запустить ваше приложение:
yarn start[.note] #Note: Убедитесь, что ваш сервер все еще работает в другом окне терминала. В противном случае начните с:yarn server.
#
Перейдите кhttp://localhost:3000, чтобы просмотреть приложение в браузере. Затем нажмите кнопкуCreate и введите данные клиента.
После ввода соответствующих значений в поля ввода нажмите кнопкуCreate Customer, чтобы отправить форму. Приложение перенаправит вас обратно на домашнюю страницу, как только вы создадите нового клиента.
Нажмите кнопкуEdit Customer для любой из строк, и вы будете перенаправлены на страницу, на которой размещены функции редактирования для соответствующего клиента в этой строке.
Отредактируйте сведения о клиенте, а затем нажмитеEdit Customer, чтобы обновить данные о клиенте.
Вы запустили свое приложение, чтобы убедиться, что все компоненты работают. Используя разные страницы вашего приложения, вы создали и отредактировали запись клиента.
Заключение
В этом руководстве вы создали приложение для управления списком клиентов с помощьюReact иTypeScript. Процесс в этом руководстве отличается от использования JavaScript в качестве традиционного способа структурирования и создания приложений с помощью React. Вы воспользовались преимуществами использования TypeScript для завершения этого ориентированного на интерфейс урока.
Чтобы продолжить разработку этого проекта, вы можете переместить свой фиктивный внутренний сервер на готовую к производству серверную технологию, такую какExpress илиNest.js. Кроме того, вы можете расширить то, что вы создали в этом руководстве, добавив больше функций, таких как аутентификация и авторизация, с помощью различных инструментов, таких как библиотека аутентификацииPassport.js.
Вы можете найти полный исходный код проектаon GitHub.