Курс по программированию на JavaScript

Урок 38: Введение в TypeScript

TypeScript — это надмножество JavaScript, которое добавляет статическую типизацию. TypeScript был разработан компанией Microsoft и стал популярным среди разработчиков благодаря улучшенной поддержке инструментария и улучшенному управлению кодом в крупных проектах.

Основы TypeScript

TypeScript компилируется в обычный JavaScript, который может выполняться в любом браузере или среде, поддерживающей JavaScript. Основные отличия TypeScript от JavaScript включают:

• Статическая типизация: Позволяет объявлять типы переменных, параметров функций и возвращаемых значений.
• Интерфейсы: Определяют структуру объектов и позволяют обеспечивать соответствие объектов определенным формам.
• Классы и модули: TypeScript поддерживает синтаксис классов и модулей ES6.
• Улучшенная поддержка инструментов: Статическая типизация позволяет интеграционным средам разработки (IDE) предоставлять более точные подсказки кода и проверки типов.

Пример кода на TypeScript:

Рассмотрим простой пример на TypeScript, который демонстрирует использование типов и классов:

// Объявление типа переменной
let message: string = 'Hello, TypeScript!';
console.log(message);

// Определение интерфейса
interface User {
 name: string;
 age: number;
}

// Класс, реализующий интерфейс
class Person implements User {
 name: string;
 age: number;

 constructor(name: string, age: number) {
 this.name = name;
 this.age = age;
 }

 greet() {
 return `Hello, my name is ${this.name} and I am ${this.age} years old.`;
 }
}

const user: User = new Person('John Doe', 30);
console.log(user.greet());

// Hello, TypeScript!
// Hello, my name is John Doe and I am 30 years old.

Преимущества использования TypeScript

Использование TypeScript предоставляет множество преимуществ для разработчиков, особенно в крупных проектах:

• Раннее обнаружение ошибок: Статическая типизация позволяет обнаруживать ошибки на этапе компиляции, что уменьшает количество ошибок во время выполнения.
• Улучшенная читаемость и поддержка кода: Явное указание типов улучшает читаемость кода и облегчает его поддержку, особенно в командах разработчиков.
• Совместимость с JavaScript: TypeScript является надмножеством JavaScript, поэтому любой существующий JavaScript-код является допустимым TypeScript-кодом.
• Поддержка современных функций JavaScript: TypeScript поддерживает все современные функции JavaScript, такие как асинхронные функции и генераторы.
• Интеграция с инструментами: Поддержка TypeScript в популярных IDE и редакторах, таких как Visual Studio Code, обеспечивает улучшенные подсказки кода и рефакторинг.

Установка и настройка TypeScript

Для начала работы с TypeScript необходимо установить его компилятор. Выполните следующую команду для установки TypeScript:

npm install -g typescript

+ typescript@4.5.4
added 1 package from 1 contributor in 2.345s

Создайте файл tsconfig.json для настройки компилятора TypeScript:

{
 "compilerOptions": {
 "target": "ES6",
 "module": "commonjs",
 "strict": true,
 "esModuleInterop": true,
 "outDir": "./dist"
 },
 "include": ["src/**/*.ts"],
 "exclude": ["node_modules"]
}

// Настройки компилятора TypeScript

Создайте папку src и добавьте файл index.ts с примером кода, приведенным выше. Для компиляции кода выполните следующую команду:

tsc

// Компиляция успешна, скомпилированные файлы находятся в папке dist

Упражнения

// src/store.ts

// Определение интерфейса Product
interface Product {
 name: string;
 price: number;
}

// Класс Store
class Store {
 private products: Product[] = [];

 addProduct(product: Product) {
 this.products.push(product);
 }

 getProducts(): Product[] {
 return this.products;
 }
}

const store = new Store();
store.addProduct({ name: 'Laptop', price: 1000 });
store.addProduct({ name: 'Phone', price: 500 });

console.log(store.getProducts());

// [{ name: 'Laptop', price: 1000 }, { name: 'Phone', price: 500 }]

// src/person.ts

// Определение и экспорт класса Person
export class Person {
 name: string;
 age: number;

 constructor(name: string, age: number) {
 this.name = name;
 this.age = age;
 }

 greet() {
 return `Hello, my name is ${this.name} and I am ${this.age} years old.`;
 }
}

// src/index.ts

// Импорт класса Person
import { Person } from './person';

const person1 = new Person('Alice', 25);
const person2 = new Person('Bob', 30);

console.log(person1.greet());
console.log(person2.greet());

// Hello, my name is Alice and I am 25 years old.
// Hello, my name is Bob and I am 30 years old.