Как начать изучать TypeScript – Руководство для начинающих

JavaScript изначально разрабатывался как простой скриптовый язык. Его расплывчатый характер и отсутствие важнейших функций объектно-ориентированного программирования (ООП) создают определенные проблемы для разработчиков:

1. Ограниченное количество документации и автоматическое заполнение.
2. Неспособность использовать концепции ООП.
3. Отсутствие безопасности типов, приводящее к ошибкам во время выполнения.
4. Проблемы, связанные с рефакторингом и сопровождением.
5. Отсутствие интерфейсов и точек интеграции.

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

В этой статье мы рассмотрим основы TypeScript. Я научу вас, как установить TS и настроить проект. Затем мы рассмотрим некоторые важные основы. You’Лл также узнаете, как на TypeScript компилируется в JavaScript, что делает его совместимым с браузерами и Node.js сред.

О чем мы расскажем:

• Предпосылки
• Начало работы“ Как установить TypeScript
• Как организовать ваши проекты на TypeScript
• Как работает набор текста в TypeScript Методы набора текста Статический против Динамический ввод текста в TypeScript Вывод типов и типы объединений
• Как обрабатывать объекты, массивы и типы функций в TypeScript Типы объектов в TypeScript Типы массивов в TypeScript Как использовать массивы в TypeScript Типы функций в TypeScript
• Как создавать пользовательские типы в TypeScript Ключевое слово Type Интерфейсы TypeScript Когда использовать интерфейсы Обобщенные и литеральные типы
• Как объединить типы в TypeScript Когда использовать каждый подход
• Объединение и преобразования в TypeScript
• Создание более совершенного кода с помощью TypeScript

Предпосылки

Прежде чем приступить к изучению TypeScript, важно получить представление о некоторых основных понятиях, которые облегчат процесс обучения. Хотя TypeScript расширяет возможности JavaScript за счет статической типизации и других мощных функций, он основан на основных принципах JavaScript. Вот что вам следует знать:

1. Основы JavaScript

TypeScript - это надстройка над JavaScript, что означает, что он расширяет возможности JavaScript. Чтобы эффективно изучать TypeScript, вы должны сначала хорошо усвоить основы JavaScript, в том числе:

• Синтаксис и типы данных: Понимание того, как объявлять переменные (let, const и var), работать с примитивными типами (строками, числами, логическими значениями) и управлять массивами и объектами.
• Поток управления: Будьте знакомы с циклами (for, while), условными обозначениями (if-else, switch) и тем, как они управляют выполнением программы.
• Функции: Знать, как определять и вызывать функции, работать с параметрами, возвращать значения и понимать такие понятия, как функции со стрелками и замыкания.
• Объектно-ориентированное программирование (ООП): Узнайте о создании объектов, классов и наследовании и работе с ними. Возможности TypeScript, основанные на классах, в значительной степени основаны на модели ООП JavaScript.
• Обработка ошибок: Разберитесь, как использовать блоки try-catch для обработки ошибок во время выполнения.

2. Основы HTML и CSS

Хотя TypeScript - это язык, используемый в основном с JavaScript, базовое понимание HTML и CSS полезно, особенно для разработчиков интерфейсов. Это связано с тем, что большинство проектов на TypeScript предполагают создание веб-приложений или работу с ними

• HTML: Понимание того, как структурировать веб-страницы с помощью тегов, атрибутов и элементов.
• CSS: Узнайте, как стилизовать элементы, используя селекторы, свойства и значения. Знакомство с CSS-фреймворками, такими как Bootstrap, является бонусом.

3. Знакомство с инструментами разработки

• Редактор кода, подобный Visual Studio Code, который обладает отличной поддержкой TypeScript и расширениями.
• Node.js и npm: Узнайте, как настроить среду разработки, запустить JavaScript вне браузера и использовать npm (Node Package Manager) для установки зависимостей.
• Управление версиями (Git): Изучите основы Git, чтобы отслеживать изменения и эффективно сотрудничать в проектах на TypeScript.

