Рубрики
Без рубрики

Учебное пособие для начинающих: Пропавшее руководство – Часть 4

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

Только что пересек 5к последователя на dev.to! Всем спасибо! Какое фантастическое сообщество! Кто тоже в Твиттере? Давайте подключимся => Я здесь Анкет

Что такое TypeScript и почему вы можете его использовать? Узнайте больше с этим учебником для начинающих и начните добавлять типы в свой код JavaScript!

Первоначально опубликовано на valentinog.com/blog

В этом эпизоде:

  • Типовые псевдонимы против интерфейсов
  • Подробнее о интерфейсах
  • Выводы и ресурсы

Учебное пособие для начинающих: типовые псевдонимы против интерфейсов

До сих пор мы видели Интерфейс как инструмент для описания объектов и пользовательских типов Анкет Но скрываясь через код других людей, вы также могли бы заметить ключевое слово Тип Анкет

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

Помните: Интерфейс В TypeScript – это форма чего -то, в большинстве случаев сложный объект.

A Тип С другой стороны, также можно использовать для описания пользовательской формы, но это просто псевдоним , или по -другому, а метка для пользовательского типа . Например, давайте представим интерфейс с парой полей, одним из них является Тип союза логического, числа и строки:

interface IExample {
  authenticated: boolean | number | string;
  name: string;
}

С Тип псевдоним Например, вы можете извлечь этот пользовательский тип союза и создать метку с именем Аутентифицированный :

type Authenticated = boolean | number | string;

interface IExample {
  authenticated: Authenticated;
  name: string;
}

Таким образом, вы можете изолировать, что меняется , поэтому вам не нужно копировать/вставить тип союза по всей базе Code.

Если вы хотите подать заявку Тип На наш пример (Filterbyterm) Создайте новый ярлык с именем Ilinks и присвоить массиву. Таким образом, вы можете ссылаться на первое, а не более длинную схему:

// the new label
type ILinks = Array;
// the new label

function filterByTerm(
  input: ILinks,
  searchTerm: string,
  lookupKey: string = "url"
): ILinks {
  if (!searchTerm) throw Error("searchTerm cannot be empty");
  if (!input.length) throw Error("input cannot be empty");
  const regex = new RegExp(searchTerm, "i");
  return input.filter(function(arrayElement) {
    return arrayElement[lookupKey].match(regex);
  });
}

const obj1: ILink = { url: "string1" };
const obj2: ILink = { url: "string2" };
const obj3: ILink = { url: "string3" };

const arrOfLinks: ILinks = [obj1, obj2, obj3];

filterByTerm(arrOfLinks, "string3");

Теперь, это не самый умный пример типов маркировки, но вы должны понять. Так что использовать между интерфейс и Тип ? Я предпочитаю Интерфейс для сложных объектов. Подход, предложенный TypeScript Doc также :

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

Надеюсь, это помогло прояснить ваши сомнения.

В следующем разделе мы быстро рассмотрим еще две темы типографии, прежде чем попрощаться. Продолжать идти!

Учебное пособие для начинающих: подробнее о интерфейсах и объектах

Функции являются гражданами первого класса в JavaScript, но Объект является наиболее важной сущностью в языке Анкет

Объекты в основном являются контейнерами для паров ключей/значений, и для вас не должно быть удивления, что они также могут выполнять функции. Когда функция живет внутри объекта, он имеет доступ к объекту «хост» через ключевое слово это :

const tom = {
  name: "Tom",
  city: "Munich",
  age: 33,
  printDetails: function() {
    console.log(`${this.name} - ${this.city}`);
  }
};

Если вам нужен переподготовка на «This», проверьте Это в JavaScript Из маленькой книги JavaScript.

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

const tom = {
  name: "Tom",
  city: "Munich",
  age: 33,
  printDetails: function() {
    console.log(`${this.name} - ${this.city}`);
  }
};

Это объект JavaScript, но ему нужны типы. Давайте сделаем интерфейс, чтобы Том соответствовал четко определенной форме. Как насчет “Иперсона”? И пока давайте также применим новый интерфейс к Тому:

interface IPerson {
  name: string;
  city: string;
  age: number;
}

const tom: IPerson = {
  name: "Tom",
  city: "Munich",
  age: 33,
  printDetails: function() {
    console.log(`${this.name} - ${this.city}`);
  }
};

Скомпилируйте код (NPM запустить TSC) и посмотрите, как он не удастся:

interfaces-functions.ts:11:3 - error TS2322: Type '{ name: string; city: string; age: number; printDetails: () => void; }' is not assignable to type 'IPerson'.
  Object literal may only specify known properties, and 'printDetails' does not exist in type 'IPerson'.

Круто, у Iperson нет имущества с именем printdetails, но более важно это функция. К счастью Интерфейсы TypeScript также могут описывать функции Анкет Вот как:

interface IPerson {
  name: string;
  city: string;
  age: number;
  printDetails(): void;
}

Здесь мы добавили свойство PrintDetails функции типа, возвращая void Анкет пустота Полезно в качестве возвращаемого значения для функций, которые … вообще ничего не возвращают.

Функция, которая печатает на консоль на самом деле, ничего не возвращает. Если бы мы вернули строку из PrintDetails, мы могли бы настроить тип возврата на строку:

interface IPerson {
  name: string;
  city: string;
  age: number;
  printDetails(): string;
}

const tom: IPerson = {
  name: "Tom",
  city: "Munich",
  age: 33,
  printDetails: function() {
    return `${this.name} - ${this.city}`;
  }
};

А что, если Функция имеет параметры ? В интерфейсе вы можете добавить для них аннотации типа:

interface IPerson {
  name: string;
  city: string;
  age: number;
  printDetails(): string;
  anotherFunc(a: number, b: number): number;
}

И если вы начнете печатать «…» внутри объекта, реализующего Iperson, большинство IDE автоматически выполнит функцию для вас. Производительность разработчика во всей красе.

Чего не хватает в этом руководстве?

По очевидным причинам я не мог осветить каждую функцию TypeScript здесь. Например, я намеренно оставил Классы ES2015 и их связь с интерфейсами или более продвинутые типы, такие как Частично Анкет

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

Выводы и ресурсы

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

В этом учебном пособии, который вы выучили:

  • Тип аннотации для переменных, Параметры функции и возвращаемые значения
  • интерфейсы
  • пользовательские типы
  • Тип псевдонимов

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

Если вы хотите оставаться в курсе эволюции TypeScript, я предлагаю следуя за парой блогов:

Официальный Блог TypeScript Где вы можете узнать о новых выпусках и функциях.

Блог Мариус Шульц , инженер -программист, увлеченный всеми типографией. Он также управляет еженедельной рассылкой TypeScript.

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

Еще раз спасибо за чтение и следите за обновлениями!

Оригинал: “https://dev.to/valentinogagliardi/typescript-tutorial-for-beginners-the-missing-guide-part-4-17dk”

Читайте ещё по теме: