Основы TypeScript

Эта статья объясняет основы TypeScript.

YouTube Video

Выполнение "Hello World!"

Сначала мы запустим классический пример "Hello World!" на TypeScript с использованием Visual Studio Code.

npm install -g typescript

Установите typescript с помощью команды npm.

Создайте файл tsconfig.json.

1{
2  "compilerOptions": {
3    "target": "ES6",
4    "module": "CommonJS",
5    "outDir": "out",
6    "sourceMap": true
7  }
8}

Создайте файл .vscode/launch.json, чтобы включить запуск файла main.ts в Visual Studio Code.

 1{
 2    "version": "0.2.0",
 3    "configurations": [
 4        {
 5            "type": "node",
 6            "request": "launch",
 7            "name": "Launch Program",
 8            "skipFiles": [
 9                "<node_internals>/**"
10            ],
11            "program": "${workspaceFolder}/main.ts",
12            "preLaunchTask": "tsc: build - tsconfig.json",
13            "outFiles": [
14                "${workspaceFolder}/out/main.js"
15            ]
16        }
17    ]
18}

Создайте файл main.ts, который отображает "Hello World!". Вы можете запустить его в Visual Studio Code, нажав клавишу F5.

1console.log("Hello World!");

Настроив таким образом, вы можете выполнять файлы TypeScript в VSCode.

Обзор TypeScript

TypeScript (TS) — это надмножество JavaScript, разработанное компанией Microsoft. TypeScript поддерживает статическую типизацию, что позволяет писать более надёжный и поддерживаемый код.

Статическая типизация

• TypeScript добавляет типы в JavaScript и выполняет проверку типов во время компиляции. Это позволяет предотвращать ошибки, связанные с типами, заранее.

1let message: string = "Hello, TypeScript";
2console.log(message);

Компиляция

• Поскольку TypeScript нельзя напрямую выполнить в браузере, его необходимо транспилировать (компилировать) в JavaScript. Используйте tsc (TypeScript Compiler) для преобразования файлов TS в файлы JS.

Необязательные аннотирования типов

• TypeScript также выполняет вывод типов, но позволяет явно указывать типы, когда это необходимо. Это улучшает читаемость и надёжность кода.

1function greet(name: string): string {
2    return `Hello, ${name}`;
3}
4console.log(greet('John'));

Интерфейсы

• TypeScript предоставляет interface для определения структуры объектов. Это позволяет строго управлять структурой объектов.

1interface Person {
2    name: string;
3    age: number;
4}
5const user: Person = { name: "John", age: 30 };
6console.log(user.name);

Классы

• TypeScript предоставляет расширения синтаксиса классов JavaScript и поддерживает наследование, модификаторы доступа (public, private, protected) и абстрактные классы.

 1class Animal {
 2    protected name: string;
 3    constructor(name: string) {
 4        this.name = name;
 5    }
 6    speak(): void {
 7        console.log(`${this.name} makes a sound.`);
 8    }
 9}
10
11class Dog extends Animal {
12    speak(): void {
13        console.log(`${this.name} barks.`);
14    }
15}
16const animal = new Animal('Generic Animal');
17animal.speak();
18
19const dog = new Dog('Buddy');
20dog.speak();

Обобщения

• В TypeScript можно писать повторно используемый и типобезопасный код, используя обобщения.

1function identity<T>(arg: T): T {
2    return arg;
3}
4console.log(identity<string>("Hello Generics"));

Экосистема

• TypeScript полностью совместим с экосистемой JavaScript и может использовать существующий код JavaScript в неизменном виде. Кроме того, он интегрирован с популярными библиотеками, такими как React и Node.js.

Мощные инструменты для разработчиков

• TypeScript предлагает расширенные функции, такие как автозаполнение, поддержка рефакторинга и проверка ошибок в редакторах, таких как VSCode.

TypeScript особенно полезен для повышения надежности и улучшения продуктивности разработчиков в крупных проектах.

Переменные в TypeScript

Здесь объясняются основные концепции и использование переменных в TypeScript.

Объявление переменных

В TypeScript переменные объявляются с использованием трех ключевых слов: let, const и var. Каждое ключевое слово имеет различные характеристики.

