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

1. Экспорт и импорт по умолчанию.
   Экспорт по умолчанию позволяет экспортировать одно значение или функцию из файла и импортировать его, используя любое выбранное вами имя. Допустим, у нас есть файл с именем utils.tsс экспортом по умолчанию:

// utils.ts
export default function calculateSum(a: number, b: number): number {
  return a + b;
}

Мы можем импортировать эту функцию в другой файл следующим образом:

// main.ts
import sum from './utils';
console.log(sum(2, 3)); // Output: 5

1. Именованный экспорт и импорт.
   Именованный экспорт позволяет экспортировать несколько значений или функций из файла и импортировать их под конкретными именами. Рассмотрим следующий пример:

// utils.ts
export function multiply(a: number, b: number): number {
  return a * b;
}
export function divide(a: number, b: number): number {
  return a / b;
}

Чтобы импортировать именованные экспортированные файлы в другой файл, вы можете использовать деструктуризацию:

// main.ts
import { multiply, divide } from './utils';
console.log(multiply(2, 3)); // Output: 6
console.log(divide(10, 2)); // Output: 5

1. Импорт всех экспортированных файлов.
   Если у вас есть несколько именованных экспортированных файлов и вы хотите импортировать их все одновременно, вы можете использовать синтаксис * as:

// utils.ts
export function greet(name: string): void {
  console.log(`Hello, ${name}!`);
}
export function sayGoodbye(name: string): void {
  console.log(`Goodbye, ${name}!`);
}

Чтобы импортировать все экспортированные данные, вы можете использовать следующий синтаксис:

// main.ts
import * as utils from './utils';
utils.greet('Alice'); // Output: Hello, Alice!
utils.sayGoodbye('Bob'); // Output: Goodbye, Bob!

1. Повторный экспорт переменных.
   Иногда вам может потребоваться импортировать переменные из одного файла и повторно экспортировать их из другого файла. Это может быть полезно для создания центрального модуля, экспортирующего всю необходимую функциональность. Вот пример:

// utils.ts
export const PI = 3.14159;
export const getCircleArea = (radius: number): number => {
  return PI * radius * radius;
};

В другой файл вы можете импортировать и реэкспортировать эти переменные следующим образом:

// mathUtils.ts
export { PI, getCircleArea } from './utils';

Теперь вы можете импортировать реэкспортированные переменные из mathUtils.ts:

// main.ts
import { PI, getCircleArea } from './mathUtils';
console.log(PI); // Output: 3.14159
console.log(getCircleArea(5)); // Output: 78.53975

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