TypeScript — основы
TypeScript — это язык программирования, который является расширением JavaScript. Он добавляет новые функции и улучшения, чтобы сделать написание кода более удобным и безопасным.
Основные аспекты
Статическая типизация
В отличие от JavaScript, TypeScript позволяет явно указывать типы переменных и функций. Это означает, что вы можете заранее определить, какого типа данные должна хранить переменная или возвращать функция. Это упрощает отладку и предотвращает многие ошибки.
Интерфейсы и классы
TypeScript поддерживает объектно-ориентированное программирование с помощью классов и интерфейсов. Это позволяет структурировать код более четко и обеспечивает лучшее повторное использование кода.
Улучшенная работа с объектами
Вы можете более точно описывать структуру объектов, что делает код более понятным и уменьшает вероятность ошибок.
Обработка ошибок на этапе компиляции
TypeScript проверяет код на наличие ошибок еще до его выполнения. Это помогает находить и исправлять ошибки раньше, что экономит время на тестирование и отладку.
Совместимость с JavaScript
Код на TypeScript может быть скомпилирован в JavaScript, что делает его совместимым с любыми браузерами и средами выполнения JavaScript.
Типы данных
Есть несколько основных типов данных, а также возможность создавать свои собственные типы.
Boolean
Этот тип представляет логическое значение true или false. Он используется для управления условными операторами и логическими выражениями.
let isCompleted: boolean = false;
Number
В TypeScript все числа — это числа с плавающей точкой. Он поддерживает десятичные, шестнадцатеричные, двоичные и восьмеричные числа.
let decimal: number = 6;
let hex: number = 0xf00d;
let binary: number = 0b1010;
let octal: number = 0o744;
String
Этот тип используется для представления текстовых данных. Строки могут быть заключены в одинарные, двойные или обратные кавычки, последние из которых используются для создания шаблонных строк.
let color: string = "blue";
let fullName: string = `Bob Bobbington`;
Array
Поддерживается два способа объявления массивов: с использованием квадратных скобок или с использованием обобщённого типа Array.
let list: number[] = [1, 2, 3];
let listGeneric: Array<number> = [1, 2, 3];
Tuple
Этот тип позволяет выразить массив с фиксированным числом элементов, известными типами, но не обязательно одинаковыми.
let x: [string, number];
x = ["hello", 10]; // OK
Enum
Перечисления позволяют определить набор именованных констант. Это может быть удобно для работы с набором связанных констант и дает возможность использовать более дружественные к читателю имена.
enum Color {Red, Green, Blue}
let c: Color = Color.Green;
Any
Этот тип используется для переменных, тип которых может быть чем угодно. Это полезно при миграции с JavaScript, когда вы не знаете типа переменной заранее.
let notSure: any = 4;
notSure = "maybe a string instead";
Void
Противоположность типа any. Используется в функциях, которые не возвращают значение.
function warnUser(): void {
console.log("This is my warning message");
}
Null и Undefined
В TypeScript, null и undefined имеют свои типы. Они не очень полезны сами по себе, но когда —strictNullChecks включен, они могут быть использованы для обозначения, что переменная может не иметь значения.
let u: undefined = undefined;
let n: null = null;
Never
Этот тип представляет типы значений, которые никогда не происходят. Например, never это тип для функции, которая всегда выбрасывает исключение или никогда не возвращает значение.
function error(message: string): never {
throw new Error(message);
}
Object
object представляет не примитивный тип. Используется для типизации объектов, не являющихся числами, строками, логическими значениями, массивами, null или undefined.
declare function create(o: object | null): void;
create({ prop: 0 }); // OK
Type Assertions
Похоже на приведение типов в других языках. Type assertion позволяет указать TypeScript, что вы знаете больше о типе, чем сам TypeScript.
let someValue: any = "this is a string";
let strLength: number = (someValue as string).length;
Эти типы можно комбинировать и использовать для создания сложных структур данных.
Продвинутые типы (Advanced Types)
Эти продвинутые типы позволяют более точно описать структуры данных и поведение, обеспечивая более строгую типизацию и помогая предотвратить ошибки.
Union Types (Объединенные типы)
Объединенные типы позволяют объявить переменную, которая может хранить значения нескольких различных типов.
let value: string | number;
value = "Hello"; // ОК
value = 100; // ОК
Intersection Types (Пересечение типов)
Пересечение типов позволяет комбинировать множество типов в один. Это полезно, когда вы хотите объединить несколько типов в один.
type Employee = { name: string; id: number; };
type Manager = Employee & { reports: Employee[]; };
Type Guards (Охранники типов)
Охранники типов позволяют вам более точно определять типы в блоках условий, что упрощает работу с объединенными или пересеченными типами.
function isNumber(x: any): x is number {
return typeof x === "number";
}
if (isNumber(value)) {
console.log(value.toFixed(2)); // Теперь TypeScript знает, что value - это число
}
Nullable Types (Типы, допускающие null)
В строгом режиме («strictNullChecks»: true) все типы по умолчанию не допускают значения null и undefined. Однако их можно добавить с помощью union types.
let str: string | null = null; // Теперь str может быть string или null
Type Aliases (Псевдонимы типов)
Псевдонимы типов позволяют создавать новые имена для типов. Это полезно для создания более читабельных и удобных типов.
type Point = {
x: number;
y: number;
};
Псевдонимы типов могут быть параметризованы, что делает их очень гибкими.
type Container<T> = { value: T };
Псевдонимы могут описывать сложные структуры данных.
type Tree<T> = {
value: T;
left?: Tree<T>;
right?: Tree<T>;
};
Могут использоваться для создания новых типов на основе существующих.
type LinkedList<Type> = Type & { next: LinkedList<Type> };
В отличие от интерфейсов, псевдонимы типов не расширяемы, но могут использовать объединение для имитации расширяемости. Повторное объявление псевдонима типа вызовет ошибку.
String Literal Types (Литеральные типы строк)
Эти типы позволяют ограничить строковое значение определенным набором литералов.
type Direction = "north" | "east" | "south" | "west";
Discriminated Unions (Дискриминированные объединения)
interface Circle {
kind: "circle";
radius: number;
}
interface Square {
kind: "square";
sideLength: number;
}
type Shape = Circle | Square;
function getArea(shape: Shape) {
switch (shape.kind) {
case "circle":
return Math.PI * shape.radius ** 2;
case "square":
return shape.sideLength ** 2;
}
}
Index Types (Индексные типы)
Индексные типы позволяют динамически получать типы на основе свойств других типов.
type Person = { name: string; age: number; };
type PersonProps = keyof Person; // 'name' | 'age'
Mapped Types (Отображаемые типы)
Отображаемые типы позволяют создавать новые типы на основе существующих, применяя операции к свойствам исходных типов.
type ReadOnly<T> = { readonly [P in keyof T]: T[P]; };
type ReadOnlyPerson = ReadOnly<Person>;
Conditional Types (Условные типы)
Условные типы выбирают один из двух возможных типов в зависимости от условия.
type Check<T> = T extends string ? "String" : "Not String";
type TypeA = Check<string>; // "String"
type TypeB = Check<number>; // "Not String"
Установка Typescript
Сначала создайте новую папку для вашего проекта и инициализируйте там новый проект (при условии, что Node js у вас уже установлен):
mkdir my-typescript-project
cd my-typescript-project
npm init -y
Это создаст файл package.json в вашем проекте.
Установите TypeScript в качестве зависимости разработки:
npm install --save-dev typescript
Создайте файл конфигурации, tsconfig.json, в корне вашего проекта. Вы можете сделать это вручную или с помощью команды:
npx tsc --init
Это создаст стандартный конфигурационный файл с рекомендуемыми настройками. Вы можете изменить его в соответствии с вашими потребностями.
Создайте папку для вашего кода, например src, и добавьте туда файл, например index.ts:
mkdir src
cd src
touch index.ts
Компиляция
Чтобы скомпилировать ваш код в JavaScript, используйте следующую команду:
npx tsc
Это скомпилирует ваши файлы .ts в .js согласно настройкам в файле tsconfig.json.
Конфигурация TypeScript
Основной конфигурационный файл это — tsconfig.json, он определяет различные опции компиляции и поведение проекта.
{
"compilerOptions": {
"target": "es5", // Целевая версия ECMAScript (например, ES5, ES6/ES2015, ES2017)
"module": "commonjs", // Формат модуля (например, commonjs, amd, es2015)
"strict": true, // Включает строгий режим для более строгой проверки типов
"outDir": "./dist", // Каталог для скомпилированных файлов
"sourceMap": true, // Генерирует карты исходного кода для отладки
"noImplicitAny": true, // Запрещает неявные объявления типа `any`
"esModuleInterop": true, // Обеспечивает совместимость с модулями ES6 и CommonJS
"lib": ["dom", "es2015"], // Библиотеки, которые будут включены в компиляцию
// Другие опции компилятора...
},
"include": ["src/**/*"], // Шаблоны путей для включения файлов в компиляцию
"exclude": ["node_modules", // Исключает определенные файлы или каталоги из компиляции
"**/*.spec.ts"] // (например, все файлы в node_modules и тестовые файлы)
}
Опции include и exclude помогают управлять набором файлов, которые будут или не будут обрабатываться компилятором.
Это особенно полезно в больших проектах, где вам нужно четко определить, какие файлы необходимо компилировать.