Вопросы и ответы с собеседований по TypeScript

TypeScript – это надмножество JavaScript, предоставляющее строгую типизацию, поддержку классов и интерфейсов на этапе разработки. Применение TypeScript способствует повышению надёжности программ за счёт недопущения ряда ошибок на этапе кодирования. TypeScript компилируется в JavaScript, так что во время выполнения кода в браузере его уже не существует.

/* .d.ts */ declare class Vector { readonly x: number; readonly y: number; static readonly zero: Vector; constructor(x: number, y: number); add(vector: Vector): Vector; } .d.ts файлы - это файлы декларации типов. Они содержат описание типов без реализации. Например, сигнатуры функций без тела, название и тип глобальных переменных без значений. В основном файлы декларации типов нужны для написания библиотек или при их использовании.

Файлы с расширением .map хранят карты кода (source map), которые содержат данные о соответствии кода, написанного на TypeScript, JavaScript-коду, созданному на его основе. С этим файлами могут работать многие отладчики (например, Visual Studio и инструменты разработчика Chrome). Это позволяет в ходе отладки работать с исходным кодом программ на TypeScript, а не с их JS-эквивалентами.

class CRUD { @cache get() {} post() {} @log delete() {} put() {} } Декораторы используются для расширения поведения функций. Самые распространённые примеры - добавление декоратором возможности логирования или кэширования функции.

class Foo { myMethod(a: string); myMethod(a: number); myMethod(a: number, b: string); myMethod(a: any, b ? : string) { alert(a.toString()); } } TypeScript поддерживает перегрузку функций, но её реализация отличается от той, которую можно видеть в других языках. А именно, описывается лишь одна функция и некоторое количество её объявлений с разными параметрами. Когда такой код компилируется в JavaScript, в нём остаётся лишь одна функция. Этот механизм работает благодаря тому, что JS-функции можно вызывать с любым количеством параметров.

interface X { a: number b: string } type X = { a: number b: string }; В ряде случаев они взаимозаменяемы. Однако, различия присутствуют: - с типами можно использовать пересечение и объединение - интерфейс можно расширять, строя цепочку наследований - интерфейс может быть использован для описания класса - интерфейс может быть использован для описания функции - в случае, если в одной области видимости объявлено несколько одноимённых интерфейсов, они будут объединены в один - если в нескольких одноимённых интерфейсах будут описаны одноимённые методы с разными сигнатурами, они будут расценены, как описание перегрузки. В целом, можно сказать, что ключевое слово type больше подходит для типизации примитивных значений или объектных значений, не являющихся звеньями сложной цепочки. interface же необходим и удобен при осознанном построении объектно-ориентированной архитектуры.

Nullish Coalescing (оператор ??) помогает проверить, является ли переменная null или undefined. С оператором ?? вместо длинной проверки: message = undefined; getMessage() { if (this.message !== null && this.message !== undefined) { return "default message"; } return this.message; } можно написать так: message = undefined; getMessage() { return this.message ?? 'Default message'; }

В TypeScript при объявлении свойств классов нельзя использовать ключевое слово const. Начиная со второй версии TS, можно использовать модификатор readonly, позволяющий объявлять свойства класса, предназначенные только для чтения.

Пространства имен в TypeScript — это способ организации и группировки связанного кода. Они помогают избежать столкновения имен и способствуют модульности, инкапсулируя связанный код. Пространства имен могут содержать классы, интерфейсы, функции, переменные и другие пространства имен. Определение пространств имен Чтобы определить пространство имен, используйте ключевое слово namespace, за которым следует имя пространства имен. Затем можно добавить любой связанный код внутри фигурных скобок. namespace MyNamespace { export class MyClass { constructor(public value: number) {} displayValue() { console.log(`The value is: ${this.value}`); } } } В этом примере определяем пространство имен MyNamespace и добавляем в него класс MyClass. Учтите, что ключевое слово export используется, чтобы сделать класс доступным за пределами пространства имен. Применение пространств имен Чтобы применить код из пространства имен, можно либо использовать полностью определенное имя, либо импортировать код с помощью импорта пространства имен. // Использование полностью определенного имени const instance1 = new MyNamespace.MyClass(5); instance1.displayValue(); // Вывод: Значение - 5 // Использование импорта пространства имен import MyClass = MyNamespace.MyClass; const instance2 = new MyClass(10); instance2.displayValue(); // Вывод: Значение - 10 Этот пример демонстрирует два способа использования класса MyClass из пространства имен MyNamespace. В первом случае используем полностью определенное имя MyNamespace.MyClass. Во втором — применяем оператор импорта пространства имен, чтобы импортировать класс MyClass и использовать его с более коротким именем. Вложенные пространства имен Пространства имен могут быть вложенными для создания иерархии и дальнейшей организации кода. namespace OuterNamespace { export namespace InnerNamespace { export class MyClass { constructor(public value: number) {} displayValue() { console.log(`The value is: ${this.value}`); } } } } // Использование полностью определенного имени const instance = new OuterNamespace.InnerNamespace.MyClass(15); instance.displayValue(); // Вывод: Значение - 15 В этом примере определяем вложенное пространство имен InnerNamespace внутри OuterNamespace. Затем определяем класс MyClass внутри вложенного пространства имен и используем его с полным именем OuterNamespace.InnerNamespace.MyClass.