Начало работы“ Как установить TypeScript

Чтобы начать работу с TypeScript, вам необходимо установить его. Это несложный процесс. Установив TypeScript, вы сможете использовать его возможности для создания высококачественных решений.

Вы можете установить TS двумя способами:

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

npm install -g typescript

Эта команда использует Node.js диспетчер пакетов, npm. Она устанавливает TypeScript глобально, делая команду доступной в командной строке.

1. Локальная установка: в этом случае TypeScript устанавливается только в рамках определенного проекта. Этот метод обеспечивает совместимость версий и согласованность действий всех участников команды. Чтобы установить TypeScript локально, выполните следующую команду:

npm install typescript --save-dev

В отличие от глобальной установки, эта команда устанавливает TypeScript как зависимость от разработки. Команда tsc доступна только для использования в конкретном проекте, то есть для конкретного проекта, в котором вы запускаете команду.

Вы можете легко установить TypeScript прямо сейчас? Я надеюсь на это!

Как организовать ваши проекты на TypeScript

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

Расширение .ts обозначает файлы TypeScript и содержит код, который преобразуется в JavaScript для выполнения.

TypeScript также поддерживает файлы .d.ts, также известные как файлы определения типов. Эти файлы содержат информацию о типах внешних библиотек или модулей JavaScript, что помогает лучше проверять тип и завершать код, а также повышает эффективность разработки. Ниже приведен пример хорошей структуры проекта TS.:

my-ts-project/
├── src/ 
│   ├── components/ 
│   │   ├── Button.tsx
│   │   ├── Input.tsx
│   │   └── Modal.tsx
│   ├── services/ 
│   │   ├── api.ts
│   │   └── authService.ts
│   ├── utils/ 
│   │   ├── helpers.ts 
│   │   └── validators.ts
│   ├── models/ 
│   │   ├── User.ts
│   │   └── Product.ts
│   ├── index.tsx 
│   └── styles/ 
│       ├── global.css
│       └── theme.css
├── public/ 
│   ├── index.html
│   └── assets/ 
│       ├── images/
│       └── fonts/
├── tsconfig.json
└── package.json

Давайте разберемся, что здесь происходит:

1. src/: В этом каталоге находится весь исходный код проекта. components/: Содержит повторно используемые компоненты пользовательского интерфейса (например, кнопки, ввод, модальный интерфейс). Использование .tsx (TypeScript JSX) позволяет вам писать JSX с сохранением типов. services/: Содержит службы, которые взаимодействуют с внешними API или обрабатывают логику приложения (например, api.ts для вызовов API, AuthService.ts для аутентификации). utils/: Содержит вспомогательные функции и служебные классы для общих задач (например, helpers.ts для форматирования даты, validators.ts для проверки ввода). models/: Определяет интерфейсы или классы TypeScript для представления структур данных (например, User.ts, Product.ts). index.tsx: Основная точка входа в приложение. styles/: Содержит CSS или другие файлы стилей.
2. public/: Этот каталог содержит статические ресурсы, которые не обрабатываются TypeScript (например, HTML, изображения, шрифты).
3. tsconfig.json: Файл конфигурации TypeScript, в котором указаны параметры компилятора.
4. package.json: Файл манифеста проекта, содержащий список зависимостей, скриптов и других метаданных проекта.

Просто краткое описание соглашений об именовании, чтобы вы могли их понять:

• Используйте PascalCase для имен классов (например, User, Product).
• Используйте camelCase для имен функций и переменных (например, getUser, FirstName).
• Используйте осмысленные и описательные имена для файлов и каталогов.

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

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

Как работает набор текста в TypeScript

Как и любой другой типизированный язык программирования, TypeScript опирается на определения типов, которые обычно называются типизацией.

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

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

Чтобы указать тип в TypeScript, поставьте двоеточие( :) и укажите желаемый тип данных после имени переменной. Вот пример:

