Вещи, которые я узнал на 4-й день…

Вещи, которые я узнал сегодня:

  1. Буквенные типы
  2. Расширение типов
  3. Типы пересечений (&)

1. Литеральные типы

  • Буквенные типы можно использовать для преобразования ваших изменяемых или изменяемых переменных в неизменяемые.
  • Литеральные типы используются для создания определенных строк или чисел или любых типов в качестве типа переменной. Посмотрите этот пример, чтобы лучше понять:
    Примечание. Я скопировал каждый пример кода в этом блоге из официальной документации по TypeScript😅, что сэкономило мне много времени.
let x: "hello" = "hello";
// OK
x = "hello";
// ...
x = "howdy"; 
// Type'"howdy"' is not assignable to type '"hello"'.
// '"howdy"' is not assignable to type '"hello"'.
  • В приведенном выше коде вы можете видеть, что x имеет тип “hello” и ему присвоено значение “hello”.
  • По сути, это означает, что переменная x может только иметь тип “hello” и ничего больше!
  • Литеральные типы обеспечивают повышенную безопасность типов за счет ограничения допустимых значений, которые могут быть присвоены переменной или параметру. Это помогает выявить потенциальные ошибки и гарантирует, что будут приняты только предполагаемые значения.
  • Конечно, это может показаться бесполезным для одной переменной.
    Однако подумайте об использовании этого буквального типа с Union и другими типами!
function printText(s: string, alignment: "left" | "right" | "center") {
  // ...
}
printText("Hello, world", "left");
printText("G'day, mate", "centre"); /* Error: Argument of type '"centre"' 
is not assignable to the argument of type '"left" | "right" | "center"'.
  • Проверьте литеральный тип этих аргументов!
    Аргумент alignment принимает только одно из этих трех значений!
  • А теперь другой пример (но с интерфейсом!):
interface Options {
  width: number;
}
function configure(x: Options | "auto") {
  // ...
}
configure({ width: 100 });
configure("auto");
configure("automatic"); /* Error: Argument of type '"automatic"' 
is not assignable to the argument of type 'Options | "auto"'. */

2. Расширение типов

  • Если вы хотите смешать эти свойства interface с другим interface, а также хотите «добавить» дополнительные свойства, используйте ключевое слово extends. Так же, как вы расширяете класс в JavaScript.
  • Ниже приведен пример смешивания двух интерфейсов в один 👇:
interface Colorful {
  color: string;
}
 
interface Circle {
  radius: number;
}
 
interface MixingBoth extends Colorful, Circle {}
 
const cc: MixingBoth = {
  color: "red",
  radius: 42,
};
  • Вы можете добавить свойства, если хотите, в круглых скобках «расширенного» интерфейса.
  • Ниже приведен пример добавления свойства 👇:
interface BasicAddress {
  name?: string;
  street: string;
  city: string;
  country: string;
  postalCode: string;
}
 
interface AddressWithUnit extends BasicAddress {
  unit: string; // new property got inserted here, inside the parentheses.
}
  • Однако вы можете использовать это расширение только для смешивания двух или более интерфейсов и объединения их в один.
  • Но это не рекомендуется, поскольку в TypeScript есть Типы пересечений для этой цели, о которой я расскажу дальше!

3. Типы пересечений (&)

  • Типы пересечения позволяют объединять несколько типов в один, создавая новый тип со всеми объединенными функциями.
  • С другой стороны, расширение типов с помощью интерфейсов позволяет вам наследовать и расширять свойства и методы базового интерфейса, создавая специализированные интерфейсы и выстраивая иерархии.
  • Типы пересечений используют оператор & для объединения типов.
interface Colorful {
  color: string;
}
interface Circle {
  radius: number;
}
 
type ColorfulCircle = Colorful & Circle;

Это итог на сегодня!

Я надеюсь, что вам понравилось читать мой блог. Если да, то не забудьте аплодировать, комментировать и делиться этим блогом со своими друзьями и семьями, которые хотят изучать именно TypeScript!

Всех люблю и берегу.

До свидания…😁👋

Ресурсы, которые я использовал для изучения и написания этого блога: