Основы TypeScript для JavaScript разработчиков

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

Введение в TypeScript: зачем JavaScript разработчику статический анализатор

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

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

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

Пример:

function greet(name: string) {
  return "Hello, " + name;
}

let user = "John";
console.log(greet(user)); // Output: Hello, John

// Ошибка: Argument of type 'number' is not assignable to parameter of type 'string'.
// console.log(greet(42));

В этом примере TypeScript обнаружит ошибку, если мы попытаемся передать число в функцию greet, которая ожидает строку.

Типы данных в TypeScript: от примитивов до пользовательских типов

TypeScript поддерживает все примитивные типы JavaScript, а также добавляет новые типы для большей гибкости и контроля.

• boolean: Логическое значение (true или false).
• number: Числовое значение (целое или с плавающей точкой).
• string: Текстовая строка.
• null и undefined: Представляют отсутствие значения.
• symbol: Уникальный идентификатор.
• void: Используется для функций, которые не возвращают значение.
• any: Отключает проверку типов для переменной. Рекомендуется избегать использования any, так как это нивелирует преимущества TypeScript.
• unknown: Аналогичен any, но требует явной проверки типа перед использованием переменной.
• never: Представляет тип значений, которые никогда не произойдут (например, функция, которая всегда выбрасывает исключение).
• array: Массив значений определенного типа. Например, number[] или Array<number>.
• tuple: Массив с фиксированным количеством элементов и известными типами. Например, [string, number].
• enum: Набор именованных констант.

Примеры:

let isDone: boolean = false;
let decimal: number = 6;
let color: string = "blue";
let list: number[] = [1, 2, 3];
let tuple: [string, number] = ["hello", 10];

enum Color {Red, Green, Blue}
let c: Color = Color.Green;

Кроме примитивных типов, TypeScript позволяет создавать пользовательские типы с помощью интерфейсов и классов.

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

Интерфейсы и классы – это ключевые инструменты для структурирования кода в TypeScript.

Интерфейсы определяют структуру объекта. Они указывают, какие свойства и методы должен содержать объект.

interface Person {
  firstName: string;
  lastName: string;
  age?: number; // Необязательное свойство
  greet(): string;
}

function greeter(person: Person) {
  return "Hello, " + person.firstName + " " + person.lastName;
}

let user: Person = {
  firstName: "John",
  lastName: "Doe",
  greet: () => "Hello!"
};

console.log(greeter(user));

Классы – это шаблоны для создания объектов. Они могут содержать свойства и методы, а также поддерживают наследование и полиморфизм.

class Animal {
  name: string;
  constructor(theName: string) {
    this.name = theName;
  }
  move(distanceInMeters: number = 0) {
    console.log(${this.name} moved ${distanceInMeters}m.);
  }
}

class Snake extends Animal {
  constructor(name: string) {
    super(name);
  }
  move(distanceInMeters = 5) {
    console.log("Slithering...");
    super.move(distanceInMeters);
  }
}

let sam = new Snake("Sammy the Python");
sam.move();

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

Хотите освоить программирование с нуля? Запишитесь на бесплатный вебинар Эльбрус Буткемп и узнайте, как стать разработчиком за 3 месяца!

Функции в TypeScript: типизация аргументов и возвращаемых значений

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

function add(x: number, y: number): number {
  return x + y;
}

let myAdd: (x: number, y: number) => number =
    function(x: number, y: number): number { return x + y; };

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

function buildName(firstName: string, lastName?: string) {
    if (lastName)
        return firstName + " " + lastName;
    else
        return firstName;
}

let result1 = buildName("Bob");  // works correctly now
let result2 = buildName("Bob", "Adams");  // okay
// let result3 = buildName("Bob", "Adams", "Sr.");  // error, too many parameters

Использование TypeScript с React: примеры и лучшие практики

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

Пример типизации компонента React:

interface Props {
  name: string;
}

interface State {
  count: number;
}

class MyComponent extends React.Component<Props, State> {
  constructor(props: Props) {
    super(props);
    this.state = { count: 0 };
  }

  render() {
    return (
      <div>
        <h1>Hello, {this.props.name}!</h1>
        <p>Count: {this.state.count}</p>
        <button onClick={() => this.setState({ count: this.state.count + 1 })}>
          Increment
        </button>
      </div>
    );
  }
}

В этом примере мы определили интерфейсы Props и State для компонента MyComponent. Это позволяет TypeScript проверять типы пропсов и состояния, предотвращая ошибки.

Лучшие практики:

• Используйте interface для определения типов пропсов и состояния.
• Используйте React.FC (Functional Component) для типизации функциональных компонентов.
• Используйте type для создания псевдонимов типов.
• Используйте as для явного приведения типов (с осторожностью).

Преимущества и недостатки TypeScript: стоит ли переходить с JavaScript

Преимущества TypeScript:

• Повышенная надежность кода: Обнаружение ошибок на этапе компиляции.
• Улучшенная читаемость и поддерживаемость: Явное указание типов делает код более понятным.
• Автодополнение и рефакторинг: Инструменты разработки лучше понимают TypeScript код.
• Поддержка современных возможностей JavaScript: TypeScript поддерживает все современные возможности JavaScript.
• Масштабируемость: TypeScript облегчает разработку больших и сложных приложений.

Недостатки TypeScript:

• Более сложный процесс разработки: Необходимо компилировать код TypeScript в JavaScript.
• Кривая обучения: Необходимо изучить новые концепции, такие как типы, интерфейсы и классы.
• Увеличение размера кодовой базы: Дополнительные типы и интерфейсы могут увеличить размер кодовой базы.

Стоит ли переходить с JavaScript?