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

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

1. Работа со сложными типами
2. Работа с устаревшими библиотеками JavaScript
3. Работа с неизвестными типами.
4. Умение выполнять простые манипуляции с типами
5. Создание функций Type Guard

1. Работа со сложными типами

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

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

2. Работа с устаревшими библиотеками Javascript

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

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

3. Работа с неизвестными типами

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

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

4. Умение выполнять простые манипуляции с текстами.

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

5. Создание функций защиты типа

С помощью TypeScript вы можете создавать собственные функции Type Guard с помощью оператора isType. Приведение типов помогает определить, относится ли данное значение к ожидаемому типу. Затем, если оно того типа, который нам нужен, мы можем использовать это значение в следующем процессе, или, если утверждение не удалось, мы можем подумать, что делать со значением.

Основы приведения типов

Что такое неявное приведение типов?

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

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

Давайте рассмотрим пример

let stringValue: string = '42';
let numberValue: number = stringValue as unknown as number; // Double Casting is done here causing implicit conversion

Что такое явное приведение типов?

Явное приведение типов — это когда разработчик намеренно выполняет преобразование типа, поэтому разработчик явно предоставляет тип.

TypeScript предлагает 2 способа, которыми разработчик может это сделать.

• Использование угловых скобок
• Использование ключевого слова as

Использование угловых скобок

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

let someValue: any = 'Some String Value';
let strLength: number = (<string>someValue).length;

Этот метод является более старым способом приведения типов в TypeScript. Давайте посмотрим на еще один современный вариант Type Cast:

Использование as ключевого слова

Ключевое слово as было добавлено в машинописный текст как способ приведения типов. Этот метод прост в использовании и более читабелен.

Метод старых угловых скобок также может конфликтовать с JSX, и, следовательно, ключевое слово as является предпочтительным способом приведения типов в TypeScript.

Давайте рассмотрим пример

let someValue: any = 'This is a random string';
let strLength: number = (someValue as string).length;

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

TypeScript всегда будет стремиться обеспечить безопасность типов. Неправильное использование приведения типов может привести к ошибкам.

Примеры

Custom Type Guard

Тип Guards — это функции. Эти функции сужают область действия данного значения до определенного типа. Это позволяет TypeScript различать типы.

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

class Individual {
  constructor(public name: string, public age: number) {}
}

class Car {
  constructor(public make: string, public model: string) {}
}

function isIndividual(obj: any): obj is Individual {
  return obj instanceof Individual;
}

const someItem = new Individual('Jo', 23);

if (isIndividual(someItem)) {
  // TypeScript will recognw someItem as Individual within this scope
  console.log(someItem.name);
} else {
  console.log('This Object is not an Individual object');

Безопасный анализ JSON: Использование встроенной JSON.parse функции JavaScript

В этом примере мы будем использовать приведение типов для проверки типа анализа объекта с помощью функции JSON.parse

Встроенная функция JavaScript JSON.parse может анализировать строку JSON в объект JavaScript.

Однако TypeScript не знает, какой тип объекта анализируется функцией JSON.parse.

Мы будем использовать приведение типов, чтобы предоставить правильную информацию о типе.

const individualInformation = '{"name": "John Doe", "age": 23}';
const parsedJSON = JSON.parse(individualInformation);

Функция приведения пользовательского типа

Далее мы создадим специальную защитную функцию для проверки структуры JSON, анализируемой с помощью функции JSON.parse.

interface Individual {
  name: string;
  age: number;
}

function isIndividual(obj: any): obj is Individual {
  return (
    typeof obj === 'object' &&
    obj !== null &&
    typeof obj.name === 'string' &&
    typeof obj.age === 'number'
  );
}

Теперь мы создали пользовательскую функцию, которую мы можем использовать для подтверждения типа JSON, который был проанализирован JSON.parse функцией.

Утверждение типа анализируемого JSON

Давайте теперь утверждаем, имеет ли JSON, анализируемый Объектом, JSON.parse определенный тип или нет.

const IndividualInformation = '{"name": "Joe", "age": 23}';
const parsedJSON = JSON.parse(IndividualInformation);

if (isIndividual(parsedJSON)) {

  const individual: Individual = parsedJSON;
  console.log(`Hi, I am ${individual.name} and I am ${individual.age} years old.`);
} else {
  console.error('The JSON string does not represent a Individual object');
}

В приведенном выше примере мы используем специальную защитную функцию, isIndividualчтобы проверить, что проанализированный JSON имеет тип «Индивидуальный».

Объект Individualздесь служит неявным приведением типов и обеспечивает безопасность и целостность кода.

Преобразование ответов API

В этом примере мы будем преобразовывать ответы JSON API с помощью служебной функции и использовать методы манипулирования типами для достижения безопасности типов.

В качестве примера API мы будем использовать веб-сайты-заполнители JSON todos api.

Конечная точка https://jsonplaceholder.typicode.com/ возвращает следующие данные:

[
  {
    "userId": 1,
    "id": 1,
    "title": "delectus aut autem",
    "completed": false
  },
 ...
]

Создание функции для получения данных из API

Мы собираемся создать функцию, которая будет получать данные из конечной точки todos.

async function fetchTodos() {
  const response = await fetch('https://jsonplaceholder.typicode.com/todos');
  const todos = await response.json();
  return todos;
}

Создание служебной функции для обработки ответов JSON

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

Мы можем создать служебную функцию, которая проверяет и сужает тип ответа, используя функцию проверки типа.

interface Todo {
  userId: number;
  id: number;
  title: string;
  completed: boolean;
}

function isTodoArray(obj: any): obj is Todo[] {
  return Array.isArray(obj) && obj.every(isTodo);
}

function isTodo(obj: any): obj is Todo {
  return (
    typeof obj === 'object' &&
    obj !== null &&
    typeof obj.userId === 'number' &&
    typeof obj.id === 'number' &&
    typeof obj.title === 'string' &&
    typeof obj.completed === 'boolean'
  );
}

Обеспечьте безопасность типов с помощью расширенных манипуляций с типами.

Мы собираемся обрабатывать ответы JSON, используя служебную функцию.

async function main() {
  const fetchedTodos = await fetchTodos();

  if (isTodoArray(fetchedTodos)) {
    // typescript will recognise the 
    const todos: Todo[] = fetchedTodos;

    // Advanced type manipulation: Extract only completed todos
    const completedTodos = todos.filter(todo => todo.completed);

    console.log('Completed Todos:', completedTodos);
  } else {
    console.error('API response does not match expected structure');
  }
}

main().catch(error => {
  console.error('An error occurred:', error);
});

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

Заключение

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

Мы рассмотрели современные технологии и продемонстрировали примеры из реальной жизни с использованием ответов JSON и API. Надеемся, статья вам понравилась и спасибо, что прочитали.