TypeScript - Типы: Пособие для начинающих

Привет, будущая coding-суперзвезда! Сегодня мы окунемся в fascинирующий мир типов TypeScript. Не волнуйтесь, если вы никогда не писали ни строчки кода раньше - я буду вашим доброжелательным проводником на этом захватывающем пути. К концу этого руководства вы будете удивлены, сколько вы узнали. Так что давайте начнем!

Что такое типы в TypeScript?

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

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

Тип Any: джокер в колоде TypeScript

Давайте начнем с самого гибкого типа в TypeScript: any. Это как джокер в колоде карт - он может быть чем угодно!

let myVariable: any = 42;
myVariable = "Hello, World!";
myVariable = true;

В этом примере myVariable может быть числом, затем строкой, затем булевым значением. Это очень гибко, но с великой силой приходит великая ответственность. Использование any слишком часто аннулирует смысл использования TypeScript, поэтому используйте его экономно!

Встроенные типы: строительные блоки TypeScript

TypeScript предоставляет несколько встроенных типов, которые покрывают большинство наших потребностей. Давайте рассмотрим их по одному:

1. Number

let age: number = 30;
let price: number = 9.99;

Числа в TypeScript могут быть целыми или浮点ными. Нет необходимости беспокоиться о разных типах чисел, как в некоторых других языках!

2. String

let name: string = "Alice";
let greeting: string = `Hello, ${name}!`;

Строки могут быть определены с использованием одинарных кавычек, двойных кавычек или обратных кавычек. Обратные кавычки позволяют嵌入表达式 с использованием ${}.

3. Boolean

let isStudent: boolean = true;
let hasPassedExam: boolean = false;

Булевы значения просты - они могут быть либо true, либо false. Представьте их как да/нет вопросы для вашего кода.

4. Array

let numbers: number[] = [1, 2, 3, 4, 5];
let fruits: Array<string> = ["apple", "banana", "orange"];

Массивы могут содержать несколько значений того же типа. Мы можем определить их с использованием квадратных скобок или синтаксиса Array<T>.

5. Tuple

let person: [string, number] = ["Alice", 30];

Кортежи - это массивы с固定ным количеством элементов, где каждый элемент может иметь разный тип. Они как маленькая, организованная коробка с конкретными отделениями для каждого предмета.

6. Enum

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

Перечисления позволяют нам определять набор именованных констант. Они великолепны для представления фиксированного набора вариантов.

7. Void

function logMessage(message: string): void {
console.log(message);
}

Void используется для指示, что функция не возвращает ничего. Это как отправка письма без ожидания ответа.

8. Null и Undefined

let notDefined: undefined = undefined;
let empty: null = null;

Эти типы представляют собой отсутствие значения. Они как пустые коробки - одна, преднамеренно пустая (null), и одна, еще не заполненная (undefined).

Вот таблица, резюмирующая встроенные типы, которые мы рассмотрели:

Тип	Описание	Пример
number	Числовые значения (целые или浮点ные)	let age: number = 30;
string	Текстовые данные	let name: string = "Alice";
boolean	True или false значения	let isStudent: boolean = true;
array	Коллекция значений того же типа	let numbers: number[] = [1, 2, 3];
tuple	Массив с фиксированным количеством элементов конкретных типов	let person: [string, number] = ["Alice", 30];
enum	Набор именованных констант	enum Color { Red, Green, Blue }
void	Отсутствие значения возврата в функциях	function logMessage(message: string): void { ... }
null	Преднамеренное отсутствие любого объектного значения	let empty: null = null;
undefined	Переменная, которой не присвоено значение	let notDefined: undefined = undefined;

Пользовательские типы: Создание своих инструментов

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

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

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

interface Person {
name: string;
age: number;
greet(): void;
}

let alice: Person = {
name: "Alice",
age: 30,
greet() {
console.log(`Hello, my name is ${this.name}`);
}
};

В этом примере мы определили интерфейс Person и создали объект, который соответствует этой структуре. Это как создание формы, которую должны заполнить все - каждому нужно предоставить одну и ту же информацию.

2. Классы

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

class Student {
name: string;
grade: number;

constructor(name: string, grade: number) {
this.name = name;
this.grade = grade;
}

study() {
console.log(`${this.name} is studying hard!`);
}
}

let bob = new Student("Bob", 10);
bob.study(); // Выводит: "Bob is studying hard!"

Здесь мы создали класс Student с свойствами (name и grade) и методом (study). Мы можем создать сколько угодно студентов, используя этот класс.

3. Синонимы типов

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

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

let center: Point = { x: 0, y: 0 };

В этом примере мы создали тип Point, представляющий точку в 2D пространстве. Это простой способ grouped связанных свойств вместе.

4. Унион-типы

Унион-типы позволяют значению быть одним из нескольких типов. Это как сказать: "Это может быть или это, или то."

type Result = number | string;

function getResult(value: boolean): Result {
return value ? "Success" : 404;
}

Здесь Result может быть либо числом, либо строкой. Это полезно, когда значение может быть разных типов в зависимости от определенных условий.

5. Перекрестные типы

Перекрестные типы组合多个类型 в один. Это как сказать: "Это должно быть и это, и то."

interface Colorful {
color: string;
}

interface Circle {
radius: number;
}

type ColorfulCircle = Colorful & Circle;

let myCircle: ColorfulCircle = {
color: "red",
radius: 5
};

В этом примере ColorfulCircle и Colorful, и Circle. Он должен иметь и color, и radius.

И вот и все! Мы рассмотрели основы типов TypeScript, от гибкого any типа до встроенных и пользовательских типов. Помните, типы в TypeScript - это как ваши кодовые суперсилы - они помогают вам писать чище, более надежный код и ловить ошибки до того, как они станут проблемами.

Пока вы продолжаете свое путешествие в TypeScript, продолжайте экспериментировать с этими типами. Попробуйте комбинировать их по-разному, и не бойтесь犯错 - так мы учимся! Before you know it, you'll be typing away like a pro, creating robust and error-free code.

Счастливого кодирования, и да будет ваш тип всегда силен!

Credits: Image by storyset