Пример let:

let имеет блочную область видимости (действителен только внутри фигурных скобок {}). Значения могут быть переназначены позднее.

1let count: number = 10;
2console.log(count);  // Outputs: 10
3
4count = 20;
5console.log(count);  // Outputs: 20

Пример const:

const нельзя переопределить, поэтому однажды присвоенное значение не может быть изменено. Однако содержимое объектов и массивов может быть изменено.

1const pi: number = 3.14;
2console.log(pi);  // Outputs: 3.14
3
4// pi = 3.14159; // Error: Reassignment is not allowed
5
6const fruits: string[] = ["apple", "banana"];
7fruits.push("orange");
8console.log(fruits);  // Outputs: ["apple", "banana", "orange"]

Пример var:

var имеет функциональную область видимости и может быть переназначен. Однако игнорируя блочную область видимости, это может вызвать непредсказуемое поведение по сравнению с let или const.

 1var message: string = "Hello, world!";
 2console.log(message);  // Outputs: Hello, world!
 3
 4message = "Hello, TypeScript!";
 5console.log(message);  // Outputs: Hello, TypeScript!
 6
 7// (`var` ignores block scope)
 8if (true) {
 9    var localMessage = "Hello again!";
10}
11console.log(localMessage); // "Hello again!"

Аннотации типов

В TypeScript вы можете явно аннотировать типы для переменных. TypeScript также поддерживает вывод типов, но аннотации типов полезны в сложных сценариях.

1let isDone: boolean = false;
2console.log(isDone);  // Outputs: false
3
4let userName: string = "Alice";
5console.log(userName);  // Outputs: Alice

Неинициализированные переменные

Если переменная объявлена без инициализации, по умолчанию ей присваивается значение undefined. Переменной, объявленной с использованием let, необходимо явно присвоить значение undefined или включить undefined в ее тип, если она не инициализирована.

1let uninitialized: number | undefined;
2console.log(uninitialized);  // Outputs: undefined
3
4uninitialized = 5;
5console.log(uninitialized);  // Outputs: 5

Область видимости переменной

let и const имеют блочную область видимости, поэтому они действительны только в рамках одного блока.

1if (true) {
2    let blockScoped: string = "Block Scoped";
3    console.log(blockScoped);  // Outputs: Block Scoped
4}
5// console.log(blockScoped);  // Error: blockScoped is out of scope

Всплытие переменных

Поскольку TypeScript является надмножеством JavaScript, он наследует механизм всплытия JavaScript. Всплытие относится к поведению, при котором объявления переменных и функций рассматриваются как поднятые к началу их области видимости. Однако поднимается только объявление, а инициализация остается на месте. Переменные, объявленные с помощью var, всплывают, но использование let или const до их объявления приводит к ошибке.

1console.log(a); // undefined
2var a = 10;
3console.log(a); // 10

• В этом случае переменные, объявленные с помощью var, всплывают, и их значения выводятся.

1console.log(b); // ReferenceError
2let b = 20;

• Переменные, объявленные с помощью let, не всплывают, что приводит к ошибке.

Резюме

Ниже приведено краткое описание let, const и var.

• let можно переопределять, и он имеет блочную область видимости.
• const нельзя переопределять, и он имеет блочную область видимости.
• var можно переопределять, и он имеет функциональную область видимости.
• Все они позволяют использовать явные аннотации типов для задания типов переменных.

Экранирующие символы в TypeScript

Экранирующие символы используются, когда определённые символы невозможно ввести напрямую или чтобы представить символы, имеющие специальное значение в строке. В TypeScript экранирующие символы используются для представления управляющих или специальных символов.

Например, используйте \n, чтобы вывести сообщение, включающее перенос строки.

1const message: string = "Hello,\nWorld!";
2console.log(message);
3// Output:
4// Hello,
5// World!

Экранирование специальных символов

Экранирующие символы также полезны при включении специальных символов в строку. Например, вы можете захотеть использовать двойные или одинарные кавычки непосредственно в строке.

1const singleQuoteExample: string = 'It\'s a beautiful day!';
2console.log(singleQuoteExample);
3// Output: It's a beautiful day!
4
5const doubleQuoteExample: string = "He said, \"Welcome!\"";
6console.log(doubleQuoteExample);
7// Output: He said, "Welcome!"