let age: number = 2;

Указанная выше переменная объявлена с типом number. В TypeScript это означает, что она может хранить только числа и ничего больше.

Методы набора текста

В TypeScript данные могут быть набраны двумя основными способами:

1. Статическая типизация: под статической типизацией понимается явное указание типа данных переменных и других объектов в коде во время разработки. Компилятор TypeScript применяет эти определения типов, помогая выявлять ошибки, связанные с типом, на ранней стадии. Например:

let age: number = 25;

Здесь явно указано, что переменная age имеет числовой тип. Это гарантирует, что ей могут быть присвоены только числовые значения, что снижает риск возникновения ошибок во время выполнения.

1. Динамическая типизация: Динамическая типизация в TypeScript относится к сценариям, в которых тип переменной определяется во время выполнения. Это может произойти, когда переменным присваивается тип any, который позволяет им сохранять значения любого типа. TypeScript не выполняет проверку типов при операциях с переменными типа any.

let value: any;
value = 25; // Number
value = "Hello"; // String

Хотя TypeScript - это в первую очередь язык со статической типизацией, динамическая типизация все же может быть полезна в определенных случаях, таких как:

• Работа со сторонними библиотеками, в которых отсутствуют определения типов.
• Взаимодействие с динамически структурированными данными (например, JSON-ответы от API с неизвестными структурами).
• Быстрое создание прототипов или когда информация о типе недоступна на начальном этапе разработки.

Статические и Динамическая типизация в TypeScript

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

Динамическая типизация обычно используется для случаев, когда требуется гибкость или когда приходится иметь дело с данными, структура которых не может быть определена заранее. Просто имейте в виду, что сильно полагаться на динамическую типизацию (например, чрезмерно использовать любой тип), как правило, не рекомендуется, поскольку это подрывает преимущества системы статической типизации TypeScript.

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

Вывод типов и типы объединений

Вывод типа

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

Например:

typescriptCopyEditlet age = 25; // TypeScript infers that 'age' is of type 'number'
age = "hello"; // Error: Type 'string' is not assignable to type 'number'

В этом примере переменная age автоматически выводится как число из-за ее начального значения 25. Любая попытка присвоить возраст значению другого типа (например, строке) приведет к ошибке ввода.

Вывод типов особенно полезен, поскольку он уменьшает необходимость в явных аннотациях к типам, делая ваш код более понятным. Однако он по-прежнему обеспечивает безопасность и надежность проверки типов в TypeScript.

When to use type inference:

• Простые назначения: Используйте вывод типа для простых назначений, где тип очевиден из значения.
• Значения по умолчанию: При указании значений по умолчанию для переменных или параметров функции вывод типа гарантирует, что будет применен правильный тип, не требуя ручных аннотаций.
• Быстрое прототипирование: На ранних стадиях разработки вывод типов позволяет сократить количество шаблонных кодов, сохраняя при этом безопасность ввода.

Типы объединений

Объединенные типы позволяют переменной сохранять значения нескольких типов. Они определяются путем размещения канала (|) между типами. Эта функция особенно полезна, когда переменная может на законных основаниях иметь более одного типа в течение своего жизненного цикла.

Например:

typescriptCopyEditlet numOrString: number | string; // 'numOrString' can hold either a number or a string
numOrString = 25; // Valid
numOrString = "hello"; // Valid
numOrString = true; // Error: Type 'boolean' is not assignable to type 'number | string'

Вы даже можете определить типы объединений с более чем двумя возможными типами:

typescriptCopyEditlet multiType: number | string | boolean;
multiType = 42; // Valid
multiType = "TypeScript"; // Valid
multiType = false; // Valid

When to use union types:

