8.1 Совместимость TypeScript с JavaScript
TypeScript расширяет возможности JavaScript, но это не самое важное. Одним из ключевых аспектов работы с TypeScript является интеграция с существующими модулями JavaScript. В этой лекции вы научитесь тому, как использовать модули из JavaScript в проектах TypeScript, обеспечивая совместимость и предоставляя примеры различных сценариев использования.
Совместимость TypeScript с JavaScript
TypeScript полностью совместим с JavaScript, что позволяет использовать JavaScript-библиотеки и модули без необходимости переписывать их на TypeScript. Это достигается через:
- Декларации типов (Type Declarations): обеспечивают статическую типизацию для существующих JavaScript-модулей.
- Модули ECMAScript (ESM): поддержка стандартных модулей ES.
- CommonJS и AMD: поддержка распространенных стандартов модулей, используемых в Node.js и браузерах.
Декларации типов мы рассматривали в предыдущей лекции, тут же мы рассмотрим оставшиеся два пункта.
8.2 Импорт модулей стандарта ES6
TypeScript поддерживает стандарты модулей ECMAScript, что делает интеграцию с современными J avaScript-библиотеками очень простой.
Синтаксис:
import name from path
Где:
path— имя модуля и путь к немуname— имя, которое будет содержать все, что экспортируется из модуля
Пример 1: Импорт всего модуля
Если у вас есть модуль с несколькими экспортами, вы можете импортировать его целиком под одним именем:
// math.js
export function add(x, y) {
return x + y;
}
export function subtract(x, y) {
return x - y;
}
// main.js
import * as Math from './math';
console.log(Math.add(5, 3)); // Вывод: 8
console.log(Math.subtract(5, 3)); // Вывод: 2
Пример 2: Импорт конкретных частей модуля
Вы можете импортировать только те части модуля, которые вам нужны:
// math.js
export function add(x, y) {
return x + y;
}
export function subtract(x, y) {
return x - y;
}
// main.js
import { add } from './math';
console.log(add(5, 3)); // Вывод: 8
Пример 3: Импорт с переименованием
Вы можете переименовать импортируемые части модуля, чтобы избежать конфликтов имен:
// math.js
export function add(x, y) {
return x + y;
}
export function subtract(x, y) {
return x - y;
}
// main.js
import { add as sum, subtract as difference } from './math';
console.log(sum(5, 3)); // Вывод: 8
console.log(difference(5, 3)); // Вывод: 2
Пример 4: Импорт по умолчанию и именованный импорт
Вы можете комбинировать импорт по умолчанию и именованный импорт из одного модуля:
// math.js
export default function multiply(x, y) {
return x * y;
}
export function add(x, y) {
return x + y;
}
// main.js
import multiply, { add } from './math';
console.log(multiply(5, 3)); // Вывод: 15
console.log(add(5, 3)); // Вывод: 8
Пример 5: Динамический импорт
ES6 также поддерживает динамический импорт модулей, который позволяет загружать модули асинхронно:
// main.js
import('./math').then(Math => {
console.log(Math.add(5, 3)); // Вывод: 8
});
8.3 Импорт с помощью устаревшего стандарта CommonJS
В TypeScript вы можете использовать модули стандарта CommonJS, так как TypeScript поддерживает работу с CommonJS модулями. Вот несколько примеров импорта подмодулей стандарта CommonJS в TypeScript.
Синтаксис:
const name =
require(path)
Где:
path— имя модуля и путь к немуname— имя, которое будет содержать все, что экспортируется из модуля
Пример 1: Импорт всего модуля
JavaScript-модуль (utils.js):
function add(x, y) {
return x + y;
}
function subtract(x, y) {
return x - y;
}
module.exports = {
add,
subtract
};
Использование модуля в TypeScript (main.ts):
const utils = require('./utils');
console.log(utils.add(2, 3)); // Вывод: 5
console.log(utils.subtract(5, 3)); // Вывод: 2
Пример 2: Импорт конкретных частей модуля
const { add, subtract } = require('./utils');
console.log(add(2, 3)); // Вывод: 5
console.log(subtract(5, 3)); // Вывод: 2
Пример 3: Импорт с переименованием
const { add: sum, subtract: difference } = require('./utils');
console.log(sum (2, 3)); // Вывод: 5
console.log(difference (5, 3)); // Вывод: 2
8.4 Автоматическое создание деклараций типов
Инструмент tsc (TypeScript Compiler) может автоматически создавать декларации типов для ваших TypeScript-модулей, что облегчает интеграцию с JavaScript-кодом.
Пример: Автоматическое создание деклараций типов
TypeScript-модуль (math.ts):
export const PI = 3.14;
export function add(x: number, y: number): number {
return x + y;
}
Файл tsconfig.json для автоматической генерации деклараций:
{
"compilerOptions": {
"declaration": true,
"outDir": "./dist",
"target": "es6",
"module": "commonjs"
},
"include": ["src"]
}
Компиляция TypeScript-кода:
tsc
Этот процесс создаст файл деклараций типов math.d.ts в каталоге dist, который можно использовать в JavaScript-проектах.
8.5 Интеграция с инструментами сборки
TypeScript легко интегрируется с различными инструментами сборки, такими как Webpack и Rollup, что упрощает использование JavaScript-модулей в TypeScript-проектах.
Пример: Интеграция с Webpack
Установка Webpack и ts-loader:
npm install webpack webpack-cli ts-loader --save-dev
Конфигурация Webpack (webpack.config.js):
const path = require('path');
module.exports = {
entry: './src/index.ts',
module: {
rules: [
{
test: /\.ts$/,
use: 'ts-loader',
exclude: /node_modules/
}
]
},
resolve: {
extensions: ['.ts', '.js']
},
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
}
};
Использование JavaScript-модуля в TypeScript (index.ts):
import { add } from './utils';
console.log(add(2, 3)); // Вывод: 5
Этот пример показывает, как настроить Webpack для работы с TypeScript и JavaScript-модулями.
ПЕРЕЙДИТЕ В ПОЛНУЮ ВЕРСИЮ