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

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

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

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

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

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

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

1
2
3


npx create-react-app my-app --template typescript
# or
yarn create react-app my-app --template typescript

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

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

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11


import * as React from 'react';

interface IProps {
    message: string
}

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

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

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14


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>;
    }
}

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

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

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

1
2
3
4
5
6
7
8
9


import * as React from “react”

interface IProps {
    message: string
}

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

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

1
2
3
4
5
6
7
8
9


import * as React from “react”

interface IProps {
    message: string
}

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

Содержание