• Гибкие параметры функции: когда функция может принимать несколько типов входных данных. Функция typescriptcopyedit printValue(значение: строка | число) { console.log(значение); }
• Работа с различными структурами данных: При работе с API-интерфейсами или внешними источниками данных, где поля могут различаться по типу.
• Необязательные переменные или переменные с несколькими состояниями: например, переменная, которая может представлять состояние загрузки в виде логического значения, ошибку в виде строки или допустимые данные в виде объекта: Статус typescriptCopyEditlet: логическое значение | строка | { успех: логическое значение; данные: любые };

Как обрабатывать объекты, массивы и типы функций в TypeScript

Чтобы освоить TypeScript, вы должны понимать различные типы данных, поддерживаемые в TypeScript, а также то, как и когда их использовать.

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

Типы объектов в TypeScript

Типы объектов представляют собой основу для создания объектов в TypeScript. Вы можете использовать объекты для определения их формы, аналогично тому, как классы используются в объектно-ориентированном программировании (ООП). Но объектам не хватает поведенческих аспектов и инкапсуляции, которые предлагают классы.

Чтобы определить тип объекта, явно укажите схему элементов объекта после двоеточия(:). например:

// Object Type Initialization

let student: {
    name: string;
    age: number;
    matricNumber: string | number;
 };

// Assigning the Object with actual data

student = {
    name: "Akande"
    age: 21,
    matricNumber: 21/52 + "HP" + 19,
};

Обратите внимание, что свойства заканчиваются точкой с запятой, а не запятой - символом, которым они завершаются в реальном объекте.

Описанный выше способ является основным для определения объекта в TypeScript. Другой способ - использовать интерфейсы, о которых я расскажу позже в этой статье.

Типы массивов в TypeScript

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

В TypeScript типы массивов могут быть определены двумя способами:

1. Использование модели Array<тип>

В этом синтаксисе используется универсальный тип массива, где type представляет тип элементов, которые могут содержаться в массиве.

typescriptCopyEditlet numbers: Array<number> = [1, 2, 3, 4, 5];
let mixedArray: Array<number | string> = [1, 2, 3, 4, 5, "Hello"];

• пример с числами: Этот массив может содержать только числа. Попытка добавить строку или другой тип в этот массив приведет к ошибке ввода. typescriptCopyEditnumbers.push(6); // Допустимые номера.push("Привет"); // Ошибка: тип "string" не может быть присвоен типу "number"
• Пример mixedArray: В этом массиве используется тип объединения (number | string), позволяющий хранить как числа, так и строки. typescriptCopyEditmixedArray.push(42); // Допустимый mixedArray.push("МашиНопись"); // Допустимо mixedArray.push(истина); // Ошибка: тип 'boolean' не может быть присвоен типу 'число | строка'

2. Использование модели типа[]

Этот синтаксис добавляет квадратные скобки ([]) к типу элементов, которые могут содержаться в массиве.

typescriptCopyEditconst numbers: number[] = [1, 2, 3, 4, 5];
const mixedArray: (string | number)[] = [1, 2, 3, 4, 5, "Hello"];

• пример с числами: Подобно примеру с массивом<число>, этот массив может содержать только числа. typescriptCopyEditnumbers[0] = 10; // Допустимые числа.push("Привет"); // Ошибка: тип 'string' не может быть присвоен типу 'number'
• Пример mixedArray: Как и предыдущий mixedArray, этот массив допускает использование как чисел, так и строк, обеспечивая гибкость при использовании различных типов данных. typescriptCopyEditmixedArray[1] = "World"; // Допустимый mixedArray.push(true); // Ошибка: тип 'boolean' не может быть присвоен типу 'string | number'

Как использовать массивы в TypeScript

Массивы универсальны и обычно используются для хранения коллекций связанных данных. Вот несколько практических сценариев:

Хранение однородных данных: когда все элементы в массиве имеют один и тот же тип, например список идентификаторов пользователей или цен на продукты.:

typescriptCopyEditconst userIds: number[] = [101, 102, 103];
const productPrices: Array<number> = [29.99, 49.99, 19.99];

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

typescriptCopyEditconst messages: (string | object)[] = [
  "Welcome",
  { type: "error", text: "Something went wrong" },
];

