I have a really simple question but I couldn't find any documentations for it.
I have 4 ts files.
/main.ts
/sub/forms.ts
/sub/validators.ts
/sub/location.ts
I'm using Visual Studio Code to code and when I save a TypeScript file, it auto compiles it and creates a JS file (ES5).
my problem is.. when I save main.ts file, how can I have forms.ts, validators.ts and location.ts in it as well?
In PHP, we simple use include('filename.php');
Is there way to do it in TypeScript?
main.ts;
import { Forms } from "./sub/forms";
import { Validators } from "./sub/validators";
import { Location } from "./sub/location";
let emp1 = new Validators('TEST');
emp1.greet();
/sub/validators.ts;
export class Validators {
employeeName: string;
constructor(name: string) {
this.employeeName = name;
}
greet() {
console.log(`Good morning ${this.employeeName}`);
}
}
main.js (after auto save compile)
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var validators_1 = require("./sub/validators");
var emp1 = new validators_1.Validators('TEST');
emp1.greet();
it doesn't import the validators.ts code into main.js
Related
I am struggeling with the current situation. Up to today i had my own JavaScript implementation with own methods to load single js files per website - when needed. This way i had a tiny loader script with an scp sha256-checksum in the header which then loaded the "master" script which controlled everything else.
Now i want to go some steps further and a) switch over to modules, because most libs do so too, i was unable to load modules from normal scripts and b) implement typescript into my system.
What starts my script implementation:
/scripts/modules-loader.js
<html>
...
<script async type=module>
"use strict";
import {master} from '/scripts/modules/master-28021723540.js';
new master();
</script>
...
</html>
So far so good. This loader executes as expected, the js file is been loaded and the sha-256 hash from the header is valid.
And now where the struggle begins. This file is been compiled to
/master.ts
export class master {
constructor() {
this.init();
}
async init() {
console.log( "Hello, lets get started...");
}
}
compiled file:
define("wkwussmxlyk4d7ainbsq93pnpnugjs5g", ["require", "exports"], function (require, exports) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.master = void 0;
class master {
constructor() {
this.init();
}
async init() {
console.log("Hello, lets get started...");
}
}
exports.master = master;
});
with the result that the browser cannot find the module called "master"
Uncaught SyntaxError: The requested module '/scripts/modules/master-28021723540.js'
does not provide an export named 'master' (at (Index):11:9)
However i also tried this, which i found in the internet:
"use strict";
module master {
class master {
constructor() {
this.init();
}
async init() {
console.log( "Hello, lets get started...");
}
}
}
which gets compiled into this
"use strict";
var master;
(function (master_1) {
class master {
constructor() {
this.init();
}
async init() {
console.log("Hello, lets get started...");
}
}
})(master || (master = {}));
which leads to the same result.
How can i get my class get compiled from ts to be able to call it from the loader or in the file itself?
Just for understanding, i dont want to use the "tsc --watch" over my entire project. I am using single js/ts files and compile/optimize them in the request thread and put them into static optimized files afterwards ( if in production ). Keeping this in mind i am also open into different implementations. I am aiming for maximum pagespeed without compromises and my current solution was working very good but just limited because it was unable to load modules, so now i want to switch over to modules only.
i am compiling like this
/usr/bin/tsc --alwaysStrict --strict --module amd --target es2020 /srv/http/domain.local/tmp/domain.local/ncumh5cnk5uq2s7b64oa31cv19agr2s9.ts --outfile /srv/http/domain.local/tmp/domain.local/compiled-ncumh5cnk5uq2s7b64oa31cv19agr2s9.ts
Thanks in advance
Response on answer from #Quentin
/usr/bin/tsc --alwaysStrict --strict --target es6 /srv/http/domain.local/tmp/domain.local/ncumh5cnk5uq2s7b64oa31cv19agr2s9.ts --outfile /srv/http/domain.local/tmp/domain.local/compiled-ncumh5cnk5uq2s7b64oa31cv19agr2s9.ts
i am getting this compilation
"use strict";
var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
return new (P || (P = Promise))(function (resolve, reject) {
function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
step((generator = generator.apply(thisArg, _arguments || [])).next());
});
};
class master {
constructor() {
this.init();
}
init() {
return __awaiter(this, void 0, void 0, function* () {
console.log("Hello, lets get started...");
});
}
}
and with
export class()
i am getting this:
Cannot compile modules using option 'outFile' unless the '--module' flag is 'amd' or 'system'.
--module amd
This is your problem.
AMD modules use the define syntax and do no have native support in browsers. To use them you’ll need to use something like Require.JS.
Instead, tell TypeScript to generate an es6 module.
I have a class in Dart like this
import 'package:js/js.dart';
import 'dart:html';
import 'dart:js' as js;
class VistorianTab {
void showMatrix() {
var dataset = new networkcube.DataSet({
name: dataSetName,
nodeTable: [...],
linkTable: [...],
nodeSchema: {...},
linkSchema: {...}
});
}
I get the error because networkcube isn't defined, I imported the library in the index.html.
The library is this : https://github.com/networkcube/vistorian/blob/master/core/networkcube.js
I'm new to Dart, I'm sorry if I repeteaded a question.
Thank you for your time.
I want to override an action from cart module store. I am trying to extend this CartModule by following this link
Extending and Overriding Modules Doc
I have created a file /src/modules/cart/index.ts with following code
import { VueStorefrontModuleConfig, extendModule, VueStorefrontModule } from '#vue-storefront/core/lib/module'
import { CartModule } from '#vue-storefront/core/modules/cart'
import { cartModule } from './store'
const cartExtend: VueStorefrontModuleConfig = {
key: 'cart',
store: {modules: [{key: 'cart', module: cartModule}]},
afterRegistration: function () {
console.log('Cart module extended')
}
}
extendModule(cartExtend)
export const registerModules: VueStorefrontModule[] = [CartModule]
I am getting error that CarModule type does not match with VueStorefrontModule
Also I don't know what to do next in order to make it effective. Docs are not clear about it. Please help. Thanks
If you want to overwrite action of module you don't want to extend module but store.
Here is example:
Vuestorefront has CartModule (in core) and you need to change code of action refreshTotals.
Code your in file /src/modules/cart/index.ts:
import {StorefrontModule} from '#vue-storefront/core/lib/modules';
import {extendStore} from '#vue-storefront/core/helpers';
const cartModule = {
action: {
async refreshTotals({dispatch}, payload) {
//
// your new (and better!) code ;-)
//
}
},
}
export const MyAwesomeCart: StorefrontModule = function () {
extendStore('cart', cartModule);
}
In last step register this your new module under /src/modules/client.ts:
..
...
import {CartModule} from '#vue-storefront/core/modules/cart';
import {MyAwesomeCart} from "modules/cart/index";
export function registerClientModules() {
registerModule(CartModule); // original module
registerModule(MyAwesomeCart); // your new overwiritng module
...
..
I have two modules in one folder, mod1.js:
'use strict';
export class MyClass {
constructor() {
}
lala() {
alert(1);
}
}
And mod2.js:
'use strict';
import {MyClass} from './mod1';
let c = new MyClass();
c.lala2(); //HERE I WANT TO SEE ERROR
The problem is that Visual Studio Code doesn't show error in mod2. How to make it show the error, if it is possible?
I have a Typescript project, which calls a function from a module.js module. Here is my initial code:
//app.ts
import { MobileServiceUser, setCache, getCache } from "nativescript-azure-mobile-apps/user";
export function onLoginTap(args) {
console.log("tap");
ai.busy = true;
var cache = getCache();
}
if I use the VSCode "go to definition" feature, then getCache() goes to the import statement at the top, if I do this again, then I go to:
//module.ts
declare module "nativescript-azure-mobile-apps/user" {
export class MobileServiceUser {
mAuthenticationToken: string;
mUserId: string;
constructor(o: { userId: string; });
}
export function setCache(user: MobileServiceUser): void;
export function getCache(): MobileServiceUser;
}
When I execute the code and the var cache = user_1.getCache(); line is executed, my app crashes, throwing error:
TypeError: user_1.getCache is not a function
File: "/data/data/inc.tangra.azuremobileservicessample/files/app/main-page.js, line: 94, column: 23
app.ts looks like this compiled to js:
var user_1 = require("nativescript-azure-mobile-apps/user");
function onLoginTap(args) {
console.log("tap");
ai.busy = true;
var cache = user_1.getCache();
}
Why isn't the code recognising the imported function?
Update: this repo shows the project structure (the first page of code is in sample/main-page.ts