I am trying to learn how to implement "modules" with TypeScript within Visual Studio Community 2019. A bunch of the documentation I am finding online seems old and perhaps no longer relevant, so I'm looking for some current help. After posting a question
on how to get around initial load errors, I have:
1. Added RequireJS to the project using NuGet
2. Added a "module": "UMD" directive to the compilerOptions in tsconfig.json. There's also a "target": "ESNext" directive. I tried using AMD instead of UMD, but got load errors say "define is not defined."
3. Added the 2 TS files shown below to demo the problem.
When I click a button whose onclick targets demoMethod() in Demo1, I am getting "Uncaught ReferenceError: demoMethod is not defined". As with my initial question, I'm guessing that I am missing something straightforward, but the available documentation
isn't guiding me.
UPDATE: I have given up on trying TS modules. For me SPA app, I have learned that I can simply segment my TS code into different files (including one that contains the variable and class definitions I want to share across files) and it all works: Intellisense
while coding, Build, and debug/run. I've concluded TS modules are a messy rabbit hole that you would be wise to avoid if at all possible.
// Demo1 file
import * as X from './Demo2';
function demoMethod()
{
let x = new X.MyClass("any", 100);
X.MyFunction("any", 100);
}
// Demo2 file
export class MyClass
{
Prop1: string;
Prop2: number;
constructor(p1, p2)
{
this.Prop1 = p1;
this.Prop2 = p2;
}
}
export function MyFunction(p1, p2)
{
alert("MyFunction called");
}
Member
26 Points
63 Posts
How to Use RequireJS with Visual Studio and TypeScript to Enable Modules - Uncaught ReferenceErro...
Jun 19, 2020 02:22 PM|CincySteve|LINK
I am trying to learn how to implement "modules" with TypeScript within Visual Studio Community 2019. A bunch of the documentation I am finding online seems old and perhaps no longer relevant, so I'm looking for some current help. After posting a question on how to get around initial load errors, I have:
1. Added RequireJS to the project using NuGet
2. Added a "module": "UMD" directive to the compilerOptions in tsconfig.json. There's also a "target": "ESNext" directive. I tried using AMD instead of UMD, but got load errors say "define is not defined."
3. Added the 2 TS files shown below to demo the problem.
When I click a button whose onclick targets demoMethod() in Demo1, I am getting "Uncaught ReferenceError: demoMethod is not defined". As with my initial question, I'm guessing that I am missing something straightforward, but the available documentation isn't guiding me.
UPDATE: I have given up on trying TS modules. For me SPA app, I have learned that I can simply segment my TS code into different files (including one that contains the variable and class definitions I want to share across files) and it all works: Intellisense while coding, Build, and debug/run. I've concluded TS modules are a messy rabbit hole that you would be wise to avoid if at all possible.
// Demo1 file import * as X from './Demo2'; function demoMethod() { let x = new X.MyClass("any", 100); X.MyFunction("any", 100); } // Demo2 file export class MyClass { Prop1: string; Prop2: number; constructor(p1, p2) { this.Prop1 = p1; this.Prop2 = p2; } } export function MyFunction(p1, p2) { alert("MyFunction called"); }Thanks for any help you can provide. Steve