Когда используется undefined в TypeScript?

Использование undefined в TypeScript

undefined — это значение, которое я постоянно встречаю при разработке. Вот подробный анализ всех способов его использования в TypeScript.

1. Переменные без инициализации

let x: number;  // x is undefined
console.log(x);  // Error: Variable 'x' is used before being assigned

// Правильно
let x: number | undefined;
if (x !== undefined) {
  console.log(x);
}

2. Функции без return

// Функция без return автоматически возвращает undefined
function logMessage(msg: string): undefined {
  console.log(msg);
  // return не нужен, неявно возвращает undefined
}

const result = logMessage('hello');  // result is undefined

3. Необязательные параметры функций

// ? делает параметр необязательным (может быть undefined)
function greet(name?: string): string {
  if (name === undefined) {
    return 'Hello, guest!';
  }
  return `Hello, ${name}!`;
}

greet();           // name is undefined
greet('John');     // name is 'John'

// Альтернатива с дефолт значением
function greet(name: string = 'Guest'): string {
  return `Hello, ${name}!`;
}

4. Необязательные свойства объектов

interface User {
  id: number;
  name: string;
  email?: string;      // может быть undefined
  phone?: string;
}

const user: User = {
  id: 1,
  name: 'John'
  // email и phone не обязательны
};

// Проверка
if (user.email !== undefined) {
  console.log(user.email);
}

// Optional chaining (безопасный доступ)
const domain = user.email?.split('@')[1];  // undefined если email undefined

5. Array элементы

// Массив может содержать undefined
const values: (string | undefined)[] = ['a', undefined, 'c'];

// Фильтр undefined
const defined = values.filter((v): v is string => v !== undefined);

// Или
const defined = values.filter((v) => v !== undefined) as string[];

6. Null vs Undefined

// undefined — переменная существует, но нет значения
// null — явное отсутствие значения

let undef: undefined;  // только undefined
let nullable: null;    // только null
let maybe: string | null | undefined;  // может быть чем угодно

// В коде
function getValue(id: number): string | null | undefined {
  if (id < 0) return null;         // явное отсутствие
  if (id === 0) return undefined;  // нет значения
  return 'value';
}

// Лучше выбирай один подход
function getValue(id: number): string | undefined {
  // используй undefined везде для консистентности
}

7. Type guards для undefined

// Проверка на undefined
function process(value: string | undefined) {
  if (value === undefined) {
    return 'No value';
  }
  return value.toUpperCase();
}

// Nullish coalescing operator (??)
const result = user.email ?? 'no-email@example.com';

// Logical OR vs Nullish coalescing
const count1 = 0 || 10;     // 10 (неправильно для 0)
const count2 = 0 ?? 10;     // 0 (правильно)

// Type predicate
function isDefined<T>(value: T | undefined): value is T {
  return value !== undefined;
}

const values = ['a', undefined, 'b'];
const defined = values.filter(isDefined);  // ['a', 'b']

8. Partial и Record типы

// Partial<T> делает все свойства необязательными
interface User {
  id: number;
  name: string;
  email: string;
}

type PartialUser = Partial<User>;
// эквивалентно:
// { id?: number; name?: string; email?: string; }

// Использование
const update: PartialUser = { name: 'John' };

// Record для необязательных значений
type UserRecord = Record<string, string | undefined>;
const cache: UserRecord = {
  user1: 'value1',
  user2: undefined
};

9. React компоненты

// Props могут быть undefined
interface Props {
  title?: string;
  onClick?: () => void;
}

function Button({ title, onClick }: Props) {
  return (
    <button onClick={onClick}>
      {title ?? 'Click me'}
    </button>
  );
}

10. Strictness настройки

// tsconfig.json
{
  "compilerOptions": {
    "strict": true,              // Включить все strict checks
    "strictNullChecks": true,    // Нельзя присвоить undefined/null обычной переменной
    "strictUndefinedChecks": true, // Не используй undefined без проверки
    "noUncheckedIndexedAccess": true, // Доступ по индексу может быть undefined
    "noImplicitUndefined": true  // Нельзя использовать undefined без явного типа
  }
}

11. Practical patterns

Pattern 1: Safe navigation

function getEmail(user?: { email?: string }): string | undefined {
  return user?.email;
}

Pattern 2: Default values

function greet(name: string | undefined = 'Guest') {
  console.log(`Hello, ${name}`);
}

Pattern 3: Narrow types

function process(value: string | undefined) {
  const typed = value as string;  // Dangerous!
  
  // Better
  if (!value) return;
  // теперь value точно string
  console.log(value.toUpperCase());
}

12. Common mistakes

// ❌ Неправильно
function fetch(url: string): Promise<Data> {
  // может вернуть undefined, но тип говорит Data
}

// ✅ Правильно
function fetch(url: string): Promise<Data | undefined> {
  // явно указываем, что может быть undefined
}

// ❌ Неправильно
const user = getUser();  // может быть undefined
console.log(user.name);  // Error!

// ✅ Правильно
const user = getUser();
if (user) {
  console.log(user.name);
}

// ✅ Или
const user = getUser();
console.log(user?.name);

Мой подход на production

Правила:

1. Всегда типизируй undefined явно — не полагайся на неявное
2. Используй ?? (nullish coalescing) вместо || для 0, false
3. Используй ?. (optional chaining) для безопасного доступа
4. Проверяй перед использованием — guard clauses
5. Выбери null или undefined — не смешивай
6. Включи strict mode в tsconfig

Пример хорошего кода:

interface User {
  id: number;
  name: string;
  email?: string;
  preferences?: {
    notifications?: boolean;
  };
}

function sendEmail(user: User): void {
  if (!user.email) {
    console.log('No email for user');
    return;
  }
  
  const notifEnabled = user.preferences?.notifications ?? true;
  
  if (notifEnabled) {
    console.log(`Sending to ${user.email}`);
  }
}

Главное: undefined — это инструмент для точной типизации. Используй его правильно, и TypeScript поймет твой код лучше.