TypeScript - Основная синтаксис

Здравствуйте, будущие маги TypeScript! ? Я рад стать вашим проводником в этом захватывающем путешествии в мир TypeScript. Как кто-то, кто уже много лет учит программированию, я могу сказать, что TypeScript - это усиленная версия JavaScript, и он сделает вашу жизнь программиста намного легче. Погружаемся!

Ваш первый код на TypeScript

Ну что ж, представьте, что вы вот-вот напишете свою первую строку на новом языке. Волнующе, правда? Давайте начнем с классической программы "Hello, World!" на TypeScript.

console.log("Hello, World!");

Теперь вы, возможно, думаете: "Подождите минутку, это же похоже на JavaScript!" И вы правы! TypeScript является надмножеством JavaScript, что означает, что любойерный код JavaScript также является корректным кодом TypeScript. Но не волнуйтесь, мы скоро доберемся до интересных специфичных для TypeScript вещей.

Давайте попробуем что-то почище:

let message: string = "Hello, TypeScript!";
console.log(message);

Вот что происходит:

• Мы объявляем переменную с именем message
• Часть : string говорит TypeScript, что эта переменная должна содержать только строковые значения
• Мы присваиваем строку "Hello, TypeScript!" этой переменной
• Наконец, мы выводим ее в консоль

Это всего лишь маленький вкус системы типов TypeScript, которая является одной из его самых мощных особенностей. Это как иметь友好ного робота-ассистента, который ловит ваши ошибки еще до того, как вы запустите код!

Компиляция и выполнение программы на TypeScript

Теперь, когда мы написали немного кода на TypeScript, как мы его запустим? Веб-браузеры и Node.js не понимают TypeScript напрямую, поэтому нам нужно скомпилировать его в JavaScript. Это как перевод с TypeScript на язык, который компьютеры уже понимают.

Вот как это делается:

1. Сохраните ваш код на TypeScript в файл с расширением .ts, например, hello.ts
2. Откройте ваш терминал или командную строку
3. Перейдите в директорию, содержащую ваш файл
4. Запустите компилятор TypeScript:

tsc hello.ts

Это создаст новый файл叫做 hello.js в той же директории. Это ваш код на TypeScript, переведенный на JavaScript!

Чтобы запустить его, вы можете использовать Node.js:

node hello.js

И вуаля! Вы должны увидеть ваше сообщение, выведенное в консоль.

Флаги компилятора

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

Вот таблица некоторых_common флагов компилятора:

Флаг	Описание
--outDir	Указывает выходную папку для всех emitted файлов
--target	Указывает целевую версию ECMAScript
--watch	Следит за входными файлами
--strict	Включает все строгие опции проверки типов

Например, если вы хотите скомпилировать ваш TypeScript в более старую версию JavaScript по причинам совместимости, вы можете использовать:

tsc --target ES5 hello.ts

Это instructs компилятор generat JavaScript, который работает с ECMAScript 5, который поддерживается старыми браузерами.

Идентификаторы в TypeScript

В программировании мы используем идентификаторы для命名 вещей, таких как переменные, функции и классы. Представьте их как ярлыки для разных частей вашего кода. В TypeScript есть несколько правил для этих имен:

• Они могут содержать буквы, цифры, подчеркивания и знаки доллара
• Они должны начинаться с буквы, подчеркивания или знака доллара
• Они чувствительны к регистру (например, myVariable и MyVariable - это разные)
• Они не могут быть зарезервированными ключами (мы поговорим о них дальше!)

Вот несколько примеров корректных идентификаторов:

let firstName: string = "John";
let _count: number = 5;
let $price: number = 9.99;
let camelCaseIsCommon: boolean = true;

И несколько некорректных:

let 123abc: string = "Invalid"; // Нельзя начинать с цифры
let my-variable: number = 10; // Нельзя использовать тире
let class: string = "Reserved keyword"; // Нельзя использовать зарезервированные ключи

Ключевые слова TypeScript

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

Вот таблица некоторых_common ключевых слов:

Ключевое слово	Описание
let	Объявляет переменную с блочным scope
const	Объявляет постоянную с блочным scope
if	Начинает оператор if
for	Начинает цикл for
function	Объявляет функцию
class	Объявляет класс
interface	Объявляет интерфейс
type	Объявляет тип

Например:

let x: number = 5;
const PI: number = 3.14159;

if (x > 0) {
    console.log("x is positive");
}

for (let i = 0; i < 5; i++) {
    console.log(i);
}

function greet(name: string): void {
    console.log(`Hello, ${name}!`);
}

class Person {
    name: string;
    constructor(name: string) {
        this.name = name;
    }
}

interface Shape {
    area(): number;
}

type Point = {
    x: number;
    y: number;
};

Каждое из этих ключевых слов имеет конкретную цель в структурировании и определении вашего кода.

Комментарии в TypeScript

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

TypeScript поддерживает три типа комментариев:

1. Однострочные комментарии:

   // Это однострочный комментарий
   let x: number = 5; // Вы также можете放置 их в конце строки

2. Многострочные комментарии:

   /* Это многострочный комментарий
   Он может занимать несколько строк
   Полезен для более длинных объяснений */
   let y: number = 10;

3. Комментарии для документации:

   
   /**

• Это комментарий для документации
• Он часто используется для генерации документации для функций или классов
• @param name Имя для приветствия
• @returns Сообщение приветствия */ function greet(name: string): string { return Hello, ${name}!; }

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

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

Одна из великолепных особенностей TypeScript - это поддержка объектно-ориентированного программирования (OOP). Если вы новички в программировании, подумайте о OOP как о способе organize вашего кода вокруг "объектов", которые имеют свойства и поведение.

Давайте создадим простой класс Car, чтобы продемонстрировать это:

class Car {
    // Свойства
    make: string;
    model: string;
    year: number;

    // Конструктор
    constructor(make: string, model: string, year: number) {
        this.make = make;
        this.model = model;
        this.year = year;
    }

    // Метод
    describe(): string {
        return `This is a ${this.year} ${this.make} ${this.model}.`;
    }
}

// Создание экземпляра класса Car
let myCar = new Car("Toyota", "Corolla", 2022);

console.log(myCar.describe()); // Выводит: This is a 2022 Toyota Corolla.

Давайте разберем это:

• Мы определяем класс Car со свойствами make, model и year
• constructor - это особый метод, который вызывается, когда мы создаем новый Car
• Метод describe возвращает строку, описывающую машину
• Мы создаем новый объект Car и вызываем его метод describe

Система типов TypeScript особенно полезна в ООП. Она может ловить ошибки, такие как попытка присвоить строку свойству year или вызов несуществующего метода.

И вот и все! Вы сделали свои первые шаги в мир TypeScript. Помните, что обучение программированию - это путешествие, а не точка назначения. Не волнуйтесь, если все не сложится сразу - продолжайте практиковаться, экспериментировать и, самое главное, получать удовольствие! Через некоторое время вы будете писать сложные приложения на TypeScript и удивляться, как вы жили без статической типизации. Счастливого кодирования! ?

Credits: Image by storyset