Typescript react пример приложения

TypeScript и React с использованием create-react-app: пошаговое руководство по настройке вашего первого приложения

Из этого туториала вы узнаете, как быстро приступить к созданию приложений React с использованием TypeScript без необходимости какой-либо настройки с помощью create-react-app (CRA). Предположим, что на вашем компьютере уже установлены Node и NPM. Ваше приложение TypeScript/React будет работать сразу после установки без необходимости использовать CRA. Кроме того, вы узнаете, как создавать свои собственные компоненты и управлять props и state, используя TypeScript.

Установка с помощью create-react-app

create-react-app это инструмент командной строки, который позволяет разработчикам легко создавать новые приложения React с разумными настройками по умолчанию и нулевой конфигурацией.

npm install -g create-react-app

Примечание. Этот шаг теперь необязательный. TypeScript можно установить с помощью npx, который будет показан в следующем разделе.

Инициализируйте свое приложение React с помощью TypeScript

Вызовите команду create-react-app с дополнительной опцией TypeScript, чтобы сгенерировать приложение React с использованием TypeScript в качестве синтаксиса JS по умолчанию.

npx create-react-app my-app --typescript

npx — это команда, выпущенная с npm 5.2, которая позволяет вам выполнять команды CLI и исполняемые файлы, размещенные в локальном node_modules — это означает, что глобальные установки больше не требуются.

Если вы ранее использовали приложение create-react-app, это должно выглядеть очень знакомо. Дополнительной флаг —typescript говорит CRA использовать TypeScript в качестве синтаксиса по умолчанию и добавить соответствующую конфигурацию, чтобы он работал «из коробки».

Это создаст следующие файлы и структуру папок:

my-app/ ├─ .gitignore ├─ node_modules/ ├─ public/ ├─ src/ | — — index.tsx | — — registerServiceWorker.ts | — — logo.svg | — — App.tsx | — — App.test.tsx | — — App.css | — — index.css | — — assets/ ├─ package.json ├─ tsconfig.json ├─ tsconfig.test.json └─ tslint.json

Ниже описание каждой части:

• tsconfig.json объявляет параметры TypeScript. Он находится в корне проекта и указывает параметры компилятора и файлы для включения.
• tslint.json — это настройки линтера, которые будут использоваться TSLint.
• public — это папка статических ресурсов, которые будут доступны пользователям, такие как документ HTML и файл манифеста.
• src содержит код пользовательского приложения. Это включает в себя наши компоненты TypeScript и стили CSS. Традиционный файл index.js был заменен на index.tsx в качестве точки входа.

Изменения React под TypeScript

Чтобы использовать React с TypeScript, вы должны внести небольшие изменения в подходе создания стандартного приложения React.

Используйте .tsx файлы для JSX

В дополнение к новому расширению файлов .ts для TypeScript есть также новое расширение файла .tsx. Это расширение, которое вы должны использовать каждый раз, когда включаете синтаксис JSX в файл компонента React. TypeScript способен компилировать JSX напрямую в JavaScript.

Импорт React и ReactDOM

Вы можете заметить, что в компонентах по умолчанию используется следующий синтаксис:

import * as React from 'react'; import * as ReactDOM from 'react-dom';

С TypeScript вы больше не сможете делать стандартные импорты фида:

React экспортируется как модуль CommonJS, который не использует default export. На данный момент, не обязательно точно знать, почему, а просто знать, как вы должны импортировать React, чтобы он работал. Это также означает, что вы объявляете свои компоненты как:

class App extends React.Component

Создание компонент

Одна из лучших особенностей использования TypeScript — вам больше не нужно использовать пакет prop-types. Есть небольшая магия при изучения использования TypeScript для props и state, но как только вы его поймете, он станет гораздо более мощным, чем методология React по умолчанию.

Вы определите интерфейс props для каждого из компонентов, которым вы передаете параметры. Вы определяете интерфейс объекта и где у каждого ключа может быть свой тип данных. Кроме того, вы можете объявить интерфейс для состояния (state) компоненты.

