Ответы на вопросы с собеседований по TypeScript
Что такое TypeScript?
TypeScript – это надмножество JavaScript, предоставляющее строгую типизацию, поддержку классов и интерфейсов на этапе разработки. Применение TypeScript способствует повышению надёжности программ за счёт недопущения ряда ошибок на этапе кодирования. TypeScript компилируется в JavaScript, так что во время выполнения кода в браузере его уже не существует.
Зачем нужны .d.ts файлы?
/* .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-файлы?
Файлы с расширением .map
хранят карты кода (source map), которые содержат данные о соответствии кода, написанного на TypeScript, JavaScript-коду, созданному на его основе.
С этим файлами могут работать многие отладчики (например, Visual Studio и инструменты разработчика Chrome). Это позволяет в ходе отладки работать с исходным кодом программ на TypeScript, а не с их JS-эквивалентами.
Что такое декораторы?
class CRUD {
get() {}
post() {}
delete() {}
put() {}
}
Декораторы используются для расширения поведения функций. Самые распространённые примеры - добавление декоратором возможности логирования или кэширования функции.
Есть ли в TypeScript перегрузка функций?
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 и type?
interface X {
a: number
b: string
}
type X = {
a: number
b: string
};
В ряде случаев они взаимозаменяемы.
Однако, различия присутствуют:
- с типами можно использовать пересечение и объединение
- интерфейс можно расширять, строя цепочку наследований
- интерфейс может быть использован для описания класса
- интерфейс может быть использован для описания функции
- в случае, если в одной области видимости объявлено несколько одноимённых интерфейсов, они будут объединены в один
- если в нескольких одноимённых интерфейсах будут описаны одноимённые методы с разными сигнатурами, они будут расценены, как описание перегрузки.
В целом, можно сказать, что ключевое слово type
больше подходит для типизации примитивных значений или объектных значений, не являющихся звеньями сложной цепочки. interface
же необходим и удобен при осознанном построении объектно-ориентированной архитектуры.
Что такое Nullish Coalescing (оператор ??)?
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';
}
Как реализовать const в классе?
В 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
.
![Логотип Девстанции Логотип Девстанции](/_next/image?url=%2F_next%2Fstatic%2Fmedia%2Flogo.767d6ec0.png&w=32&q=75)
Что такое предохранители типов?
![Логотип Девстанции Логотип Девстанции](/_next/image?url=%2F_next%2Fstatic%2Fmedia%2Flogo.767d6ec0.png&w=32&q=75)
Что такое Generics?
![Логотип Девстанции Логотип Девстанции](/_next/image?url=%2F_next%2Fstatic%2Fmedia%2Flogo.767d6ec0.png&w=32&q=75)
Зачем нужен keyof?
![Логотип Девстанции Логотип Девстанции](/_next/image?url=%2F_next%2Fstatic%2Fmedia%2Flogo.767d6ec0.png&w=32&q=75)
Что такое Partial<>?
![Логотип Девстанции Логотип Девстанции](/_next/image?url=%2F_next%2Fstatic%2Fmedia%2Flogo.767d6ec0.png&w=32&q=75)
Что такое Required<>?
![Логотип Девстанции Логотип Девстанции](/_next/image?url=%2F_next%2Fstatic%2Fmedia%2Flogo.767d6ec0.png&w=32&q=75)
Что такое Pick<>?
![Логотип Девстанции Логотип Девстанции](/_next/image?url=%2F_next%2Fstatic%2Fmedia%2Flogo.767d6ec0.png&w=32&q=75)
Что такое Omit<>?
![Логотип Девстанции Логотип Девстанции](/_next/image?url=%2F_next%2Fstatic%2Fmedia%2Flogo.767d6ec0.png&w=32&q=75)
Что такое Exclude<>?
![Логотип Девстанции Логотип Девстанции](/_next/image?url=%2F_next%2Fstatic%2Fmedia%2Flogo.767d6ec0.png&w=32&q=75)
Что такое Extract<>?
![Логотип Девстанции Логотип Девстанции](/_next/image?url=%2F_next%2Fstatic%2Fmedia%2Flogo.767d6ec0.png&w=32&q=75)
Что такое NonNullable<>?
![Логотип Девстанции Логотип Девстанции](/_next/image?url=%2F_next%2Fstatic%2Fmedia%2Flogo.767d6ec0.png&w=32&q=75)
Что такое Parameters<>?
![Логотип Девстанции Логотип Девстанции](/_next/image?url=%2F_next%2Fstatic%2Fmedia%2Flogo.767d6ec0.png&w=32&q=75)
Что такое ReturnType<>?
![Логотип Девстанции Логотип Девстанции](/_next/image?url=%2F_next%2Fstatic%2Fmedia%2Flogo.767d6ec0.png&w=32&q=75)
Также в этой категории
Вам может быть интересно
Топ тредов
: Задача в JS под названием "Соревнование" содержит ошибку
![Логотип Девстанции Логотип Девстанции](/_next/image?url=%2F_next%2Fstatic%2Fmedia%2Flogo.767d6ec0.png&w=48&q=75)
: Добавьте возможность ставить реакции на решенные задачи других коллег)
: Добавьте разделы по MongoDB и Nest.js
![Логотип Девстанции Логотип Девстанции](/_next/image?url=%2F_next%2Fstatic%2Fmedia%2Flogo.767d6ec0.png&w=48&q=75)