Долго разбирался с ошибкой TypeScript, которая была связана с неправильными одинарными кавычками.

Вот этот код не работал:

export const API_BASE = "http://localhost:3000/api";
export const API_ROUTES = {
    profile: '${API_BASE}/profile'
};

А вот этот код работал правильно:

export const API_BASE = "http://localhost:3000/api";
export const API_ROUTES = {
    profile: `${API_BASE}/profile`
};

На первый взгляд различия найти трудно. Это классическая ошибка с шаблонными строками в JavaScript/TypeScript.

Почему так произошло? Неправильный вариант (с обычными кавычками):

profile: '${API_BASE}/profile'

Что здесь происходит:

- Обычные кавычки `'` или `"` создают обычную строку.
- Внутри обычной строки `${API_BASE}` воспринимается как простой текст.
- JavaScript не выполняет подстановку переменных в обычных строках.
- В результате в `profile` попадает буквально строка: `"${API_BASE}/profile"`

Правильный вариант (с обратными кавычками):

profile: `${API_BASE}/profile`

Что здесь происходит:

- Обратные кавычки `` ` `` создают шаблонную строку (template literal).
- Внутри шаблонной строки `${...}` работает как интерполяция выражений.
- JavaScript подставляет значение переменной `API_BASE`.
- В результате в `profile` попадает: `"http://localhost:3000/api/profile"`

Демонстрация разницы:

const API_BASE = "http://localhost:3000/api";

// Обычные кавычки - нет интерполяции:
const wrong1 = '${API_BASE}/profile';
console.log(wrong1); // "${API_BASE}/profile"

const wrong2 = "${API_BASE}/profile";  
console.log(wrong2); // "${API_BASE}/profile"

// Шаблонные строки - есть интерполяция:
const correct = `${API_BASE}/profile`;
console.log(correct); // "http://localhost:3000/api/profile"

До исправления:

fetch('${API_BASE}/profile')  // Попытка загрузить: ${API_BASE}/profile
// Фактически: fetch('${API_BASE}/profile')
// Сервер не понимает такой URL и возврает HTML с ошибкой.

После исправления:

fetch('http://localhost:3000/api/profile')  // Правильный URL
// Сервер возвращает правильный ответ, потому что URL корректный.

Как запомнить:

- Обычные кавычки (`'` или `"`) - для простого текста.
- Обратные кавычки (`` ` ``) - для текста с вставками переменных `${...}`.

Это одна из самых частых ошибок при работе с шаблонными строками в JavaScript и TypeScript.