Функциональный компонент без хранения состояния

Чтобы продемонстрировать функциональный компонент с props, мы заменим заголовок в App.tsx нашим собственным компонентом . Создайте файл ./src/Header.tsx. Он получает параметр name. Внутри нашего файла мы создадим функциональный компонент:

import * as React from 'react'; interface IProps < name?: string; >const Header: React.SFC = (props: IProps) => ( 
Hello, ! Welcome to React and TypeScript.
 ); Header.defaultProps = < name: 'world', >; export default Header;

Начнем с импорта React. Затем мы объявляем интерфейс IProps с единственным параметром name. Мы указали что параметр необязательный, это задается симфолом “?”. Обозначение ключа как необязательного означает, что входной параметр может быть или string или undefined.

При создании компоненты Header, обратите внимание на React.SFC. «SFC» обозначает функциональный компонент без сохранения состояния в прототип. Хотя это объявление не является обязательным, оно позволяет нам использовать defaultProps.

Далее, мы объявляем тип входного параметра как IProps, ссылающийся на созданный нами интерфейс.

Компонент класса

Чтобы показать основы компонента класса, мы заменим описание

в App.tsx на счетчик. Одним из ключевых различий между классом и функциональным компонентом является то, что компонент класса может поддерживать свое собственное состояние. Другим основным отличием является возможность доступа к методам жизненного цикла, описание которых выходит за рамки данного руководства.

Создайте файл ./src/Description.tsx и добавьте следующий код.

import * as React from 'react'; interface IProps < countBy?: number; >interface IState < count: number; >class Description extends React.Component  < public static defaultProps: Partial= < countBy: 1, >; public state: IState = < count: 0, >; public increase = () => < const countBy: number = this.props.countBy!; const count = this.state.count + countBy; this.setState(< count >); >; public render() < return ( 
My favorite number is >Increase 
 ); > > export default Description;

Мы начнем с объявления интерфейса для IProps и IState. Будет необязательный счетчик вызовов счетчика, который будет определять значение приращения. Сам компонент будет вести подсчет, используя свое состояние.

Ваше create-react-app с компонентами TypeScript

Внутри нашего App.tsx мы импортируем только что созданные компоненты и заменяем HTML по умолчанию из CRA. Параметры name и countBy должны соответствовать типам, объявленным в дочернем компоненте. Поскольку props являются необязательными, они также могут быть undefined, и будет использоваться defaultProps.

import * as React from 'react'; import './App.css'; import Description from './Description'; import Header from './Header'; import logo from './logo.svg'; class App extends React.Component < public render() < return ( 
 
 className="App-logo" alt="logo" /> 
 />
 ); > > export default App;

И это все, что вам нужно для начала работы с TypeScript в React! Чтобы увидеть, как работает ваше приложение запустите следующую команду в консоли:

Источник

TypeScript

A react component which will render a piano scale with variable parameters as input

String interpolation with correct return type based on passed variable substitutions

A Plinko game site using React, Vite and Typescript

A simple datepicker react/typescript component

A simple Markdown parser for React-email written in typescript

Bundle React and TypeScript online without Node.js

A React TypeScript application that provides information about cryptocurrencies

A programmable code-generation React.js tool based on the Liquid template engine

A Fast and simple FPS meter for React

A modern asset manager for Gothic game written in C++ and React TS

Simple ecommerce cart application built with Typescript and React

History App with React, TypeScript and styled-components

CRUD Context in React with Typescript

A Solana dApp with NextJS and TypeScript

Driving School — Web User Interface on Next.js and TypeScript

Path finding visualizer web application built with react and typescript

A React TypeScript Chrome Extension Template

A Terminal-like website created with React using TypeScript

React App with Amplify Authentication using TypeScript

A typescript implementation of Bitmap Parser

Jokes Website with React, Typescript and Styled Components

Build maintainable, typesafe forms faster for React

@ts-react/form handles the boilerplate involved when building forms using zod and react-hook-form without sacrificing customizability.

A macOS desktop clone built with TypeScript React, SASS and Framer Motion

Источник