Изучите TypeScript за 5 минут

1656587169 izuchite typescript za 5 minut
Скриншот-2019-06-06-на-07.58.51
Нажмите здесь, чтобы просмотреть бесплатный курс Scrimba на TypeScript

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

Он открытый код и поддерживается Microsoft с момента его создания в 2012 году. Однако TypeScript получил свой начальный прорыв в качестве основного языка программирования в Angular 2. С тех пор он продолжает расти, также в сообществах React и Vue.

В этом учебнике вы узнаете основы TypeScript с помощью практических примеров.

Мы также собираемся запустить бесплатный курс TypeScript из 22 частей по Scrimba. Оставьте здесь свою электронную почту, если вы хотите получить ранний доступ!

Давайте начнем.

Установка TypeScript

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

npm install -g typescript

После установки мы можем проверить его, выполнив команду tsc -v который отобразит версию установленного TypeScript.

Написание какого кода

Давайте создадим наш первый файл TypeScript и напишем в нем некоторый код. Откройте любимый IDE или текстовый редактор и создайте файл с именемfirst.ts— Для файлов TypeScript мы используем расширение.ts

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

let a = 5;  
let b = 5;  
let c = a + b;

console.log(c);

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

Составление TypeScript

Для компиляции мы выполним команду of tsc filename.tsкоторый создает JavaScript с тем же именем файла, но с другим расширением, и который мы в конце концов можем передать нашим браузерам.

Поэтому откройте терминал в местоположении файла и выполните следующую команду:

tsc first.ts

Совет: Если вы хотите собрать все файлы TypeScript внутри любой папки, воспользуйтесь командой: tsc *.ts

Типы данных

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

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

Синтаксис присвоения типа любой переменной заключается в написании имени переменной со следующим символом a : знак, а затем название типа, за которым следует a = знак и значение переменной.

В TypeScript есть три разных типа: the any тип, в Built-in типы и User-defined типы. Давайте рассмотрим каждую из них.

любого типа

The any Тип данных является сверхмножеством всех типов данных в TypeScript. Предоставление любого сменного типа any эквивалентно отказу от проверки типа для переменной.

let myVariable: any = 'This is a string'

Встроенные типы

Это типы, встроенные в TypeScript. Они включают number, string, boolean, void, null и undefined.

let num: number = 5;  
let name: string = 'Alex';  
let isPresent: boolean = true;

Типы, определенные пользователем

The User-defined типы включают enum, class, interface, arrayи tuple. Некоторые из них мы обсудим позже в этой статье.

Объектно-ориентированное программирование

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

Класс

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

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

class Car {

// fields  
  model: String;  
  doors: Number;  
  isElectric: Boolean;

constructor(model: String, doors: Number, isElectric: Boolean) {  
    this.model = model;  
    this.doors = doors;  
    this.isElectric = isElectric;  
  }

displayMake(): void {  
    console.log(`This car is ${this.model}`);  
  }

}

В приведенном выше примере мы объявили a Car класса вместе с некоторыми его свойствами, которые мы инициализируем в constructor. У нас также есть метод, отображающий сообщения, используя его свойство.

Давайте посмотрим, как мы можем создать новый экземпляр этого класса:

const Prius = new Car('Prius', 4, true);  
Prius.displayMake(); // This car is Prius

Чтобы создать объект класса, мы используем ключевое слово of new и вызвать конструктор класса и передать ему свойства. Теперь этот объект Prius имеет свои свойства model, doorsи isElectric. Объект также может вызвать метод of displayMakeкоторый будет иметь доступ к свойствам Prius.

Интерфейс

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

Интерфейсы лучше всего описать на реальном примере. Итак, допустим, что у нас есть объект Car:

const Car = {  
  model: 'Prius',  
  make: 'Toyota',  
  display() => { console.log('hi'); }  
}

Если мы посмотрим объект выше и попытаемся вытащить его подпись, это будет:

{  
  model: String,  
  make: String,  
  display(): void  
}

Если мы хотим повторно использовать эту подпись, мы можем объявить ее посредством интерфейса. Для создания интерфейса мы используем ключевое слово interface.

interface ICar {  
  model: String,  
  make: String,  
  display(): void  
}

const Car: ICar = {  
  model: 'Prius',  
  make: 'Toyota',  
  display() => { console.log('hi'); }  
}

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

Вывод

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

TypeScript набирает значительные обороты в мире веб-разработки. Также растет количество использующих его разработчиков React. TypeScript – это, безусловно, то, что должен знать любой фронтенд-разработчик в 2018 году.

Счастливого кодирования 🙂

Спасибо, что прочли! Меня зовут Пер Борген, я соучредитель Scrimba – самый простой способ научиться кодировать. Если вы хотите научиться создавать современный веб-сайт на профессиональном уровне, посетите наш курс по адаптивному веб-дизайну.

буткемп-баннер
Нажмите здесь, чтобы перейти к расширенному учебному лагерю.

Добавить комментарий

Ваш адрес email не будет опубликован.