Frontend
October 15, 2023

Основы TypeScript: типы данных, функции, классы

Расскажу тебе про очень интересный язык программирования - TypeScript. Этот язык был создан компанией Microsoft в 2012 году и с тех пор набирает все большую популярность.

Почему TypeScript так важен? Во-первых, он основан на JavaScript - самом популярном языке веб-разработки. А во-вторых, TypeScript добавляет в JS строгую типизацию и другие полезные возможности, которых не хватает в чистом JavaScript. Это делает код более структурированным и менее подверженным ошибкам. Многие крупные компании используют TypeScript для разработки сложных приложений - например, Microsoft, Google, Facebook.

Так что если ты уже знаком с JavaScript, изучение TypeScript поможет тебе стать более крутым разработчиком! Давай разберем основы этого языка.

Первые шаги в TypeScript

Чтобы начать писать код на TypeScript, нужно установить компилятор - программу, которая преобразует код TS в обычный JavaScript. Это можно сделать с помощью менеджера пакетов npm.

Для начала давай разберемся с переменными. Объявляются они так же, как и в JS:

let message = "Привет, Мир!";

Здесь мы объявили переменную message и присвоили ей значение "Привет, Мир!".

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

let message: string = "Привет, Мир!";

Теперь TypeScript знает, что переменная message может содержать только значения типа string (строки). Это помогает избежать многих ошибок!

Типы данных в TypeScript

Давайте разберем основные типы данных в TypeScript:

  • number - для чисел. Например:
let age: number = 17;
  • string - для строк. Мы уже видели пример выше.
  • boolean - для логических значений true и false:
let isOpen: boolean = true;
  • null и undefined - для отсутствия значения:
let empty: null = null;
let notDefined: undefined = undefined;

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

Сложные типы данных

В TypeScript есть несколько полезных сложных типов. Рассмотрим некоторые из них:

Массивы (arrays) хранят упорядоченные коллекции значений:

let names: string[] = ["Вася", "Петя", "Маша"];

Здесь мы указали string[], что означает, что в массиве names могут быть только строки.

Кортежи (tuples) похожи на массивы, но каждый элемент имеет свой тип:

let user: [number, string] = [1, "Вася"];

В кортеже user первый элемент имеет тип number, а второй - string.

Перечисления (enums) представляют набор именованных констант:

enum Directions {
  Up, 
  Down, 
  Left, 
  Right    
}

let direction = Directions.Left;

Эти сложные типы позволяют создавать гибкие и типобезопасные структуры данных в TypeScript.

Функции в TypeScript

Функции - это блоки кода, которые можно вызывать по имени. Вот пример функции в TypeScript:

function sum(a: number, b: number): number {
  return a + b;
}

let total = sum(10, 20);

Обрати внимание, что у функции sum указаны типы параметров (a: number, b: number) и тип возвращаемого значения number после двоеточия.

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

Объекты и интерфейсы

Объекты - это коллекции данных с именованными свойствами:

let user = {
  name: "Вася",
  age: 17,
  isAdmin: false
};

Чтобы определить форму объекта в TypeScript, используются интерфейсы:

interface User {
  name: string;
  age: number;
  isAdmin: boolean;
}

let user: User = {
  // ...
}

Теперь переменная user должна соответствовать описанному в интерфейсе типу User. Это гарантирует, что в объекте будут требуемые свойства нужного типа.

Классы в TypeScript

Классы позволяют создавать объекты со связанным поведением. Например:

class User {

  name: string;
  
  constructor(name: string) {
    this.name = name;
  }
  
  printName() {
    console.log(this.name); 
  }
  
}

let user = new User("Вася");

Здесь мы определили класс User с помощью ключевого слова class, указали свойство name и метод printName(). Класс создает объекты с этой структурой и поведением.

Наследование классов

Классы в TypeScript могут наследовать свойства и методы от других классов. Например, основной класс User:

class User {
  // ...
}

А класс Admin наследует от него:

class Admin extends User {
  readMessages() {
    // ...
  } 
}

Класс Admin будет содержать всё от класса User плюс добавочный метод readMessages().

Интерфейсы классов

Интерфейсы можно использовать для описания структуры класса:

interface UserInterface {
  getFullName(); 
}

class User implements UserInterface {
  // ...
  getFullName() {
    return this.firstName + " " + this.lastName;
  }
}

Теперь User обязан реализовать метод getFullName() описанный в интерфейсе UserInterface. Это позволяет создавать контракты для классов.

Итог

TypeScript уже сейчас широко используется в больших проектах, и спрос на него, вероятно, будет только расти. Поэтому изучение TS - хороший способ улучшить свои навыки веб-разработки. Удачи в освоении TypeScript!