Использование TypeScript¶

TypeScript — это язык, расширяющий JavaScript путем добавления определений типов. Новые проекты React Native по умолчанию используют TypeScript, но также поддерживают JavaScript и Flow.

Начало работы с TypeScript¶

Новые проекты, созданные с помощью React Native CLI или популярных шаблонов, таких как Ignite, по умолчанию будут использовать TypeScript.

TypeScript также можно использовать с Expo, который поддерживает шаблоны TypeScript или предложит вам автоматически установить и настроить TypeScript, когда файл .ts или .tsx будет добавлен в ваш проект.

1

npx create-expo-app --template

Добавление TypeScript в существующий проект¶

1. Добавьте TypeScript, типы и плагины ESLint в свой проект.

1

npm install -D @tsconfig/react-native @types/jest @types/react @types/react-test-renderer typescript

1

yarn add --dev @tsconfig/react-native @types/jest @types/react @types/react-test-renderer typescript

2. Добавьте файл конфигурации TypeScript. Создайте tsconfig.json в корне вашего проекта:

1
2
3

{
    "extends": "@tsconfig/react-native/tsconfig.json"
}

3. Переименуйте файл JavaScript в *.tsx.

4. Запустите yarn tsc, чтобы проверить тип ваших новых файлов TypeScript.

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

React Native по умолчанию устанавливает в новых приложениях TypeScript, но JavaScript все еще может использоваться. Файлы с расширением .jsx рассматриваются как JavaScript, а не TypeScript, и не будут проверяться. Модули JavaScript по-прежнему могут импортироваться модулями TypeScript, равно как и наоборот.

Как работает TypeScript и React Native¶

Исходные тексты TypeScript преобразуются Babel при компоновке. Мы рекомендуем использовать компилятор TypeScript только для проверки типов. Это поведение tsc по умолчанию для вновь создаваемых приложений. Если вы переносите существующий код TypeScript на React Native, есть одна или две оговорки в использовании Babel вместо TypeScript.

Как выглядит React Native + TypeScript¶

Вы можете предоставить интерфейс для Props и State React Component через React.Component<Props, State>, который обеспечит проверку типов и автозавершение редактора при работе с этим компонентом в JSX.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70

import React from 'react';
import {
    Button,
    StyleSheet,
    Text,
    View,
} from 'react-native';

export type Props = {
    name: string;
    baseEnthusiasmLevel?: number;
};

const Hello: React.FC<Props> = ({
    name,
    baseEnthusiasmLevel = 0,
}) => {
    const [
        enthusiasmLevel,
        setEnthusiasmLevel,
    ] = React.useState(baseEnthusiasmLevel);

    const onIncrement = () =>
        setEnthusiasmLevel(enthusiasmLevel + 1);
    const onDecrement = () =>
        setEnthusiasmLevel(
            enthusiasmLevel > 0 ? enthusiasmLevel - 1 : 0
        );

    const getExclamationMarks = (numChars: number) =>
        numChars > 0 ? Array(numChars + 1).join('!') : '';

    return (
        <View style={styles.container}>
            <Text style={styles.greeting}>
                Hello {name}
                {getExclamationMarks(enthusiasmLevel)}
            </Text>
            <View>
                <Button
                    title="Increase enthusiasm"
                    accessibilityLabel="increment"
                    onPress={onIncrement}
                    color="blue"
                />
                <Button
                    title="Decrease enthusiasm"
                    accessibilityLabel="decrement"
                    onPress={onDecrement}
                    color="red"
                />
            </View>
        </View>
    );
};

const styles = StyleSheet.create({
    container: {
        flex: 1,
        alignItems: 'center',
        justifyContent: 'center',
    },
    greeting: {
        fontSize: 20,
        fontWeight: 'bold',
        margin: 16,
    },
});

export default Hello;

Вы можете подробнее изучить синтаксис в TypeScript playground.

Где найти полезные советы¶

• Справочник по TypeScript
• документация React по TypeScript.
• React + TypeScript Cheatsheets содержит хороший обзор того, как использовать React с TypeScript.

Использование пользовательских псевдонимов путей с помощью TypeScript¶

Чтобы использовать пользовательские псевдонимы путей с TypeScript, необходимо настроить псевдонимы путей для работы как в Babel, так и в TypeScript. Вот как это сделать:

1. Отредактируйте ваш tsconfig.json, чтобы иметь ваши пользовательские сопоставления путей. Установите, чтобы все, что находится в корне src, было доступно без предшествующей ссылки на путь, и разрешите доступ к любому тестовому файлу с помощью tests/File.tsx:

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

{
-  "extends": "@tsconfig/react-native/tsconfig.json"
+  "extends": "@tsconfig/react-native/tsconfig.json",
+  "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "*": ["src/*"],
+      "tests": ["tests/*"],
+      "@components/*": ["src/components/*"],
+    },
+  }
}

2. Добавьте babel-plugin-module-resolver в качестве пакета разработки в свой проект:

1

npm install --save-dev babel-plugin-module-resolver

1

yarn add --dev babel-plugin-module-resolver

3. Наконец, настройте ваш babel.config.js (обратите внимание, что синтаксис вашего babel.config.js отличается от вашего tsconfig.json):

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

{
   presets: ['module:metro-react-native-babel-preset'],
+  plugins: [
+    [
+       'module-resolver',
+       {
+         root: ['./src'],
+         extensions: ['.ios.js', '.android.js', '.js', '.ts', '.tsx', '.json'],
+         alias: {
+           tests: ['./tests/'],
+           "@components": "./src/components",
+         }
+       }
+    ]
+  ]
}

Комментарии