Здравствуй, Любопытный Кот!
Если вы похожи на меня и какое-то время программировали на Javascript, вы, вероятно, слышали шёпот об этом загадочном языке…
TypeScript.
Что это такое? Зачем тебе сейчас это знать? Это даст вам работу? Почему требования к программистам постоянно растут? Ну, это быстро меняющийся мир, детка! Пристегнитесь, и мы узнаем, является ли TypeScript вашим типом языка!
Typescript — это JavaScript с дополнительными наворотами.
Вы правильно поняли. Typescript идентичен Javascript с некоторыми дополнительными функциями, облегчающими вашу жизнь.
Это полностью открытый язык, созданный Microsoft. TypeScript позволяет программисту устанавливать и контролировать типы данных различных значений, отсюда и название.
Основы
На самом базовом уровне TypeScript позволяет вам присвоить тип переменной при ее первом объявлении.
Что произойдет в JavaScript, если вы объявите переменную и установите для нее строковый тип данных, а затем случайно переназначите эту же переменную числовому типу данных? Теперь вы изменили тип данных вашей переменной, хотели вы этого или нет. Это не всегда плохо, но в зависимости от того, как вы будете использовать эту переменную позже, это может привести к ошибкам.
let name = 'Brandon; name = 17;
TypeScript позволяет вам устанавливать типы, которые позволяют вашему коду работать более строго и предотвращают ошибки в будущем.
let name: 'string' = 'Brandon'; name = 17; //error
Теперь мы использовали TypeScript, чтобы установить тип данных значения имени, чтобы разрешить только «строки». Повторное присвоение переменной имени любому другому типу данных мгновенно регистрирует сообщение об ошибке.
Изменение имени на число или любой другой тип данных, кроме строки, приведет к ошибке.
Я уверен, что вы уже начинаете понимать, как эта небольшая функциональность может помочь вам в отладке, но давайте копнем немного глубже, чтобы увидеть некоторые часто используемые функции, которые может предложить Typescript.
Интерфейсы
Интерфейсы можно использовать в качестве функций-конструкторов для создания объекта (интерфейса), где каждой клавише назначен тип значения, которое она в конечном итоге примет. Таким образом, вы никогда не отправите/сохраните данные, которые вы не собирались делать. Данные будут вводиться только в том случае, если они находятся в пределах заданных вами параметров интерфейса. Интерфейсы определяют синтаксис, которому должен следовать класс.
Интерфейсы полезны, потому что вы можете указать типы данных, которые вы хотите получить, и какие у вас есть ключи.
Интерфейсы гарантируют, что все реализовано так, как ожидалось.
Interface FullName {
firstName: string;
lastName: string;
age: number;
Выше вы можете видеть, что мы создали интерфейс под названием FullName. Ожидается, что он примет строку dataType для имени и фамилии и числовой тип данных для возраста. Если в наш интерфейс будет введено что-либо, отличное от этих типов данных, компилятор выдаст ошибку.
const brandon: FullName{
firstName: 'Brandon';
lastName: 'Segelke';
age: 'thirty-one'; //error
Мы можем использовать этот интерфейс снова и снова. Если вы принимаете много пользовательских данных, это может быть очень удобно для быстрого поиска ошибки.
Интерфейсы также имеют некоторые дополнительные функции, такие как Только чтение.
const brandon: FullName{
readonly firstName: 'Brandon';
readonly lastName: 'Segelke';
age: 31;
ReadOnly, позволяет присваивать значение только при первом их объявлении. firstName и lastName теперь никогда не могут быть переназначены, свойство age по-прежнему может быть обновлено.
Буквенные типы
Буквенные типы позволяют нам еще более точно определить тип данных, которые мы используем, и то, где мы их используем. Например, у нас может быть функция, которая будет принимать строку в качестве параметра, и мы можем установить тип этого параметра как строку, поэтому теперь он должен быть строкой (безопасность стандартного типа), а затем мы можем сделать так, чтобы она принимала только одна или несколько очень конкретных строк.
function greet(message: string, name: "Brandon" | "Bodhi" ){
//...
}
greet("Hello", "Brandon" );
greet("Hey", "Bodhi");
greet("Hey", "Larry"); // Argument of type '"Larry"' is not assignable to parameter of type '"Brandon" | "Bodhi"'.
Поскольку мы не указали третий литерал типа max, если мы попытаемся запустить функцию max, она не сработает.
Эти особенности позволяют нам оттачивать и предотвращать ошибки.
Основное преимущество машинописного текста заключается в том, что он может выделить неожиданное поведение в вашем коде, тем самым снижая вероятность ошибок.
VScode фактически использует машинописный текст за кулисами, чтобы пользователи, кодирующие javascript, могли вносить предложения.
Типы композиций
В typescript вы даже можете создавать новые типы, комбинируя несколько простых типов данных, это можно сделать двумя способами: Unions и Generics.
Союзы
Объединения позволяют вам объявить часть данных как несколько типов, вы можете объявить bool как true | ЛОЖЬ.
Вы можете использовать объединения, чтобы установить тип для нескольких строк или нескольких чисел.
Type numbers = 1 | 2 | 3 | 4 | 5; Type favColors = 'blue' | 'red' | 'green';
Дженерики
Обобщения могут предоставлять переменные типам.
Если вы объявляете переменную или объект, он может содержать внутри себя любой тип,
Но если вы объявите дженерики заранее, вы всегда будете знать и контролировать данные, которые он хранит и принимает.
Let numbersArray = Array<number>
Здесь мы назначаем новый массив с числовым типом, теперь этот массив не может хранить или принимать данные, которые не являются числами.
Здесь он используется для создания объекта со свойством name, который может принимать только строковое значение для этого свойства.
type ObjectWithNameArray = Array<{ name: string }>;
Я уверен, что вы уже можете представить, как все эти новые функции могут помочь предотвратить появление ошибок в будущем.
Последнее, что я коснусь, это
Системы структурного типа
TypeScript опирается на структурные системы типов, что позволяет ему автоматически устанавливать и определять типы для вас.
Эта функция основана на сравнении «формы» двух значений, и, если они достаточно похожи, другой унаследует тип другого.
Если два объекта имеют одинаковую форму, им будет присвоен один и тот же тип.
interface Point {
x: number;
y: number;
}
function logPoint(p: Point) {
console.log(`${p.x}, ${p.y}`);
}
// logs "12, 26"
const point = { x: 12, y: 26 };
logPoint(point);
const point3 = { x: 12, y: 26, z: 89 };
logPoint(point3); // logs "12, 26"
const rect = { x: 33, y: 3, width: 30, height: 80 };
logPoint(rect); // logs "33, 3"
const color = { hex: "#187ABF" };
logPoint(color);
Argument of type '{ hex: string; }' is not assignable to parameter of type 'Point'.
Type '{ hex: string; }' is missing the following properties from type 'Point': x, y
Я надеюсь, что теперь вы чувствуете себя более уверенно с TypeScript! Теперь выходите и делайте меньше ошибок в коде!
Ссылки, использованные при написании этой статьи:
https://www.contentful.com/blog/what-is-typescript-and-why-should-you-use-it/
https://www.typescriptlang.org/play#example/structural-typing
