0Pricing
Frontend Academy · Урок

Примитивные типы, объединения и псевдонимы типов

Аннотируйте переменные типами string, number, boolean и массивами. Создавайте типы-объединения с помощью | и давайте им понятные имена через псевдонимы типов.

«Примитивные типы, объединения и псевдонимы типов» — бесплатный урок Frontend Academy на CoddyKit. Это урок 2 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Frontend Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Frontend Academy содержит 4 уроков всего.

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

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

let score: number = 0;
const greeting: string = 'Hello';
let active: boolean = true;
let data: null = null;
let placeholder: undefined;

// Inferred (no annotation needed):
const pi = 3.14;  // TypeScript knows this is number

Примитивные типы

Примитивные типы TypeScript соответствуют примитивам JavaScript: string, number (без различия между целыми и дробными числами), boolean, null, undefined, symbol, bigint.

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

function double(n: number): number {
  return n * 2;
}

function toggle(active: boolean): boolean {
  return !active;
}

Массивы

Типизируйте массив с помощью Type[] или обобщённой записи Array<Type>. Оба варианта эквивалентны.

const names: string[] = ['Alice', 'Bob'];
const scores: number[] = [98, 87, 72];
const flags: boolean[] = [true, false, true];

// Generic syntax:
const items: Array<string> = ['a', 'b'];

Объединения типов: |

Объединения типов позволяют переменной содержать значение одного из нескольких типов. Используйте оператор вертикальной черты |. Внутри условных конструкций TypeScript сужает тип.

function formatId(id: number | string): string {
  if (typeof id === 'number') {
    return `#${id.toString().padStart(6, '0')}`; // id is narrowed to number
  }
  return id.toUpperCase(); // id is narrowed to string
}

Литеральные типы

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

type Direction = 'north' | 'south' | 'east' | 'west';
type Status = 'pending' | 'active' | 'cancelled';
type DiceRoll = 1 | 2 | 3 | 4 | 5 | 6;

function move(dir: Direction) { /* ... */ }
move('north'); // OK
move('up');    // Error: Argument not assignable

Псевдонимы типов: объявление type

Ключевое слово type создаёт псевдоним типа — повторно используемое имя для любого типа. Псевдонимы подходят для примитивов, объединений, объектов, кортежей и сложных составных типов.

type UserId = string | number;
type RGB = [number, number, number]; // tuple
type Callback = (event: MouseEvent) => void;

const userId: UserId = 42;
const red: RGB = [255, 0, 0];
const handler: Callback = (e) => console.log(e.type);

Типы объектов с помощью type

Описывайте структуру объектов с помощью псевдонимов типов. Помечайте свойства как необязательные с помощью ?, а как доступные только для чтения — с помощью readonly.

type User = {
  id: number;
  name: string;
  email: string;
  role?: 'admin' | 'user'; // optional
  readonly createdAt: Date; // can't reassign
};

const user: User = {
  id: 1,
  name: 'Alice',
  email: 'alice@example.com',
  createdAt: new Date()
};

Пересечения типов: &

Объединяйте несколько типов с помощью оператора &. Результирующий тип содержит все свойства обоих типов. Это удобно для расширения типов.

type Timestamped = {
  createdAt: Date;
  updatedAt: Date;
};
type UserWithTimestamp = User & Timestamped;
// Has all User properties AND createdAt/updatedAt

Тип без проверки — обходной путь

any отключает проверку типов для значения. Этот тип заразителен: значения, полученные из any, также получают тип any. Используйте его только как крайнее средство при миграции, но не как долгосрочное решение.

let data: any = fetch('/api/data'); // no type checking
data.foo.bar.baz; // no error — and no protection

// Better: use 'unknown' and narrow it:
let raw: unknown = getExternalData();
if (typeof raw === 'string') {
  console.log(raw.toUpperCase()); // narrowed
}

Тип unknown — безопасная альтернатива типу без проверки

unknown — типобезопасный аналог any. Нельзя использовать значение типа unknown, предварительно не сузив его тип. Это заставляет Вас проверять внешние данные.

Кортежи — массивы фиксированной длины

Кортеж — это массив фиксированной длины, в котором для каждой позиции заранее известен тип.

type Point = [number, number];
const origin: Point = [0, 0];
const p: Point = [3, 4];

// React useState returns a tuple:
const [count, setCount] = useState<number>(0);

Быстрая проверка

Какая возможность TypeScript позволяет функции принимать строку или число?

Итог: примитивные типы, объединения и псевдонимы

Примитивные типы: строки, числа, логические значения, null и undefined. Массивы: Type[]. Объединения: A | B. Литеральные типы — для фиксированных наборов значений. Псевдонимы типов — для повторно используемых имён типов. Необязательные свойства обозначаются знаком ?. Для неизменяемых свойств используется readonly. Для внешних данных предпочитайте unknown, а не any.

Часто задаваемые вопросы

Урок «Примитивные типы, объединения и псевдонимы типов» бесплатный?

Да — полный текст урока «Примитивные типы, объединения и псевдонимы типов» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Frontend Academy, подпишись на CoddyKit PRO. Курс Frontend Academy содержит 4 уроков всего.

Чему я научусь в уроке «Примитивные типы, объединения и псевдонимы типов»?

Аннотируйте переменные типами string, number, boolean и массивами. Создавайте типы-объединения с помощью | и давайте им понятные имена через псевдонимы типов. Ты практикуешь Frontend Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать Frontend Academy?

Предыдущий опыт не требуется. Frontend Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 2 из 4.

Сколько времени занимает урок «Примитивные типы, объединения и псевдонимы типов»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке Frontend Academy?

Да. Каждый урок Frontend Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

  1. Зачем нужен TypeScript: типы выявляют ошибки во время компиляции
  2. Примитивные типы, объединения и псевдонимы типов
  3. Интерфейсы и типы объектов
  4. Компиляция TS и tsconfig.json
← Назад к Frontend Academy