История появления TypeScript

1.1 История появления TypeScript

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

Предыстория

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

Возникновение потребности

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

Разработка TypeScript

Microsoft, наблюдая за этими проблемами, решила создать надмножество JavaScript, которое добавило бы необходимые возможности без нарушения совместимости с существующим JavaScript-кодом. Так появился TypeScript. Его разработал Андерс Хейлсберг, известный своими работами над языками Turbo Pascal, Delphi и C#. TypeScript компилируется в чистый JavaScript, что позволяет использовать его в любом существующем проекте на JavaScript без значительных изменений.

1.2 Основные концепции TypeScript

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

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

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

Пример:

    
      let message = "Hello, TypeScript";
      let count = 10;

      function greet(name) {
        return `Hello, ${name}!`;
      }

      console.log(greet('Alice'));
    
  

    
      let message: string = 'Hello, TypeScript';
      // Переменная `message` типа string хранит сообщение 'Hello, TypeScript'

      let count: number = 10;
      // Переменная `count` типа number хранит число 10

      /* Функция `greet` принимает параметр `name` типа string */
      /* и возвращает строку. Тип возвращаемого значения функции - string */
      function greet(name: string): string {
          return `Hello, ${name}!`;
      }

      console.log(greet('Alice'));
    
  

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

2. Интерфейсы

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

Пример:

    
      function printUserInfo(user) {
        console.log(`Name: ${user.name}, Age: ${user.age}`)
      }

      const user = {
        name: "John Doe",
        age: 30
      }

      printUserInfo(user)
    
  

    
      // Определение интерфейса User с обязательными и опциональными полями
      interface User {
        name: string; // Обязательное поле `name` типа string
        age: number; // Обязательное поле `age` типа number
        isAdmin?: boolean; // Опциональное поле `isAdmin` типа boolean
      }

      /* Функция `printUserInfo` принимает объект типа User и не возвращает значения */
      /* (возвращаемый тип - void) */
      function printUserInfo(user: User): void {
        console.log(`Name: ${user.name}, Age: ${user.age}`);
      }

      /* Создание объекта `user` с полями `name` и `age`, */
      /* соответствующими интерфейсу User */
      const user: User = {
        name: 'John Doe',
        age: 30
      };

      // Вызов функции `printUserInfo` с объектом `user`
      printUserInfo(user);
    
  

В этом примере интерфейс User определяет структуру объекта пользователя. Функция printUserInfo() принимает объект, соответствующий интерфейсу User, и выводит информацию о пользователе.

3. Классы

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

Пример:

    
      class Person {
        constructor(name, age) {
          this.name = name
          this.age = age
        }

        getDetails() {
          return `Name: ${this.name}, Age: ${this.age}`
        }
      }

      const person = new Person("Alice", 25)

      console.log(person.getDetails())
    
  

    
      // Класс `Person` определяет объект с приватными свойствами `name` и `age`
      class Person {
        private name: string; // Приватное свойство `name`, доступно только внутри класса
        private age: number; // Приватное свойство `age`, доступно только внутри класса

        /* Конструктор принимает параметры `name` и `age`, */
        /* инициализирует ими свойства объекта */
        constructor(name: string, age: number) {
          this.name = name;
          this.age = age;
        }

        // Публичный метод `getDetails` возвращает строку с именем и возрастом
        public getDetails(): string {
          return `Name: ${this.name}, Age: ${this.age}`;
        }
      }

      // Создание экземпляра класса `Person` с именем 'Alice' и возрастом 25
      const person = new Person('Alice', 25);

      // Вывод результата метода `getDetails` объекта `person` в консоль
      console.log(person.getDetails());
    
  

В этом примере класс Person содержит приватные свойства name и age, а также публичный метод getDetails, который возвращает строку с информацией о человеке.

4. Модули

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

Пример:

    
      /* Файл mathUtils.ts, который содержит экспортируемые функции */
      /* add и subtrack */
      export function add(a: number, b: number): number {
        return a + b;
      }

      export function subtract(a: number, b: number): number {
        return a - b;
      }

      /* Файл main.ts, который импортирует функции add, subtrack */
      /* из файла mathUtils.ts */
      import { add, subtract } from './mathUtils';

      console.log(add(5, 3)); // 8
      console.log(subtract(5, 3)); // 2
    
  

В этом примере функции add() и subtract() экспортируются из модуля mathUtils, а затем импортируются и используются в модуле main.

1.3 Развитие JavaScript

В 2012 году, когда только появился TypeScript, в языке JavaScript не было ни классов, ни модулей, ни поддержки асинхронности. Все эти нововведения JavaScript скопировал из TypeScript. Если бы он этого не сделал, то сейчас все фронтенд-разработчики учили бы TypeScript, а о JavaScript никто бы и не слышал.

С каждой новой версией JavaScript впитывает в себя все больше фич из TypeScript. Но TypeScript тоже продолжает развиваться, так что вы всегда можете выбрать: писать на чистом JavaScript, или на языке, которым он будет через 10 лет — TypeScript.