Итерация по массивам: Массивы в TypeScript можно использовать в циклах с полной сохранностью типов:

typescriptCopyEditconst scores: number[] = [80, 90, 70];
scores.forEach((score) => console.log(score + 5)); // Adds 5 to each score

Параметры функций и типы возвращаемых данных: Массивы также могут передаваться в качестве параметров функций или возвращаться функциями со строгой типизацией:

typescriptCopyEditfunction getNumbers(): number[] {
  return [1, 2, 3];
}
function printStrings(strings: string[]): void {
  strings.forEach((str) => console.log(str));
}

Типы функций в TypeScript

Типы функций в TypeScript описывают форму функций, включая типы параметров и типы возвращаемых данных. Типы функций определяются путем явного указания типов параметров при объявлении. Тип возвращаемого значения указывается путем добавления : и типа, который будет возвращаться, сразу после скобок. например:

function addition (a: number, b: number): number {
return a + b;
}

Приведенная выше функция принимает два числа, складывает их и возвращает число. Функция не будет работать, если ни один из ее аргументов не является числами и если она возвращает что-либо еще, кроме числа. Например:

1. Вызов функции со строкой в качестве аргумента:

// This won't work because it expects numbers, and one of the arguments is a string

addition(1, "two");

1. Переписывание функции для возврата строки:

// Function will return an error because it's returning a string

function addition (a: number, b: number): string {
    let result = a + b;
    let returnStatement = `Addition of ${a} and ${b} is: ${result}`;
    return returnStatement;
}

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

Понимание и эффективная работа с объектами, массивами и функциями в TypeScript позволяет вам писать типобезопасный и поддерживаемый код, повышая надежность и масштабируемость ваших приложений.

Как создавать пользовательские типы в TypeScript

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

Пользовательские типы позволяют вам определять структуру данных и формы в соответствии с вашими потребностями. Это повышает читаемость кода и удобство сопровождения.

Ключевое слово Type

Ключевое слово type позволяет создавать псевдонимы типов, предоставляя возможность создавать пользовательские типы. Созданные вами типы можно повторно использовать в вашей кодовой базе. Псевдонимы типов помогают определять объединяемые типы или объединять типы в отдельные псевдонимы. Синтаксис для создания пользовательского типа следующий:

// Syntax

type TypeAlias = type;

И вот вам пример:

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

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

Ключевое слово type обычно используется для примитивов, но как насчет создания пользовательского типа объекта?

Вот тут-то и пригодятся интерфейсы.

Интерфейсы TypeScript

Интерфейсы в TypeScript используются для определения структуры объектов. Они служат схемами, определяющими свойства, которыми должен обладать объект, и их соответствующие типы. Это обеспечивает соответствие объектов единой форме, что обеспечивает безопасность ввода и более четкий код.

Определение интерфейса

Интерфейс определяется с помощью ключевого слова interface. Синтаксис выглядит следующим образом:

typescriptCopyEditinterface InterfaceName {
  property1: Type;
  property2: Type;
}

Пример:

typescriptCopyEditinterface User {
  id: number;
  name: string;
  email: string;
}

const user: User = {
  id: 1,
  name: "Alice",
  email: "alice@example.com",
};

Вот что происходит в этом примере:

1. Описание интерфейса (interface User): Здесь мы определяем схему элементов для объекта User. В ней указывается, что любой объект типа User должен обладать следующими свойствами: идентификатор типа number имя типа string адрес электронной почты типа string
2. Используя интерфейс (const user: Пользователь): Мы объявляем объект user типа User. Объект должен обладать всеми свойствами, определенными в пользовательском интерфейсе, со значениями указанных типов. Если свойство отсутствует или его тип не совпадает, TypeScript выдаст ошибку во время компиляции.

Например:

    typescriptCopyEditconst invalidUser: User = {
      id: 1,
      name: "Alice",
      // Error: Property 'email' is missing in type
    };

