Использование React вместе с TypeScript

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

Стартовый шаблон

Для быстрого создания React + TypeScript Microsoft подготовила хороший инструмент, который работает вместе с привычным react-scripts, автоматически настраивает тестовое окружение и создает шаблон теста.

Так же TypeScript нативно понимает JSX, без каких-либо надстроек, что не может не радовать.

Для его использования потребуется установить (если вдруг еще не установлен) create-react-app

npm install -g create-react-app

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

create-react-app my-app --scripts-version=react-scripts-ts

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

Для объявления компонента-класса достаточно унаследовать React.Component и объявить интерфейс для props’ов:

import * as React from 'react';

interface IProps {
    message: string
}

export class NoticeComponent extends React.Component<IProps> {
    public render() {
        return <div>{this.props.message}</div>;
    }
}

Так же можно объявить интерфейс для состояния компонента:

import * as React from 'react';

interface IProps {
    message: string
}

interface IState {
    isOpen: boolean
}
export class NoticeComponent extends React.Component<IProps, IState> {
    public render() {
        return <div>{this.props.message}</div>;
    }
}

Компонент-функция

Тип компонентов-функций будет зависеть от способа объявления:

Стрелочная функция:

import * as React from “react”

interface IProps {
    message: string
}

export const Notice: React.SFC<IProps> = ({message}: IProps) => (
    <div>{message}</div>
);

В случае с обычной функцией потребуется указать тип, который она вернет:

import * as React from “react”

interface IProps {
    message: string
}

export function Notice({message}: IProps): React.ReactElement<IProps> | null {
    return <div>{message}</div>;
}

Leave a Comment

Ваш e-mail не будет опубликован. Обязательные поля помечены *