Опубликовано 7 сентября • Первоначально опубликовано на сайте htmlallthethings.com.

Кому следует изучать TypeScript?

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

Однако, если вы изучаете веб-разработку с намерением получить работу, то ДА! Изучив его, вы не только получите конкурентное преимущество, но и получите право на более широкий спектр вакансий (просто проверьте местные списки вакансий, чтобы увидеть 📰)!

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

Как создать проект TypeScript

Вы можете попрактиковаться в использовании TypeScript, создав проект React с помощью Vite и выбрав TypeScript, когда вас попросят выбрать вариант. Чтобы получить руководство для начинающих, вы можете следовать моей статье и писать код вместе с ней: Как создать локальную среду React с помощью Vite.

Чтобы вы могли получить дополнительные преимущества TypeScript при изучении и внедрении его основ, вы можете отключить строгий режим. Чтобы отключить строгий режим, установите для параметра strict значение false в файле tsconfig.json.

Чтобы отключить строгий режим в TypeScript, измените файл tsconfig.json следующим образом:

{
  "compilerOptions": {
    "strict": false
  }
}

Основы TypeScript

😱 Прежде чем вы нажмете кнопку паники, потому что думаете, что вам нужно стать профессионалом в TypeScript, чтобы претендовать на работу, Майк заверяет нас, что мы можем начать с изучения основ TypeScript, а затем постепенно внедрять более продвинутые функции. сильный>

Основы TypeScript включают в себя:

• Статическая типизация
• Интерфейсы и классы
• Дженерики
• Вывод типа

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

JavaScript использует динамическую типизацию, которая позволяет переназначать тип переменной во всей вашей программе.

Например, если у вас есть переменная для сотрудника с номером в качестве типа переменной со значением (12), а затем позже необходимо также включить область сотрудника (RED), вы можете переназначить тип переменной в строку, чтобы новое значение (RED12) работало.

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

// JavaScript example (dynamic typing)
let employee = 12;
employee = "RED12";
// TypeScript example (static typing)
let employeeId: number = 12;
// employeeId = "RED12"; // This would cause a type error in TypeScript

Пересечение TypeScript

Пересечение TypeScript — это способ объединить несколько типов в один, позволяя переменной или объекту обладать свойствами и функциями всех объединенных типов. Он обозначается амперсандом (&) между типами.

// Define two types
type EmployeeCode = {
  empCode: string;
};
type EmployeeNumber = {
  empNumber: number;
};
// Intersection type combining EmployeeCode and EmployeeNumber 
type Employee = EmployeeCode & EmployeeNumber ;
// Create an object with the intersection type
const employeeInfo: Employee = {
  empCode: "RED",
  empNumber: 12,
};

TypeScript введите любой

TypeScript не предназначен для использования в рабочем коде. Он имеет тип «любой», который можно использовать, если вы не уверены, каким должен быть тип. Когда вы изучаете TypeScript, Майк говорит нам, что это приемлемое решение.

let unknownType: any;
unknownType = "Hitchhiker's guide to the galaxy";
unknownType = 42;
unknownType = true;

📝 Примечание. Чтобы разрешить использование any типа в TypeScript, установите для параметра strict значение false в tsconfig.json файле0

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

Майк объясняет, что и интерфейсы, и классы основаны на объектно-ориентированных принципах. Итак, что же это за принципы? Объектно-ориентированные принципы — это набор идей, используемых в программировании для организации кода вокруг объектов, которые представляют реальные вещи или концепции.

Интерфейсы

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

interface Wizard {
  firstName: string;
  lastName: string;
}
const dracoMalfoy: Wizard = {
  firstName: "Draco",
  lastName: "Malfoy",
};

Вы можете создать другой интерфейс, например для спортивного квиддича, и унаследовать информацию от интерфейса Wizard.

interface QuidditchPlayer extends Wizard {
  position: string;
  team: string;
}
const quidditchPlayer: QuidditchPlayer = {
  firstName: "Draco",
  lastName: "Malfoy",
  position: "Seeker",
  team: "Slytherin",
};

Классы

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

class Wizard {
  firstName: string;
  lastName: string;
  constructor(firstName: string, lastName: string) {
    this.firstName = firstName;
    this.lastName = lastName;
  }
  getFullName(): string {
    return `${this.firstName} ${this.lastName}`;
  }
}
const dracoMalfoy = new Wizard("Draco", "Malfoy");
class QuidditchPlayer extends Wizard {
  position: string;
  team: string;
  constructor(firstName: string, lastName: string, position: string, team: string) {
    super(firstName, lastName);
    this.position = position;
    this.team = team;
  }
  getPlayerInfo(): string {
    return `${this.getFullName()} is a ${this.position} for the ${this.team} Quidditch team.`;
  }
}
const quidditchPlayer = new QuidditchPlayer("Draco", "Malfoy", "Seeker", "Slytherin");

