TypeScript - Type Annotations: A Beginner's Guide

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

Что такое типовые аннотации?

Представьте, что вы пакуете вещи для поездки. У вас есть разные сумки для разных вещей - одна для одежды, одна для туалетных принадлежностей и одна для электроники. Тípové anotace v TypeScript jsou jako этикетки на этих сумках. Они告诉我们 и компьютеру, с каким видом "вещей" (данными) мы имеем дело.

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

Почему использовать типовые аннотации?

1. Обнаружение ошибок заранее: Они помогают нам заметить ошибки до выполнения кода.
2. Лучше документация кода: Они делают наш код easier к пониманию.
3. Улучшенный опыт разработки: Они предоставляют лучшую автозавершение и IntelliSense в наших редакторах кода.

Теперь давайте посмотрим на разные способы использования типовых аннотаций.

Аннотации типов переменных

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

Основной синтаксис

let variableName: Type = value;

Давайте рассмотрим несколько примеров:

let myName: string = "Alice";
let myAge: number = 30;
let isStudent: boolean = true;

В этих примерах мы говорим TypeScript:

• myName должен содержать только текст (строки)
• myAge должен быть только числом
• isStudent должен быть только true или false (boolean)

Если мы пытаемся присвоить другое типа значение позже, TypeScript предупредит нас:

myName = 42; // Error: Type 'number' is not assignable to type 'string'

Массивы и.special Types

Мы также можем аннотировать массивы и использовать special типы:

let favorites: string[] = ["pizza", "coding", "cats"];
let anything: any = "I can be anything!";
let maybe: unknown = 4;

• string[] означает массив строк
• any - special тип, который может быть чем угодно (используйте осторожно!)
• unknown - более безопасная альтернатива any

Аннотации типов функций

Функции могут иметь типовые аннотации для параметров и значений возврата.

Основной синтаксис

function functionName(param1: Type1, param2: Type2): ReturnType {
// тело функции
}

Давайте рассмотрим несколько примеров:

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

function add(a: number, b: number): number {
return a + b;
}

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

В этих примерах:

• greet принимает строку и возвращает строку
• add принимает два числа и возвращает число
• logMessage принимает строку, но не возвращает ничего (void)

Стрелочные функции

Стрелочные функции также могут иметь типовые аннотации:

const multiply = (a: number, b: number): number => a * b;

Аннотации типов свойств объектов

工作时使用对象时， мы можем аннотировать их свойства.

Основной синтаксис

let objectName: { property1: Type1; property2: Type2 } = {
property1: value1,
property2: value2
};

Давайте рассмотрим пример:

let user: { name: string; age: number; isAdmin: boolean } = {
name: "Bob",
age: 25,
isAdmin: false
};

Здесь мы определяем объект с конкретными типами свойств.

Интерфейсы для сложных объектов

Для более сложных объектов мы можем использовать интерфейсы:

interface Person {
name: string;
age: number;
hobbies: string[];
greet: () => void;
}

let employee: Person = {
name: "Charlie",
age: 30,
hobbies: ["reading", "gaming"],
greet: () => console.log("Hello!")
};

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

Объединение всего вместе

Теперь, когда мы узнали о различных типовых аннотациях, давайте увидим их в действии с более сложным примером:

interface Book {
title: string;
author: string;
pages: number;
isPublished: boolean;
}

function createBookList(books: Book[]): string[] {
return books.map(book => `${book.title} by ${book.author}`);
}

const myBooks: Book[] = [
{ title: "TypeScript 101", author: "Code Wizard", pages: 200, isPublished: true },
{ title: "JavaScript Adventures", author: "JS Ninja", pages: 150, isPublished: false }
];

const bookTitles: string[] = createBookList(myBooks);
console.log(bookTitles);

Этот пример объединяет различные концепции, которые мы узнали:

• Мы определяем интерфейс Book
• Мы создаем функцию createBookList, которая принимает массив объектов Book и возвращает массив строк
• Мы создаем массив объектов Book
• Мы вызываем функцию и сохраняем результат в переменную с правильной типовой аннотацией

Заключение

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

Продолжая ваше кодирование, продолжайте экспериментировать с различными типами и аннотациями. Не бойтесь犯 ошибок - так мы учимся и grows!

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

Аннотация типа	Пример	Описание
Основные типы	let name: string = "Alice";	Для простых значений, таких как строки, числа, булевы значения
Типы массивов	let numbers: number[] = [1, 2, 3];	Для массивов определенного типа
Типы функций	function add(a: number, b: number): number	Для параметров функции и значений возврата
Типы объектов	let user: { name: string; age: number }	Для свойств объектов
Интерфейсы	interface Person { name: string; age: number }	Для определения сложных форм объектов

Продолжайте программировать, stay curious, и помните - каждый мастер когда-то был новичком. Счастливого TypeScripting! ??‍??‍?

Credits: Image by storyset