Настройка TypeScript для React Native

В этом руководстве мы подробно рассмотрим файл конфигурации TypeScript для проекта React Native. Мы объясним каждую часть конфигурации, чтобы даже новичок мог понять, что и зачем используется.

Файл конфигурации TypeScript

Файл конфигурации TypeScript обычно называется tsconfig.json. Он содержит настройки компилятора TypeScript и указывает, какие файлы должны быть включены или исключены из компиляции.

{
    "extends": "@tsconfig/react-native/tsconfig.json",
    "include": [
        "src",
        "App.tsx"
    ],
    "exclude": [
        "/node_modules/",
        "**/.json"
    ],
    "compilerOptions": {
        "lib": [
            "ES2020"
        ],
        "strict": false,
        "noImplicitAny": false,
        "target": "esnext",
        "baseUrl": ".",
        "strictNullChecks": false,
        "noImplicitReturns": false,
        "noImplicitThis": false,
        "noUnusedLocals": false,
        "noUnusedParameters": false,
        "noFallthroughCasesInSwitch": false,
        "noImplicitOverride": false,
        "skipLibCheck": false,
        "jsx": "preserve",
        "forceConsistentCasingInFileNames": false,
        "paths": {
            "@screens/": [
                "src/screens/"
            ],
            "@components/": [
                "src/components/"
            ],
            "@containers/": [
                "src/containers/"
            ],
            "@utils/": [
                "src/utils/"
            ],
            "@store/": [
                "src/store/"
            ],
            "@models/": [
                "src/models/"
            ],
            "@svg": [
                "assets/svg/index.jsx"
            ],
            "@api": [
                "src/services/apiService.ts"
            ],
            "@navigation/": [
                "src/navigation/"
            ],
            "@assets/": [
                "assets/"
            ],
            "@slices/": [
                "src/slices/"
            ],
            "@selectors/": [
                "src/selectors/"
            ],
            "@themes/": [
                "src/themes/*"
            ]
        }
    }
}

Подробное описание

extends

Ключ "extends" позволяет наследовать настройки из другого файла конфигурации. В данном случае мы наследуем настройки из @tsconfig/react-native/tsconfig.json, который содержит базовые настройки для проектов React Native.

include

Ключ "include" указывает, какие файлы и директории должны быть включены в компиляцию. В данном случае мы включаем директорию src и файл App.tsx.

exclude

Ключ "exclude" указывает, какие файлы и директории должны быть исключены из компиляции. Здесь мы исключаем директорию node_modules и все файлы с расширением .json.

compilerOptions

Ключ "compilerOptions" содержит различные настройки компилятора TypeScript. Рассмотрим их подробнее:

• "lib": ["ES2020"] - Указывает, какие библиотеки использовать. В данном случае мы используем стандартную библиотеку ECMAScript 2020.
• "strict": false - Отключает строгий режим, который включает множество проверок типов.
• "noImplicitAny": false - Разрешает неявный тип any.
• "target": "esnext" - Указывает версию ECMAScript, в которую будет транслироваться код. Здесь используется последняя версия.
• "baseUrl": "." - Устанавливает базовый путь для разрешения модулей.
• "strictNullChecks": false - Отключает проверку на null и undefined.
• "noImplicitReturns": false - Разрешает функции без явного оператора return.
• "noImplicitThis": false - Разрешает неявное использование this.
• "noUnusedLocals": false - Разрешает неиспользуемые локальные переменные.
• "noUnusedParameters": false - Разрешает неиспользуемые параметры функций.
• "noFallthroughCasesInSwitch": false - Разрешает переходы между кейсами в операторе switch.
• "noImplicitOverride": false - Разрешает неявное переопределение методов.
• "skipLibCheck": false - Отключает проверку типов в библиотеках.
• "jsx": "preserve" - Сохраняет JSX как есть, не преобразуя его в JavaScript.
• "forceConsistentCasingInFileNames": false - Отключает проверку на согласованность регистра в именах файлов.

paths

Ключ "paths" позволяет задать алиасы для путей к модулям. Это упрощает импорт модулей в проекте. Рассмотрим алиасы, используемые в данном файле:

• "@screens/": ["src/screens/"] - Алиас для директории с экранами приложения.
• "@components/": ["src/components/"] - Алиас для директории с компонентами.
• "@containers/": ["src/containers/"] - Алиас для директории с контейнерами.
• "@utils/": ["src/utils/"] - Алиас для директории с утилитами.
• "@store/": ["src/store/"] - Алиас для директории с хранилищем состояния.
• "@models/": ["src/models/"] - Алиас для директории с моделями данных.
• "@svg": ["assets/svg/index.jsx"] - Алиас для файла с SVG-иконками.
• "@api": ["src/services/apiService.ts"] - Алиас для файла с API-сервисами.
• "@navigation/": ["src/navigation/"] - Алиас для директории с навигацией.
• "@assets/": ["assets/"] - Алиас для директории с ассетами.
• "@slices/": ["src/slices/"] - Алиас для директории с срезами состояния (Redux slices).
• "@selectors/": ["src/selectors/"] - Алиас для директории с селекторами состояния.
• "@themes/": ["src/themes/*"] - Алиас для директории с темами оформления.

Заключение

Теперь вы знаете, как настроить файл tsconfig.json для проекта React Native и что означает каждая настройка. Это поможет вам лучше понять, как работает TypeScript в вашем проекте и как вы можете настроить его под свои нужды.