TypeScript экспорт не определен

Я пытаюсь использовать экспорт и импорт, но он не работает. Я получаю сообщение об ошибке

Вот мой код HTML:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
    @RenderBody()

    <script src="~/scripts/user.js"></script>
    <script src="~/scripts/main.js"></script>
</body>
</html>

User.ts:

export class User {
    firstName: string;
    lastName: string;
}

main.ts

import { User } from "./user";

Вот также скриншот исключения:

введите описание изображения здесь

Ответы

Ответ 1

У вас есть несколько вариантов:

Вариант 1. Используйте загрузчик модулей, такой как Webpack, Browserify и т.д.

Вариант 2: Если вы просто хотите скомпилировать *.ts в *.js без какого-либо импорта или экспорта модулей, установите compilerOptions.module на "none" в вашем tsconfig.json. Обратите внимание, что вы не сможете экспортировать/импортировать модули, если для compilerOptions.module установлено значение "none".

Ответ 2

попробуйте выполнить следующие изменения

HTML:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
    @RenderBody()

    <!-- <script src="~/scripts/user.js"></script> --> <!-- not longer needed -->
    <script src="~/scripts/main.js"></script>
</body>
</html>

tsconfig.json

{
  "compilerOptions": {
    "module": "commonjs",
    "target": "es5",
    "sourceMap": true,
    "outFile": "~/scripts/main.js",
    "lib": [
      "dom",
      "es2015",
      "es5",
      "es6"
    ]
  }
}

с этой конфигурацией ваш вывод - это только один файл js, который может быть углемирован wunderfull, содержащий все файлы с ссылкой в ​​main.ts. я просто не знаю, работает ли ~/или если вам нужно установить путь относительно файла конфигурации, я не работаю с linux.

User.ts

class User {
    firstName: string;
    lastName: string;
}

Main.ts:

/// <reference path="User.ts" />

// import { User } from "./user"; // not needed if referenced
console.log(new User());

все ссылочные объявления должны быть записаны в начале файла

Ответ 3

TypeScript по умолчанию использует node разрешение модуля. Node.js/CommonJS использует экспорт. Однако CommonJS не запускается в браузере без загрузчика модуля или модуля. Следовательно, вам нужно прокрутить браузер или веб-пакет, чтобы запустить его в браузере.

Посмотрите эту ссылку https://www.typescriptlang.org/docs/handbook/gulp.html

Вы также можете установить установку модуля в none в разделе параметров компилятора в tsconfig.json:

{    "compilerOptions": {       "target": "es5",       "модуль": "нет"   } }

Ответ 4

Это сработало для меня:

мой-enum.ts

const MyEnum = {
'test': 456,
'Default': 123
}

Component.ts

import * as MyEnum from 'my-enum';