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

Курс по программированию на 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

Упражнения

Упражнение 1: Создание и использование интерфейсов

Создайте интерфейс Product с полями name и price. Создайте класс Store, который содержит массив продуктов и методы для добавления продукта и получения списка продуктов. Реализуйте этот функционал в файле src/store.ts.

Решение:

// 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 }]

Объяснение: Мы создали интерфейс Product и класс Store, который содержит методы для добавления продукта и получения списка продуктов.

Упражнение 2: Использование классов и модулей

Создайте класс Person с полями name и age, и методом greet. Экспортируйте этот класс из модуля person.ts. В файле index.ts импортируйте класс Person и создайте несколько экземпляров этого класса, затем вызовите метод greet для каждого экземпляра.

Решение:

// 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.

Объяснение: Мы создали класс Person и экспортировали его из модуля person.ts. В файле index.ts мы импортировали класс Person, создали несколько экземпляров и вызвали метод greet.

Категория: JavaScript | Просмотров: 12 | Добавил: Admin | Рейтинг: 0.0/0
Всего комментариев: 0
Имя *:
Email *:
Код *: