TypeScript Flashcards
Базовые типы TypeScript
Базовые типы TypeScript:
- boolean: логическое значение true или false
- number: числовое значение
- bigint: большие числа
- string: строки
- Array: массивы
- кортежи
- Enum: перечисления
- Any: произвольный тип
- Symbol
- null и undefined: соответствуют значениям null и undefined в javascript
- Never: также представляет отсутствие значения и используется в качестве возвращаемого типа функций, которые генерируют или возвращают ошибку
Псевдоним типа
//теперь id - это псевдоним типов
type id = number | string;
//использование:
let userId : id = 2;
Приведение к типу
const header = <HTMLElement>document.getElementById("header");</HTMLElement>
//или с помощью оператора as
const header = document.getElementById(“header”) as HTMLElement;
Создание типизированной переменной
Создание типизированной переменной:
let x: number = 10;
let isValid: boolean = true;
let hello: string = “hello world”;
Проверка на null (оператор !)
//проверка на null
header!.innerText = “Hello Typescript!”;
Функции в TypeScript
//типизированное возвращаемое значение
function add(a: number, b: number): number {
return a + b;
}
//тип возврата void
function add(a: number, b: number): void {
console.log(a + b);
}
//необязательные параметры
function getName(firstName: string, lastName?: string) {
return firstName + “ “ + lastName;
}
Типизированные стрелочные функции
Типизированные стрелочные функции:
const sum = (x: number, y: number) => x + y;
Cоздание указателя на функцию
Cоздание указателя на функцию (аналог делегатов):
let op: (x:number, y:number) => number;
op = sum;
console.log(op(2, 4)); // 6
op = subtract;
console.log(op(6, 4)); // 2
Объекты в TypeScript
Объекты в TypeScript - типизированные:
let person = { name: “Tom”, age: 23 };
person = { name: “Bob” }; // Ошибка
person = { name: “Bob”, age: 35 }; // Правильно
Массивы и кортежи в TypeScript
Массивы и кортежи в TypeScript - типизированные:
//массивы
let list: number[] = [10, 20, 30];
let colors: string[] = [“red”, “green”, “blue”];
let names: Array<string> = ["Tom", "Bob", "Alice"];</string>
//кортежи
let user: [string, number];
Перечисление enum
enum Season { Winter=4, Spring=8, Summer=16, Autumn=32 };
enum Season {
Winter = “Зима”,
Spring = “Весна”,
Summer = “Лето”,
Autumn = “Осень”
};
enum Season {
Winter = 1,
Spring = “Весна”,
Summer = 3,
Autumn = “Осень”
};
Классы в TypeScript
Класс - шаблон для создания объектов, инкапсулирующий функциональность, имеет типизированные поля и методы с типизированными параметрами.
class User {
name: string;
age: number;
toString(): string{
return `${this.name}: ${this.age}`;
} }
Наследование
- Невозможно множественное наследование
- можно реализовывать множество интерфейсов
Абстрактные классы и методы
- нельзя создавать объекты абстрактного класса
Пример:
abstract class Figure {
//абстрактные поля
abstract x: number;
abstract y: number;
//абстрактный метод abstract getArea(): void; }
Модификаторы доступа
в TypeScript есть модификаторы доступа:
- public (исп. по умолчанию)
- protected
- private
Определение полей через конструктор
параметры конструктора с модификаторами становятся полями класса:
class Person {
constructor(private name: string, private age: number) { }
}
Интерфейсы
Интерфейс может реализовываться объектами, классами и другими интерфейсами.
interface IUser {
id: number;
name: string;
sayWords(words: string): void;
}
//реализация интерфейса IUser объектом tom
let tom: IUser = {
id: 1,
name: “Tom”
sayWords: function(words: string): void{
console.log(“hello from object”);
}
}
//реализация интерфейса IUser классом
class User implements IUser{ … }
//интерфейс ICar наследует интерфейс IMovable
interface ICar extends IMovable {
fill(): void;
}
Преобразования типов классов и интерфейсов (оператор as)
let tom : Person = new Employee(“Tom”, “Microsoft”);
//преобразование к типу Employee
let tomEmployee: Employee = <Employee>tom;
//преобразование к типу Employee c помощью оператора as
let tomEmployee: Employee = tom as Employee;</Employee>
Проверка типа
Оператор instanceOf - позволяет проверить, принадлежит ли объект классу.
let tom = new Employee(“Tom”, “Microsoft”);
if (tom instanceof Person) {….}
Обобщения
function getId<T>(id: T): T {
return id;
}</T>
Описание Typescript
Typescript - строго типизированный, кроссплатформенный язык, компилируемый в js (нужен компилятор).
Установка компилятора ts:
npm install -g typescript
Настройки компиляции Typescript
Основные настройки компиляции:
1) --watch (автоматическая перекомпиляция, если были внесены изменения)
2) --target (задает версию стандарта Javascript (ES3, …, ES2020))
3) --removeComments (удаление комментариев в откомпилированных файлах .js)
4) --outDir (установка каталога для откомпилированных файлов .js)
5) --outFile(объединение файлов .ts в один файл .js)
6) --module (тип модуля для компиляции (“None”, “CommonJS”))
7) --noEmitOnError (не генерировать файл .js, если при компиляции были ошибки)
Файл конфигурации tsconfig.json
Файл конфигурации tsconfig.json имеет функционал:
1) устанавливает корневой каталог проекта
2) выполняет настройку параметров компиляции
3) устанавливает файлы проекта
4) можно исключить из компиляции нужные файлы .ts
5) можно задать определенные файлы для компиляции (по умолчанию компилируются все файлы .ts и .tsx)
- Компилятор использует tsconfig.json только в случае, если компилятору (cli) не переданы названия файлов, которые надо откомпилировать.
Typescript Заголовочные файлы
Заголовочные файлы (расширение “.d.ts”) - нужны для установки связи с внешними файлами скриптов js:
Декларация типов:
declare let message: string;
declare function hello(): void;
declare class Person{
name: string;
age: number;
constructor(name: string, age: number);
display(): void;
}
