{"draftJsState":{"blocks":[{"data":{"image":{"id":"6479158e96633a4a7208d2b4"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"dvo32"},{"data":{},"depth":0,"entityRanges":[{"key":0,"length":22,"offset":10}],"inlineStyleRanges":[],"text":"Источник: Nuances of Programming","type":"unstyled","key":"e1mf6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"1. Продвинутые типы","type":"header-three","key":"chf66"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Продвинутые типы в TypeScript, такие как сопоставленные (mapped types) и условные (conditional types), позволяют создавать новые типы на основе существующих. Эта особенность помогает эффективно преобразовывать типы и манипулировать ими, повышая гибкость кода и упрощая его сопровождение.","type":"unstyled","key":"dtgr"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":19,"offset":0,"style":"BOLD"}],"text":"Сопоставленные типы","type":"header-three","key":"8slqp"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Сопоставленные типы выполняют перебор свойств существующего типа и применяют преобразование для создания нового типа. Одним из распространенных случаев их использования является создание версии типа read-only.","type":"unstyled","key":"as77q"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"type Readonly = {\n readonly [P in keyof T]: T[P];\n};\n\ninterface Point {\n x: number;\n y: number;\n}\n\ntype ReadonlyPoint = Readonly;","type":"blockquote","key":"1ua6u"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"В этом примере определяем сопоставленный тип Readonly, который принимает тип T в качестве обобщенного параметра и делает все его свойства доступными только для чтения (read-only). Затем создаем тип ReadonlyPoint на основе Point-интерфейса, где все свойства доступны только для чтения.","type":"unstyled","key":"2rim5"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":13,"offset":0,"style":"BOLD"}],"text":"Условные типы","type":"header-three","key":"duju1"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Условные типы позволяют создать новый тип на основе условия. Синтаксис аналогичен тернарному оператору с использованием ключевого слова extends в качестве ограничения типа.","type":"unstyled","key":"bf5aq"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"type NonNullable = T extends null | undefined ? never : T;","type":"blockquote","key":"ogn4"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"В этом примере определяем условный тип NonNullable, который принимает тип T и проверяет, расширяет ли он null или undefined. Если да, то результирующим типом будет never, в противном случае это будет исходный тип T.","type":"unstyled","key":"3s0tp"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Дополним пример с продвинутыми типами, включив него больше демонстраций юзабилити и выводов.","type":"unstyled","key":"du8cp"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"interface Point {\n x: number;\n y: number;\n}\n\ntype ReadonlyPoint = Readonly;\n\nconst regularPoint: Point = {\n x: 5,\n y: 10\n};\n\nconst readonlyPoint: ReadonlyPoint = {\n x: 20,\n y: 30\n};\nregularPoint.x = 15; // Это работает, так как 'x' является изменяемым в интерфейсе 'Point'\nconsole.log(regularPoint); // Вывод: { x: 15, y: 10 }\n\n// readonlyPoint.x = 25; // Ошибка: Невозможно присвоить 'x', так как это свойство доступно только для чтения\nconsole.log(readonlyPoint); // Вывод: { x: 20, y: 30 }\n\nfunction movePoint(p: Point, dx: number, dy: number): Point {\n return { x: p.x + dx, y: p.y + dy };\n}\n\nconst movedRegularPoint = movePoint(regularPoint, 3, 4);\nconsole.log(movedRegularPoint); // Вывод: { x: 18, y: 14 }\n\n// const movedReadonlyPoint = movePoint(readonlyPoint, 3, 4); // Ошибка: Аргумент типа 'ReadonlyPoint' нельзя присвоить параметру типа 'Point'","type":"blockquote","key":"7rsdp"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Этот пример показывает использование сопоставленного типа Readonly и то, как он обеспечивает неизменяемость. Создаем изменяемый объект Point и объект ReadonlyPoint, доступный только для чтения. Показываем, что попытка изменить свойство read-only приводит к ошибке компиляции. Также демонстрируем, что типы, доступные только для чтения, не могут использоваться там, где ожидается использование изменяемых типов, что предотвращает непреднамеренные побочные эффекты в коде.","type":"unstyled","key":"47a0n"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"2. Декораторы","type":"header-three","key":"c218d"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Декораторы в TypeScript — это эффективные функции, позволяющие добавлять метаданные, изменять и расширять поведение классов, методов, свойств и параметров. Это функции высшего порядка, которые можно использовать для наблюдения, изменения и замены определений классов, методов, аксессоров, свойств и параметров.","type":"unstyled","key":"96e3m"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":18,"offset":0,"style":"BOLD"}],"text":"Декораторы классов","type":"header-three","key":"1qldk"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Декораторы классов применяются к конструктору класса и могут быть использованы для изменения и расширения определения класса.","type":"unstyled","key":"op2r"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"function LogClass(target: Function) {\n console.log(`Class ${target.name} was defined.`);\n}\n\n@LogClass\nclass MyClass {\n constructor() {}\n}","type":"blockquote","key":"7olak"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"В этом примере определяем декоратор класса под названием LogClass, который логгирует имя декорируемого класса при его определении. Затем применяем декоратор к классу MyClass, используя синтаксис @.","type":"unstyled","key":"54t66"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":18,"offset":0,"style":"BOLD"}],"text":"Декораторы методов","type":"header-three","key":"efltp"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Декораторы методов применяются к методу класса и могут быть использованы для изменения и расширения определения метода.","type":"unstyled","key":"9i5sg"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"function LogMethod(target: any, key: string, descriptor: PropertyDescriptor) {\n console.log(`Method ${key} was called.`);\n}\n\nclass MyClass {\n @LogMethod\n myMethod() {\n console.log(\"Inside myMethod.\");\n }\n}\n\nconst instance = new MyClass();\ninstance.myMethod();","type":"blockquote","key":"1728e"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"В этом примере определяем декоратор метода под названием LogMethod, который логгирует имя декорированного метода при его вызове. Затем применяем декоратор к методу myMethod класса MyClass, используя синтаксис @.","type":"unstyled","key":"1b2h5"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":18,"offset":0,"style":"BOLD"}],"text":"Декораторы свойств","type":"header-three","key":"7oovi"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Декораторы свойств применяются к свойству класса и могут быть использованы для изменения и расширения определения свойства.","type":"unstyled","key":"8eq9h"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"function DefaultValue(value: any) {\n return (target: any, key: string) => {\n target[key] = value;\n };\n}\n\nclass MyClass {\n @DefaultValue(42)\n myProperty: number;\n}\n\nconst instance = new MyClass();\nconsole.log(instance.myProperty); // Вывод: 42","type":"blockquote","key":"7p7bj"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"В этом примере определяем декоратор свойства под названием DefaultValue, который устанавливает значение по умолчанию для декорируемого свойства. Затем применяем декоратор к свойству myProperty класса MyClass, используя синтаксис @.","type":"unstyled","key":"qps3"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":21,"offset":0,"style":"BOLD"}],"text":"Декораторы параметров","type":"header-three","key":"6nfge"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Декораторы параметров применяются к параметру метода или конструктора и могут быть использованы для изменения и расширения определения параметра.","type":"unstyled","key":"5hn5e"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"function LogParameter(target: any, key: string, parameterIndex: number) {\n console.log(`Parameter at index ${parameterIndex} of method ${key} was called.`);\n}\n\nclass MyClass {\n myMethod(@LogParameter value: number) {\n console.log(`Inside myMethod with value ${value}.`);\n }\n}\n\nconst instance = new MyClass();\ninstance.myMethod(5);","type":"blockquote","key":"a7j21"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"В этом примере определяем декоратор параметров под названием LogParameter, который логгирует индекс и имя декорированного параметра при вызове метода. Затем применяем декоратор к параметру value метода myMethod класса MyClass, используя синтаксис @.","type":"unstyled","key":"29l4d"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"3. Пространства имен","type":"header-three","key":"67dtv"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Пространства имен в TypeScript — это способ организации и группировки связанного кода. Они помогают избежать столкновения имен и способствуют модульности, инкапсулируя связанный код. Пространства имен могут содержать классы, интерфейсы, функции, переменные и другие пространства имен.","type":"unstyled","key":"6k2nu"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":28,"offset":0,"style":"BOLD"}],"text":"Определение пространств имен","type":"header-three","key":"1jfog"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Чтобы определить пространство имен, используйте ключевое слово namespace, за которым следует имя пространства имен. Затем можно добавить любой связанный код внутри фигурных скобок.","type":"unstyled","key":"am3dv"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"namespace MyNamespace {\n export class MyClass {\n constructor(public value: number) {}\n\ndisplayValue() {\n console.log(`The value is: ${this.value}`);\n }\n }\n}","type":"blockquote","key":"djp9m"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"В этом примере определяем пространство имен MyNamespace и добавляем в него класс MyClass. Учтите, что ключевое слово export используется, чтобы сделать класс доступным за пределами пространства имен.","type":"unstyled","key":"ebpop"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":27,"offset":0,"style":"BOLD"}],"text":"Применение пространств имен","type":"header-three","key":"b2vbt"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Чтобы применить код из пространства имен, можно либо использовать полностью определенное имя, либо импортировать код с помощью импорта пространства имен.","type":"unstyled","key":"8vduh"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"// Использование полностью определенного имени \nconst instance1 = new MyNamespace.MyClass(5);\ninstance1.displayValue(); // Вывод: Значение - 5\n\n// Использование импорта пространства имен\nimport MyClass = MyNamespace.MyClass;\n\nconst instance2 = new MyClass(10);\ninstance2.displayValue(); // Вывод: Значение - 10","type":"blockquote","key":"cjj0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Этот пример демонстрирует два способа использования класса MyClass из пространства имен MyNamespace. В первом случае используем полностью определенное имя MyNamespace.MyClass. Во втором — применяем оператор импорта пространства имен, чтобы импортировать класс MyClass и использовать его с более коротким именем.","type":"unstyled","key":"6hqjr"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":27,"offset":0,"style":"BOLD"}],"text":"Вложенные пространства имен","type":"header-three","key":"7tjg0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Пространства имен могут быть вложенными для создания иерархии и дальнейшей организации кода.","type":"unstyled","key":"9qpj9"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"namespace OuterNamespace {\n export namespace InnerNamespace {\n export class MyClass {\n constructor(public value: number) {}\n\ndisplayValue() {\n console.log(`The value is: ${this.value}`);\n }\n }\n }\n}\n\n// Использование полностью определенного имени \nconst instance = new OuterNamespace.InnerNamespace.MyClass(15);\ninstance.displayValue(); // Вывод: Значение - 15","type":"blockquote","key":"23pch"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"В этом примере определяем вложенное пространство имен InnerNamespace внутри OuterNamespace. Затем определяем класс MyClass внутри вложенного пространства имен и используем его с полным именем OuterNamespace.InnerNamespace.MyClass.","type":"unstyled","key":"e715i"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"4. Миксины","type":"header-three","key":"3gm05"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Миксины в TypeScript — это способ компоновки классов из нескольких небольших частей, называемых классами-миксинами. Они обеспечивают повторное и совместное использование поведения различных классов, способствуя модульности и повышению уровня повторного использования кода.","type":"unstyled","key":"41q13"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":20,"offset":0,"style":"BOLD"}],"text":"Определение миксинов","type":"header-three","key":"6c8i2"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Чтобы определить класс-миксин, создайте класс, который расширяет параметр обобщенного типа с помощью сигнатуры конструктора. Это позволяет комбинировать класс-миксин с другими классами.","type":"unstyled","key":"59i06"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"class TimestampMixin any>(Base: TBase) {\n constructor(...args: any[]) {\n super(...args);\n }\n\ngetTimestamp() {\n return new Date();\n }\n}","type":"blockquote","key":"bbn4v"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"В этом примере определяем класс-миксин под названием TimestampMixin, который добавляет метод getTimestamp, возвращающий текущую дату и время. Класс-миксин расширяет параметр обобщенного типа TBase с помощью сигнатуры конструктора, что позволяет комбинировать его с другими классами.","type":"unstyled","key":"gjiv"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":22,"offset":0,"style":"BOLD"}],"text":"Использование миксинов","type":"header-three","key":"avch4"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Чтобы использовать класс-миксин, определите базовый класс и примените к нему класс-миксин с помощью ключевого слова extends.","type":"unstyled","key":"c78p8"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"class MyBaseClass {\n constructor(public value: number) {}\n\ndisplayValue() {\n console.log(`The value is: ${this.value}`);\n }\n}\n\nclass MyMixedClass extends TimestampMixin(MyBaseClass) {\n constructor(value: number) {\n super(value);\n }\n}","type":"blockquote","key":"7ffmg"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"В этом примере определяем базовый класс MyBaseClass методом displayValue. Затем создаем новый класс MyMixedClass, который расширяет базовый класс и применяет к нему класс-миксин TimestampMixin.","type":"unstyled","key":"5tln9"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Теперь продемонстрируем, как класс-миксин работает на практике.","type":"unstyled","key":"d9081"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"const instance = new MyMixedClass(42);\ninstance.displayValue(); // Вывод: Значение - 42\nconst timestamp = instance.getTimestamp();\nconsole.log(`The timestamp is: ${timestamp}`); // Вывод: Временная метка - [текущая дата и время]","type":"blockquote","key":"dk2d6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"В этом примере создаем экземпляр класса MyMixedClass, который включает метод displayValue из класса MyBaseClass и метод getTimestamp из класса-миксина TimestampMixin. Затем вызываем оба метода и отображаем их выводы.","type":"unstyled","key":"d501p"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"5. Предохранители типов","type":"header-three","key":"3vakk"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Предохранители типов в TypeScript — это способ сузить тип переменной или параметра в определенном блоке кода. Они позволяют дифференцировать различные типы и получать доступ к свойствам и методам, специфичным для этих типов, обеспечивая безопасность типов и снижая вероятность ошибок во время выполнения.","type":"unstyled","key":"alenk"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":33,"offset":0,"style":"BOLD"}],"text":"Определение предохранителей типов","type":"header-three","key":"emspu"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Чтобы определить предохранитель типа, создайте функцию, которая принимает переменную или параметр и возвращает предикат типа. Предикат типа — это булево выражение, которое сужает тип параметра в пределах области видимости функции.","type":"unstyled","key":"7ca80"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"function isString(value: any): value is string {\n return typeof value === \"string\";\n}","type":"blockquote","key":"brb28"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"В этом примере определяем функцию предохранителя типа isString, которая проверяет, является ли заданное значение типом string. Функция возвращает предикат типа value is string, который сужает тип параметра value в пределах области видимости функции.","type":"unstyled","key":"boae6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":35,"offset":0,"style":"BOLD"}],"text":"Использование предохранителей типов","type":"header-three","key":"ebm3l"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Чтобы использовать предохранитель типа, просто вызовите функцию предохранителя типа в условном операторе, например в if и switch.","type":"unstyled","key":"6t2ro"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"function processValue(value: string | number) {\n if (isString(value)) {\n console.log(`The length of the string is: ${value.length}`);\n } else {\n console.log(`The square of the number is: ${value * value}`);\n }\n}","type":"blockquote","key":"8ucru"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"В этом примере определяем функцию processValue , которая принимает значение типа string | number. Используем функцию предохранителя типа isString, чтобы проверить, является ли значение строкой. Если это так, обращаемся к свойству length, характерному для string типа. В противном случае принимаем значение за number и вычисляем его квадрат.","type":"unstyled","key":"bv01e"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Теперь продемонстрируем, как работает предохранитель типа на практике.","type":"unstyled","key":"fg1ej"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"processValue(\"hello\"); // Вывод: Длина строки - 5\nprocessValue(42); // Вывод: Квадрат числа равен 1764","type":"blockquote","key":"9630j"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"В этом примере вызываем функцию processValue как со строкой, так и с числом. Функция предохранителя типа isString обеспечивает выполнение соответствующего блока кода для каждого типа, что позволяет получить доступ к свойствам и методам, специфичным для конкретного типа, без ошибок типа.","type":"unstyled","key":"81qo7"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"6. Утилитные типы","type":"header-three","key":"8vlh9"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Утилитные типы в TypeScript обеспечивают удобный способ преобразования существующих типов в новые. Они позволяют создавать более сложные и гибкие типы без необходимости определять их с нуля, что способствует повышению уровня повторного использования кода и безопасности типов.","type":"unstyled","key":"j7u"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":29,"offset":0,"style":"BOLD"}],"text":"Использование утилитных типов","type":"header-three","key":"8ommm"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Чтобы использовать утилитный тип, примените его к существующему типу с помощью синтаксиса угловых скобок. TypeScript предоставляет множество встроенных утилитных типов, таких как Partial, Readonly, Pick и Omit.","type":"unstyled","key":"p8b9"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"interface Person {\n name: string;\n age: number;\n email: string;\n}\n\ntype PartialPerson = Partial;\ntype ReadonlyPerson = Readonly;\ntype NameAndAge = Pick;\ntype WithoutEmail = Omit;","type":"blockquote","key":"4bpid"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"В этом примере определяем интерфейс под названием Person с тремя свойствами: name, age и email. Затем используем различные встроенные утилитные типы для создания новых типов на основе интерфейса Person.","type":"unstyled","key":"5je9i"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Теперь продемонстрируем, как утилитные типы работают на практике.","type":"unstyled","key":"c0kdj"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":8,"offset":0,"style":"BOLD"}],"text":"Partial:","type":"unstyled","key":"afqks"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"const partialPerson: PartialPerson = {\n name: \"John Doe\",\n};","type":"blockquote","key":"30cqg"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"В этом примере создаем объект partialPerson типа PartialPerson. Утилитный тип Partial делает все свойства интерфейса Person опциональными, что позволяет создать partial person только со свойством name.","type":"unstyled","key":"a1nls"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":9,"offset":0,"style":"BOLD"}],"text":"Readonly:","type":"unstyled","key":"fh93"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"const readonlyPerson: ReadonlyPerson = {\n name: \"Jane Doe\",\n age: 30,\n email: \"jane@example.com\",\n};\n\n// readonlyPerson.age = 31; // Ошибка: Невозможно присвоить 'age', потому что это свойство доступно только для чтения","type":"blockquote","key":"prt7"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"В этом примере создаем объект readonlyPerson типа ReadonlyPerson. Утилитный тип Readonly делает все свойства интерфейса Person доступными только для чтения, не позволяя изменить свойство age.","type":"unstyled","key":"69q72"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":5,"offset":0,"style":"BOLD"}],"text":"Pick:","type":"unstyled","key":"899o1"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"const nameAndAge: NameAndAge = {\n name: \"John Smith\",\n age: 25,\n};\n\n// nameAndAge.email; // Ошибка: Свойство 'email' не существует для типа 'Pick'","type":"blockquote","key":"c9cb0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"В этом примере создаем объект nameAndAge типа NameAndAge. Утилитный тип Pick создает новый тип, содержащий только указанные свойства интерфейса Person, в данном случае name и age.","type":"unstyled","key":"4dmu4"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":5,"offset":0,"style":"BOLD"}],"text":"Omit:","type":"unstyled","key":"13jhj"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"const withoutEmail: WithoutEmail = {\n name: \"Jane Smith\",\n age: 28,\n};\n\n// withoutEmail.email; // Error: Property 'email' does not exist on type 'Omit'","type":"blockquote","key":"4ti90"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"В этом примере создаем объект withoutEmail типа WithoutEmail. Утилитный тип Omit создает новый тип, удаляя указанные свойства из интерфейса Person, в данном случае email.","type":"unstyled","key":"erlsj"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Мы рассмотрели такие расширенные средства TypeScript, такие как пространства имен, продвинутые типы, декораторы, миксины, предохранители типов и утилитные типы. Понимание и использование этих возможностей позволяет создавать более модульный, многократно используемый и легко сопровождаемый код, который соответствует лучшим практикам и снижает вероятность ошибок во время выполнения.","type":"unstyled","key":"1p2br"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Используя эти расширенные возможности TypeScript, вы сможете писать более чистый, организованный и легко сопровождаемый код, который в полной мере использует преимущества мощной системы типов и возможностей языка TypeScript.","type":"unstyled","key":"7qt15"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Читайте также:","type":"unstyled","key":"blsr7"},{"data":{},"depth":0,"entityRanges":[{"key":1,"length":28,"offset":0}],"inlineStyleRanges":[],"text":"Нужны ли нам веб-компоненты?","type":"unordered-list-item","key":"3pqn1"},{"data":{},"depth":0,"entityRanges":[{"key":2,"length":65,"offset":0}],"inlineStyleRanges":[],"text":"Как написать тест-раннер в 80 строк кода на JavaScript/TypeScript","type":"unordered-list-item","key":"9j4s0"},{"data":{},"depth":0,"entityRanges":[{"key":3,"length":77,"offset":0}],"inlineStyleRanges":[],"text":"Как использовать ESLint, чтобы повысить качество кода JavaScript и TypeScript","type":"unordered-list-item","key":"8r0ui"},{"data":{},"depth":0,"entityRanges":[{"key":4,"length":8,"offset":14},{"key":5,"length":2,"offset":24}],"inlineStyleRanges":[],"text":"Читайте нас в Telegram, VK","type":"unstyled","key":"9i32n"},{"data":{},"depth":0,"entityRanges":[{"key":6,"length":22,"offset":15},{"key":7,"length":43,"offset":39}],"inlineStyleRanges":[{"length":14,"offset":0,"style":"ITALIC"}],"text":"Перевод статьи Marcos Vinicius Gouvea: 6 Advanced TypeScript tricks for Clean Code","type":"unstyled","key":"9f2h1"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"marker","key":"04eO5MvPHiR7ehJjIpjt"}],"entityMap":{"0":{"data":{"url":"https://nuancesprog.ru/p/17487/"},"mutability":"MUTABLE","type":"LINK"},"1":{"data":{"href":"https://nuancesprog.ru/p/17454/","url":"https://nuancesprog.ru/p/17454/"},"mutability":"MUTABLE","type":"LINK"},"2":{"data":{"href":"https://nuancesprog.ru/p/16522/","url":"https://nuancesprog.ru/p/16522/"},"mutability":"MUTABLE","type":"LINK"},"3":{"data":{"href":"https://nuancesprog.ru/p/16546/","url":"https://nuancesprog.ru/p/16546/"},"mutability":"MUTABLE","type":"LINK"},"4":{"data":{"href":"https://t.me/nuancesprog","url":"https://t.me/nuancesprog"},"mutability":"MUTABLE","type":"LINK"},"5":{"data":{"href":"https://vk.com/nuancesprog","url":"https://vk.com/nuancesprog"},"mutability":"MUTABLE","type":"LINK"},"6":{"data":{"href":"https://medium.com/@mvsg","url":"https://medium.com/@mvsg"},"mutability":"MUTABLE","type":"LINK"},"7":{"data":{"href":"https://medium.com/@mvsg/6-advanced-typescript-tricks-for-clean-code-90cee774dbf3","url":"https://medium.com/@mvsg/6-advanced-typescript-tricks-for-clean-code-90cee774dbf3"},"mutability":"MUTABLE","type":"LINK"}}},"mentions":[]}