Итак, вы, возможно, задаетесь вопросом: “Зачем вам использовать интерфейсы?

• Безопасность типов: гарантирует соответствие объектов ожидаемой структуре, предотвращая ошибки во время выполнения.
• Возможность повторного использования: Один и тот же интерфейс может быть повторно использован в разных частях приложения, что сокращает дублирование.
• Ясность кода: Упрощает чтение и понимание кода за счет явного описания формы объектов.

Расширенные возможности интерфейсов

1. Необязательные свойства: Вы можете сделать свойства необязательными, добавив знак вопроса (?). typescriptCopyEditinterface Product { идентификатор: номер; название: строка; описание?: строка; // Необязательное свойство } const product: Продукт = { id: 101, имя: "Ноутбук", }; // Допустимо, так как "описание" необязательно
2. Свойства только для чтения: Используйте только для чтения, чтобы предотвратить изменение свойств после инициализации. Точка интерфейса typescriptcopyedit { только для чтения x: число; только для чтения y: число; } const point: Point = { x: 10, y: 20 }; point.x = 15; // Ошибка: Не удается присвоить значение 'x', поскольку это свойство доступно только для чтения
3. Расширение интерфейсов: Интерфейсы могут наследовать свойства от других интерфейсов, что позволяет создавать композицию. typescriptCopyEditинтерфейс пользователя { имя: строка; возраст: количество; } интерфейс сотрудника расширяет круг лиц { Идентификатор сотрудника: номер; } постоянный сотрудник: Employee = { имя: "Джон", возраст: 30, идентификатор сотрудника: 1234, };

Когда следует использовать интерфейсы

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

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

Интерфейсы также удобны при работе с повторно используемыми типами. Когда в нескольких частях вашего приложения используются объекты с одинаковой структурой, интерфейсы предотвращают дублирование.

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

Обобщенные и литеральные типы

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

Вот пример универсальной функции и универсального интерфейса в TypeScript:

// Generic interface for a box that can hold any value 

interface  Box<T> { 
    value: T; 
}

// Usage examples

let  numberBox: Box<number> = { value: 10 };
let  stringBox: Box<string> = { value: "TypeScript" };

console.log(numberBox.value); // Output: 10  
console.log(stringBox.value); // Output: TypeScript

Вы можете использовать обобщенные данные, когда не уверены в своем типе данных.

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

type Direction = 'up' | 'down' | 'left' | 'right';

Переменная, созданная с указанным выше типом, может быть назначена только для строк up, down, left и right.

В целом, использование пользовательских типов в TypeScript позволяет создавать выразительные, многократно используемые и типобезопасные структуры данных, что помогает разрабатывать более надежные и поддерживаемые приложения.

Как объединить типы в TypeScript

Объединение типов в TypeScript объединяет несколько объявлений типов в один унифицированный тип. Эта возможность позволяет разработчикам создавать сложные типы из небольших фрагментов, которые можно использовать повторно, что повышает ясность кода, возможность повторного использования и сопровождения.

1. Объединение объявлений в интерфейсах

TypeScript поддерживает объединение объявлений, при котором несколько объявлений интерфейса с одинаковыми именами автоматически объединяются в один интерфейс. Это позволяет расширить существующий интерфейс, определив дополнительные свойства или методы.

Example:

typescriptCopyEditinterface User {
  id: number;
  name: string;
}

interface User {
  email: string;
}

const user: User = {
  id: 1,
  name: "Alice",
  email: "alice@example.com",
};

How it works:

• Пользовательский интерфейс объявляется дважды, каждый раз с разными свойствами.
• TypeScript автоматически объединяет эти объявления в единый интерфейс: Пользователь интерфейса typescriptcopyedit { идентификатор: номер; имя: строка; адрес электронной почты: строка; }
• При создании пользовательского объекта должны присутствовать все свойства из объединенного интерфейса. Если какое-либо свойство отсутствует, TypeScript выдаст сообщение об ошибке.

Объединение описаний особенно полезно при работе со сторонними библиотеками. Вы можете расширить или добавить новые свойства к существующему интерфейсу, не изменяя исходный код библиотеки.

2. Объединение интерфейсов с использованием ключевого слова extends

Ключевое слово extends позволяет одному интерфейсу наследовать свойства и методы от другого, создавая новый интерфейс, который сочетает в себе свойства обоих.

Example:

typescriptCopyEditinterface Person {
  name: string;
  age: number;
}

interface Employee extends Person {
  employeeId: number;
}

const employee: Employee = {
  name: "John",
  age: 30,
  employeeId: 101,
};

How it works:

• Пользовательский интерфейс определяет два свойства: имя и возраст.
• Интерфейс Employee использует ключевое слово extends для наследования свойств от Person.
• В интерфейсе Employee также добавлено новое свойство EmployeeID.
• Объект employee должен включать в себя все свойства как Person, так и Employee.

This approach is ideal for hierarchical relationships. For instance, you can define a base interface for shared properties and extend it for specialized types.

3. Введите слияние с помощью оператора &

Оператор &, известный как тип пересечения, позволяет объединить несколько типов в один тип. Результирующий тип включает в себя все свойства и методы каждого типа.

Example:

typescriptCopyEdittype Address = {
  city: string;
  country: string;
};

type ContactInfo = {
  email: string;
  phone: string;
};

type EmployeeDetails = Address & ContactInfo;

const employee: EmployeeDetails = {
  city: "New York",
  country: "USA",
  email: "john.doe@example.com",
  phone: "123-456-7890",
};

How it works:

• Address и ContactInfo - это два разных типа файлов.
• EmployeeDetails - это тип пересечения, созданный с помощью Address & ContactInfo.
• Объект employee должен содержать все свойства как из Address, так и из ContactInfo. Отсутствующие или неправильно введенные свойства приведут к ошибке TypeScript.

Intersection types are helpful when you need to combine unrelated types or create composite types for specific use cases, like API responses that merge different data structures.

Когда следует использовать каждый из этих подходов

1. Объединение объявлений: Используется, когда вы хотите расширить или дополнить существующий интерфейс, особенно в сторонних библиотеках или общих кодовых базах.
2. ключевое слово extends: Используется для иерархических отношений, когда базовый интерфейс может быть специализирован на более конкретных типах.
3. Типы пересечений (&): Используется, когда вам нужно объединить несколько несвязанных типов в один тип для конкретных случаев использования.

Понимая эти методы объединения и их значение, вы сможете эффективно структурировать свой код на TypeScript, улучшая возможность повторного использования и сопровождения при сохранении безопасности ввода.

Объединение и преобразования в TypeScript

Не каждый браузер поддерживает последнюю версию JavaScript, используемую TypeScript. Таким образом, вы можете использовать компилятор TypeScript, или tsc, для преобразования кода TypeScript (ts-файлов) в обычный JavaScript (js-файлы), который универсально совместим со всеми браузерами. tsc преобразует специфичные для TypeScript элементы, такие как типы и классы, в JavaScript-код, который могут интерпретировать браузеры.

Для запуска файлов TypeScript вам понадобится tsc. Вы можете установить tsc с помощью npm, а затем преобразовать ваши ts-файлы в js-файлы. Чтобы использовать tsc, просто укажите имя файла TypeScript перед командой tsc. Например, если у вас есть файл с именем app.ts, вы можете запустить его, набрав:

tsc app.ts

Webpack или Parcel часто используются для развертывания кода на TypeScript в браузерах. Эти инструменты объединяют все файлы JavaScript, в том числе из TypeScript, для повышения производительности и упрощения реализации веб-сайта. Они также оптимизируют загрузку кода, уменьшая его размер и увеличивая скорость работы браузера.

Создание более совершенного кода с помощью TypeScript

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

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

Продолжайте толкать ваш границ и глубже окунуться в мир машинописного текста. ðŸÂ‰