未定义 TypeScript 导出
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/43472778/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
TypeScript exports is not defined
提问by Deontay
I'm trying to use export and import but it not working I get an error
我正在尝试使用导出和导入，但它不起作用我收到一个错误
Here is my code HTML :
这是我的代码 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 :
用户.ts：
export class User {
firstName: string;
lastName: string;
}
main.ts
主文件
import { User } from "./user";
Here is also screenshot of exception :
这也是异常的截图：
采纳答案by Saravana
You have a couple of options:
你有几个选择：
Option 1:Use a module loader like Webpack, Browserify, etc.
选项 1：使用模块加载器，如Webpack、Browserify 等。
Option 2:If you just want to compile *.tsto *.jswithout any module imports or exports, set compilerOptions.moduleto "none" in your tsconfig.json. Note that you won't be able to export/import modules when you set compilerOptions.moduleto "none".
选项 2：如果您只想*.ts在*.js没有任何模块导入或导出的情况下编译，请compilerOptions.module在tsconfig.json. 请注意，当您设置compilerOptions.module为“无”时，您将无法导出/导入模块。
回答by TypedSource
try the following changes
尝试以下更改
HTML:
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"
]
}
}
with this config your output is only one js file what can be uglified wunderfull, containing all referenced files in the main.ts. i just don't know if ~/ works or if you have to set the path relative to the config file, i'm not working with linux.
有了这个配置，你的输出只是一个 js 文件，可以被丑化，包含 main.ts 中的所有引用文件。我只是不知道 ~/ 是否有效，或者您是否必须设置相对于配置文件的路径，我不使用 linux。
User.ts
用户.ts
class User {
firstName: string;
lastName: string;
}
Main.ts:
主要.ts：
/// <reference path="User.ts" />
// import { User } from "./user"; // not needed if referenced
console.log(new User());
all reference declarations have to be written at the beginning of the file
所有引用声明都必须写在文件的开头
回答by Ibro
TypeScript by default uses node module resolution. Node.js / CommonJS uses exportskeyword. However, CommonJS doesn't run in browser without a module loader or module bundler. Hence, you need browserify or webpack to get it running in browser.
默认情况下，TypeScript 使用节点模块解析。Node.js / CommonJS 使用exports关键字。但是，CommonJS 不能在没有模块加载器或模块捆绑器的浏览器中运行。因此，您需要 browserify 或 webpack 才能让它在浏览器中运行。
Check out this link https://www.typescriptlang.org/docs/handbook/gulp.html
查看此链接https://www.typescriptlang.org/docs/handbook/gulp.html
You can also set modulesetting to none in compiler optionssection in tsconfig.json:
您还可以在tsconfig.json 的编译器选项部分将模块设置设置为无：
{ "compilerOptions": { "target": "es5", "module": "none" } }
{ "compilerOptions": { "target": "es5", "module": "none" } }
回答by Yonatan Ayalon
This worked for me:
这对我有用：
my-enum.ts
my-enum.ts
const MyEnum = {
'test': 456,
'Default': 123
}
Component.ts
组件.ts
import * as MyEnum from 'my-enum';
回答by Michael
Similar to TypedSource's answer, but if you can't or don't want to output into one js file you can do the following:
类似于 TypedSource 的回答，但如果您不能或不想输出到一个 js 文件中，您可以执行以下操作：
<!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 :
用户.ts：
class User {
firstName: string;
lastName: string;
}
main.ts
主文件
/// <reference path="User.ts" />
// import { User } from "./user"; // not needed if referenced & User.js file is loaded
console.log(new User());
回答by Fabio Rotondo
I now use Parcelto do the ugly stuff of transcoding etc. My easiest config is the following:
我现在使用Parcel来做转码等丑陋的事情。我最简单的配置如下：
tsconfig.json
配置文件
{
"compilerOptions": {
"target": "es5",
"sourceMap": true,
"noImplicitAny": true,
"noImplicitReturns": true,
"lib": [
"es2015",
"es5",
"es6",
"dom"
],
"noUnusedLocals": true,
"module": "commonjs",
"strict": false
},
"include": [ "lib/*", "./main.ts" ]
}
and in your HTML file, instead of importing the '.js', simply import the '.ts', like this:
并在您的 HTML 文件中，而不是导入 '.js'，只需导入 '.ts'，如下所示：
<script src="main.ts"></script>
then, run Parcel with this command line:
然后，使用以下命令行运行 Parcel：
parcel index.html
the Parcel bundler will create a distdirectory containing all your needed files (html and transcoded JavaScript) and it will run a local webserver at:
Parcel bundler 将创建一个包含所有需要的文件（html 和转码的 JavaScript）的dist目录，它将运行一个本地网络服务器：
with hot module reloading (in your browser window).
热模块重新加载（在您的浏览器窗口中）。
When you finish your work, you just have to deploy the distdirectory ;-)
完成工作后，只需部署dist目录 ;-)