Экранирование обратной косой черты

Чтобы включить обратную косую черту в строку, её нужно написать как двойную обратную косую черту.

1const path: string = "C:\\Program Files\\MyApp";
2console.log(path);
3// Output: C:\Program Files\MyApp

Юникод и шестнадцатеричные экранирования

В TypeScript кодовые точки Unicode могут быть представлены с использованием экранирующих последовательностей.

Экранирование символов в Unicode

Вы можете представить символы Unicode, указав четырёхзначный шестнадцатеричный номер после \u.

1const smileyFace: string = "\u263A";
2console.log(smileyFace);
3// Output: ☺ (Copyright Mark)

Шестнадцатеричное экранирование

Вы можете представить определённые символы, используя двухзначный шестнадцатеричный номер после \x.

1const letterA: string = "\x41";
2console.log(letterA);
3// Output: A

Шаблонные строки и экранирование

Шаблонные литералы определяются с использованием обратных кавычек и обеспечивают удобный способ создания встроенных выражений или многострочных строк. Обычные экранирующие символы могут использоваться непосредственно в шаблонных строках.

1const multiLine: string = `This is
2a multi-line
3string.`;
4console.log(multiLine);
5// Output:
6// This is
7// a multi-line
8// string.

Особые случаи

В TypeScript использование недопустимых экранирующих последовательностей внутри строки может привести к синтаксической ошибке. Поэтому важно проверять, являются ли экранирующие символы допустимыми.

1// Invalid escape sequence
2const invalidString: string = "\xZZ"; // Error

Примеры практического использования

Вот пример создания сложной строки с использованием экранирующих символов.

1const jsonExample: string = "{\n\t\"name\": \"John Doe\",\n\t\"age\": 30\n}";
2console.log(jsonExample);
3// Output:
4// {
5//     "name": "John Doe",
6//     "age": 30
7// }

В этом примере \n используется для нового строки, а \t — для добавления отступа. Это делает структуру JSON более удобочитаемой.

Резюме

Экранированные символы играют очень важную роль при работе со строками в TypeScript. Когда вы хотите включить специальные символы или управляющие символы в строку, вы можете создавать выразительные строки, используя подходящие последовательности экранирования. Понимание и правильное использование экранированных символов может улучшить читабельность и поддержку кода.

Версии TypeScript

Давайте рассмотрим обзор версий TypeScript.

1. TypeScript 1.0 (2014)

   Первая стабильная версия TypeScript. Были внедрены базовые возможности, такие как типизация, классы и модули.

2. TypeScript 2.0 (2016)

   Были введены Non-nullable Types, Control Flow Analysis, Read-only Properties и тип Never, что улучшило вывод типов.

3. TypeScript 3.0 (2018)

   Была представлена более гибкая система типов, включая такие функции, как Project References, расширения для Tuple Types и улучшения Rest Parameters.

4. TypeScript 4.0 (2020)

   Были добавлены функции, такие как Variadic Tuple Types, улучшения редактора, улучшенный вывод типов и Labelled Tuple Elements, чтобы улучшить опыт разработки.

5. TypeScript 4.1 (2020)

   Были добавлены Template Literal Types, что сделало манипуляции с типами строк более мощными.

6. TypeScript 4.3 (2021)

   Добавление ключевого слова Override, улучшения модификаторов доступа в конструкторах и улучшенная поддержка типов для WeakMap и WeakSet.

7. TypeScript 4.5 (2021)

   Добавлены тип Awaited, ModuleSuffixes и улучшена совместимость с модулями ECMAScript.

8. TypeScript 5.0 (2023)

   Проведена стандартизация Decorators, улучшена скорость сборки проектов, усовершенствована система типов и добавлена поддержка последних функций ECMAScript.

TypeScript постоянно развивается, каждый год выпускаются несколько версий, добавляющих новые функции и улучшения.

Вы можете следовать этой статье, используя Visual Studio Code на нашем YouTube-канале. Пожалуйста, также посмотрите наш YouTube-канал.

YouTube Video