Предохранители типов в TypeScript — это способ сузить тип переменной или параметра в определенном блоке кода. Они позволяют дифференцировать различные типы и получать доступ к свойствам и методам, специфичным для этих типов, обеспечивая безопасность типов и снижая вероятность ошибок во время выполнения. Определение предохранителей типов Чтобы определить предохранитель типа, создайте функцию, которая принимает переменную или параметр и возвращает предикат типа. Предикат типа — это булево выражение, которое сужает тип параметра в пределах области видимости функции. function isString(value: any): value is string { return typeof value === "string"; } В этом примере определяем функцию предохранителя типа isString, которая проверяет, является ли заданное значение типом string. Функция возвращает предикат типа value is string, который сужает тип параметра value в пределах области видимости функции. Использование предохранителей типов Чтобы использовать предохранитель типа, просто вызовите функцию предохранителя типа в условном операторе, например в if и switch. function processValue(value: string | number) { if (isString(value)) { console.log(`The length of the string is: ${value.length}`); } else { console.log(`The square of the number is: ${value * value}`); } } В этом примере определяем функцию processValue , которая принимает значение типа string | number. Используем функцию предохранителя типа isString, чтобы проверить, является ли значение строкой. Если это так, обращаемся к свойству length, характерному для string типа. В противном случае принимаем значение за number и вычисляем его квадрат. Теперь продемонстрируем, как работает предохранитель типа на практике. processValue("hello"); // Вывод: Длина строки - 5 processValue(42); // Вывод: Квадрат числа равен 1764 В этом примере вызываем функцию processValue как со строкой, так и с числом. Функция предохранителя типа isString обеспечивает выполнение соответствующего блока кода для каждого типа, что позволяет получить доступ к свойствам и методам, специфичным для конкретного типа, без ошибок типа.

type CurrencySign = '₽' | '€' | '£'; const currencySigns: ReadonlyArray<CurrencySign> = ['₽', '€', '£']; Дженерики (Generic Types) — обобщенные типы. Они нужны для описания похожих, но отличающихся какими-то характеристиками типов. Мы описываем общую структуру, а конкретную уже определяет пользователь дженерика. Дженерик — это каркас, внутренности которого заполняет разработчик. Программист, который описывает обобщенный тип, никогда не знает, что именно туда решит записать тот, кто будет этот тип использовать. Посмотрите на пример использования дженериков в TypeScript на листинге кода выше.

type Point = { x: number; y: number }; type P = keyof Point; // type P = “x” | “y” Оператор keyof возвращает в качестве типа перечисление ключей объекта, по отношению к которому он применяется.

interface Todo { title: string; description: string; } function updateTodo(todo: Todo, fieldsToUpdate: Partial<Todo>) { return { ...todo, ...fieldsToUpdate }; } Утилитарный тип Partial<T> позволяет сделать все свойства типа T необязательными. Можно сказать, что он добавит отметку ? рядом с каждым полем.

interface Props { a?: number; b?: string; } const obj: Props = { a: 5 }; const obj2: Required<Props> = { a: 5 }; // Property 'b' is missing in type '{ a: number; }' but required in type 'Required<Props>'. В отличие от Partial утилитарный тип Required<T> принудительно делает все свойства объекта T обязательными.

interface Todo { title: string; description: string; completed: boolean; } type TodoPreview = Pick<Todo, "title" | "completed">; const todo: TodoPreview = { title: "Clean room", completed: false, }; Утилитарный тип Pick<Type, Keys>позволяет создать новый тип, взяв из Type свойства Keys.

interface Todo { title: string; description: string; completed: boolean; createdAt: number; } type TodoPreview = Omit<Todo, "description">; const todo: TodoPreview = { title: "Clean room", completed: false, createdAt: 1615544252770, }; Утилитарный тип Omit<Type, Keys> является противоположностью утилитарного типа Pick<Type, Keys>. С помощью Omit можно создать тип на основе имеющегося, исключив перечисленные свойства.

type T0 = Exclude<"a" | "b" | "c", "a">; // type T0 = "b" | "c" type T1 = Exclude<"a" | "b" | "c", "a" | "b">; // type T1 = "c" type T2 = Exclude<string | number | (() => void), Function>; // type T2 = string | number Exclude<UnionType, ExcludedMembers> похож на Omit с тем лишь отличием, что первым параметром принимает UnionType, а не конкретный тип. Он создает тип, исключая из UnionType указанные ExcludedMembers. Обратите внимание на третий пример, это может работать даже так.

type T0 = Extract<"a" | "b" | "c", "a" | "f">; // type T0 = "a" type T1 = Extract<string | number | (() => void), Function>; // type T1 = () => void Extract<Type, Union> создает тип на основе извлеченного Union из Type.

type T0 = NonNullable<string | number | undefined>; // type T0 = string | number type T1 = NonNullable<string[] | null | undefined>; // type T1 = string[] NonNullable<Type> просто возвращает переданный тип, лишив его типов null и undefined.

declare function myFunc(arg: { a: number; b: string }): void; type Params = Parameters<typeof myFunc>; // type Params = [arg: { // a: number; // b: string; // }] Parameters<Type> принимает на вход функцию и возвращает тип, описывающий её параметры.

declare function f1(): { a: number; b: string }; type T1= ReturnType<typeof f1>; // type T1= { // a: number; // b: string; // } type T2 = ReturnType<() => string>; // type T2 = string ReturnType<Type> принимает на вход функцию и возвращает тип, описывающий возвращаемое ею значение.