Дженерики

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

function starTrek<T>(entry: Array<T>): Array<T> {
  return entry;
}
let starTrekData = starTrek<(number | string | boolean)[]>([1701, "Live long and prosper.", true]);

В этом коде у нас есть универсальная функция starTrek, которая принимает параметр entry типа Array<T> и возвращает массив того же типа Array<T>. <T> обозначает универсальный тип, позволяющий функции работать с различными типами данных в массиве, сохраняя при этом безопасность типов.

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

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

💡 Совет: Отличный способ попрактиковаться в TypeScript — преобразовать свои проекты JavaScript в TypeScript!

Компиляция TypeScript

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

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

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

1. Установите TypeScript глобально с помощью npm: npm install -g typescript
2. Создайте файл TypeScript, например, example.ts.
3. Скомпилируйте файл TypeScript в JavaScript: tsc example.ts
4. Чтобы настроить компилятор TypeScript на непрерывную работу во время разработки, используйте флаг --watch: tsc example.ts --watch

tsc example.ts --watch

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

Файл tsconfig.json — это файл конфигурации для компилятора TypeScript. Он позволяет настраивать такие параметры, как целевую версию JavaScript, строгий режим и выходной каталог. Чтобы создать и настроить файл tsconfig.json, выполните следующие действия:

1. В корневом каталоге вашего проекта создайте новый файл с именем «tsconfig.json».
2. Откройте файл tsconfig.json в текстовом редакторе.
3. Добавьте следующую базовую конфигурацию:

{
  "compilerOptions": {
    "target": "es5",
    "strict": true,
    "outDir": "./dist"
  }
}

1. Сохраните файл.

В этом примере для параметра «target» установлено значение «es5», что означает, что компилятор TypeScript будет генерировать код JavaScript, совместимый со стандартом ECMAScript 5. Для параметра «strict» установлено значение «true», что включает строгую проверку типов для повышения качества кода. Параметр «outDir» указывает выходной каталог для скомпилированных файлов JavaScript, которым в данном случае является папка «dist» в корневом каталоге проекта.

Вы можете дополнительно настроить файл tsconfig.json, добавив дополнительные параметры в зависимости от требований вашего проекта.

Начните изучать TypeScript

Чтобы начать изучать TypeScript, выполните следующие действия:

1. Посетите официальную документацию TypeScript: https://www.typescriptlang.org/docs/
2. Пройдите бесплатный курс Scrimba от Дилана Израэля: https://www.youtube.com/watch?v=Z7O5pQwCmqI&t=21s
3. Потренируйтесь, конвертируя существующие проекты JavaScript в TypeScript.
4. Присоединяйтесь к форумам или сообществам, связанным с TypeScript, для получения поддержки и налаживания связей.

Следуя этим шагам и используя предоставленные ресурсы, вы будете на верном пути к освоению TypeScript и совершенствованию своих навыков веб-разработки!

Обязательно послушайте выпуск!

Эпизод 249 Нужно ли вам изучать TypeScript в 2023 году?

Обязательно ознакомьтесь с HTML All The Things в социальных сетях!

• Твиттер
• Линкедин
• "ТИК Так"
• Инстаграм

Скримба Скидка!

• Научитесь программировать с помощью Scrimba с их интерактивным дополнительным редактором кода.
• Присоединяйтесь к их эксклюзивным сообществам и сетям Discord, чтобы найти свою первую работу!
• Используйте этот URL-адрес, чтобы получить скидку 10 % на все платные планы: tinyurl.com/ScrimbaHATT

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

Другие мои статьи по HTML All The Things

• Освоение основ JavaScript: повышение готовности вашего фреймворка
• Как перейти от JR Dev к востребованному разработчику: ваш путь к трудоустройству
• Как начать изучать веб-разработку с нуля

Заключение

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

Изучение TypeScript улучшит ваши навыки веб-разработки, предоставляя статическую типизацию, улучшенные инструменты и надежную поддержку кода. Это также откроет двери для новых возможностей трудоустройства и даст вам конкурентное преимущество!

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

Помните, что TypeScript необходимо скомпилировать, поскольку браузер не может его напрямую прочитать! Чтобы скомпилировать TypeScript, используйте компилятор TypeScript (tsc) и настройте его с помощью файла tsconfig.json.

Чтобы начать изучение TypeScript, вы можете пройти БЕСПЛАТНЫЙ курс Scrimba, который ведет знаменитый технический специалист Дилан Исраэль! Введение в машинопись с Диланом Израэлем

Давайте соединимся! Я активен в LinkedIn и Twitter.

Все мои статьи можно прочитать на selftaughttxg.com