I'm trying to use export and import but it not working I get an error
Here is my code 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";
Here is also screenshot of exception :
You have a couple of options:
Option 1: Use a module loader like Webpack, Browserify, etc.
Option 2: If you just want to compile
*.ts
to*.js
without any module imports or exports, setcompilerOptions.module
to "none" in yourtsconfig.json
. Note that you won't be able to export/import modules when you setcompilerOptions.module
to "none".try the following changes
HTML:
tsconfig.json
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.
User.ts
Main.ts:
all reference declarations have to be written at the beginning of the file
TypeScript by default uses node module resolution. Node.js / CommonJS uses exports keyword. 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.
Check out this link https://www.typescriptlang.org/docs/handbook/gulp.html
You can also set module setting to none in compiler options section in tsconfig.json:
{ "compilerOptions": { "target": "es5", "module": "none" } }