Вещи, которые я узнал на 4-й день…
Вещи, которые я узнал сегодня:
- Буквенные типы
- Расширение типов
- Типы пересечений (&)
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!
Всех люблю и берегу.
До свидания…😁👋
Ресурсы, которые я использовал для изучения и написания этого блога:
- Буквальные типы — https://www.typescriptlang.org/docs/handbook/2/everyday-types.html
- Расширение и Типы пересечений — https://www.typescriptlang.org/docs/handbook/2/objects.html