Как перевести ваше веб-приложение на TypeScript

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

Что такое TypeScript?

TypeScript — это синтаксический надмножество JavaScript, в котором помимо прочего добавлена поддержка статической типизации. Он компилируется непосредственно в vanilla JS, который будет работать в любом браузере.

Vanilla JS имеет динамическую типизацию. Типы переменных могут меняться во время выполнения, и JS это примет. Это делает его очень гибким, но часто приводит к беспорядку в больших проектах. TypeScript обеспечивает безопасность типов — вы не можете передать значение int функции, которая принимает string.

Это само по себе имеет некоторые большие преимущества. Поскольку каждая функция четко определяет, какие аргументы она принимает, это значительно упрощает работу с ними. TypeScript очень хорошо интегрируется с инструментами IDE, обеспечивая расширенное автозаполнение и проверку типов, в то время как у vanilla JS была бы только базовая подсветка синтаксиса.

Это также упрощает базовую проверку ошибок для вашей IDE. Если вам не хватает аргумента для функции, VS Code сразу сообщит вам об этом, еще до того, как он будет скомпилирован.

Установка TypeScript и Webpack

Примечание перед тем, как мы начнем: если вы используете проект React, созданный с помощью create-react-app, конфигурация Webpack обрабатывается для вас как часть react-scripts. Если вы хотите изменить его, вы можете удалить свою конфигурацию (не рекомендуется, если вы не хотите самостоятельно обрабатывать текущую настройку), создать форк react-scripts или использовать библиотеку, например rewired. чтобы изменить его косвенно, не нарушая обновления.

Однако, если вы начинаете новый проект, вы можете просто использовать шаблон TypeScript create-react-app при создании нового проекта.

npx create-react-app --template typescript

Это будет предварительно настроено для поддержки TypeScript из коробки. Если это работает для вас, вы можете пропустить оставшуюся часть этого раздела. С помощью этого метода вы также можете перенести существующий проект в шаблон TypeScript create-react-app.

Если вы не используете React, вам придется установить его вручную. Установите TypeScript в качестве зависимости разработки для вашего проекта:

npm install --save-dev typescript

Вы также захотите установить TypeScript глобально на свой компьютер, что позволит вам использовать CLI:

npm install -g typescript

Чтобы проверить это, вы можете создать базовую функцию, например следующую:

function Hello(object: string) {
  console.log(`Hello, ${object}!`);
}

Hello('World')

Сохранено как test.ts. Все файлы TypeScript должны иметь расширение .ts (или .tsx для JSX). Вы можете скомпилировать его вручную с помощью tsc:

tsc test.ts

Выполнение этого с флагом -w заставит tsc следить за новыми изменениями и выполнять сборку при каждом сохранении, но вы, вероятно, захотите интегрировать ее в Webpack как часть процесса сборки. Если у вас нет Webpack, установите его из npm:

npm install --save-dev webpack webpack-cli

Создайте файл конфигурации TypeScript в tsconfig.json , в котором будут храниться настройки вашего компилятора:

{
    "compilerOptions": {
        "outDir": "./dist/",
        "sourceMap": true,
        "skipLibCheck": true,
        "noImplicitAny": true,
        "module": "commonjs",
        "target": "es6",
        "jsx": "react"
    }
}

Затем вам нужно создать или изменить файл webpack.config.json , чтобы разрешать расширения TypeScript и использовать ts-loader. Вы также захотите включить исходные карты для расширенной отладки.

module.exports = {
    mode: "production",

    // Enable sourcemaps for debugging webpack's output.
    devtool: "source-map",

    resolve: {
        // Add '.ts' and '.tsx' as resolvable extensions.
        extensions: [".ts", ".tsx"]
    },

    module: {
        rules: [
            {
                test: /.ts(x?)$/,
                exclude: /node_modules/,
                use: [
                    {
                        loader: "ts-loader"
                    }
                ]
            },
            // All output '.js' files will have any sourcemaps re-processed by 'source-map-loader'.
            {
                enforce: "pre",
                test: /.js$/,
                loader: "source-map-loader"
            }
        ]
    },

    // When importing a module whose path matches one of the following, just
    // assume a corresponding global variable exists and use that instead.
    // This is important because it allows us to avoid bundling all of our
    // dependencies, which allows browsers to cache those libraries between builds.
    externals: {
        "react": "React",
        "react-dom": "ReactDOM"
    }
};

Теперь при запуске npx webpack или webpack-dev-server автоматически загрузятся файлы TypeScript.

Как работать с пакетами на основе JS

Если вы только что установили TypeScript, изменили некоторые из ваших расширений на .ts и заметили, что теперь все горит, не волнуйтесь. Многие библиотеки JS не имеют встроенной поддержки Typescript, но сторонние типы обычно доступны в DefinitelyTyped, репозитории сообщества, предназначенном для поддержки типизации для наиболее распространенных библиотек в виде отдельно устанавливаемых зависимостей npm. . Например, React доступен по адресу @types/react:

npm install --save-dev @types/react @types/react-dom

Это немедленно избавит от проблем при использовании соответствующего пакета. Если вы получаете ошибки компилятора после установки нового пакета, попробуйте установить @types/package.

К счастью, TypeScript по-прежнему будет нормально компилироваться и работать с нативным JS — вы просто можете увидеть несколько красных волнистых линий, говорящих вам о проблеме. Если вы действительно хотите исправить типизацию для пакета npm , в котором нет общедоступных типов, вы можете написать для него файл объявления, при желании разветвив DefinitelyTyped (и отправив свои новые типизации в репозиторий сообщества ).

Файл декларации выглядит следующим образом и обычно сохраняется как package.d.ts где-то в вашем src:

export as namespace Package
export = Package

declare namespace Package {
  interface Type {
    value: boolean
  }
  // etc...
}

Затем вы можете использовать объявление, добавив ссылку вверху любого кода, использующего этот пакет:

///<reference path="package.d.ts"/>

Как ввести устаревший код

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

Например, предположим, что у вас есть компонент React, который принимает несколько реквизитов и отображает JSX:

Чтобы ввести это, вы можете определить новый интерфейс для использования функции. Каждый раз, когда вы ссылаетесь на ключ props в коде, например props.divCustomColor здесь, добавляйте его в интерфейс вместе с соответствующим типом.

Затем, когда вы используете эту функцию в другом файле, вы получите сообщение об ошибке, если не определите props.divCustomColor или попытаетесь передать ему неверный тип. Если ваше приложение уже обрабатывает значения типобезопасным способом, это может быть все, что вам нужно для ввода многих ваших компонентов. Однако вам, возможно, придется настроить некоторые вещи, чтобы лучше справляться со строгой типизацией.

Если вы действительно ломаете голову над чем-то, вы всегда можете отказаться и отключить предупреждения компилятора TypeScript, используя флаг ts-ignore :

//@ts-ignore

Или ts-nocheck для всего файла.

Добавление общепроектных типов

Если вы хотите добавить пользовательские типы для всего проекта, вам нужно создать файл глобального объявления. Например, если вы хотите создать перечисление, на которое можно ссылаться, сохраняя цвета вашего приложения, что позволяет использовать их напрямую по имени, вы можете сохранить следующее как global.d.ts в вашем src папка:

declare global {
    enum Color {
        primary = "#6ca583",
        accent = "#9b8dab",
    }
}

export {};

Отключить неявную любую проверку, если у вас действительно есть проблемы

Самая распространенная ошибка, с которой вы, вероятно, столкнетесь, — это то, что TypeScript жалуется на «Implicit Any». Вы можете заставить функции принимать любой тип, используя explicit any или val: any. Это нормально, и хотя обычно вы должны печатать более строго, иногда лучше попросить TypeScript расслабиться.

По умолчанию все значения будут неявно иметь тип any, который является просто системой динамической типизации JavaScript по умолчанию. TypeScript будет много жаловаться на это. При желании вы можете отключить жалобу, установив для noImplicitAny значение false:

{
  "compilerOptions": {
    "noImplicitAny": false
  }
}

Однако будьте осторожны с этим — это только заглушит ошибку и не решит основную проблему. Однако, если вы хотите включить это временно, пока вы работаете над вводом всего, это позволит вашему коду тем временем скомпилироваться.