tsc not following tsconfig.json changes | TypeScript Community | Page 1

wary heart Jul 23, 2023, 1:47 PM

#

As the above suggests: This is my tsconfig.json config

  "compilerOptions": {
    "module": "system",
    "noImplicitAny": true,
    "removeComments": true,
    "preserveConstEnums": true,
    "outFile": "build/tsc.js",
    "sourceMap": true,
    "lib": [
      "decorators",
      "dom",
      "es5",
      "scripthost",
      "es2015.collection"
    ]
  },
  "include": ["src/**/*"]
}```
This config combined with tsc produces these first few lines and more,
```System.register("Types", [], function (exports_1, context_1) {
    "use strict";
    var Colour;
    var __moduleName = context_1 && context_1.id;
    return {
        setters: [],
        execute: function () {
            Colour = (function () {
                function Colour(red, blue, green) {
                    if (red > 255 || red < 0)
                        throw new Error("Invalid colour size red");
                    if (blue > 255 || blue < 0)
                        throw new Error("Invalid colour size blue");
                    if (green > 255 || green < 0)
                        throw new Error("Invalid colour size green");
                    this.red = red;
                    this.blue = blue;
                    this.green = green;
                }
                Colour.CompareExact = function (ColourA, ColourB) {
                    if (ColourA.red == ColourB.red) {
                        if (ColourA.blue == ColourB.blue) {
                            if (ColourA.green == ColourB.green) {
                                return true;
                            }
                        }
                    }...```
Notes: 
The file produced uses strict mode, even though the config does not specify strict mode.

Context:
I'm trying to write my own 2d game engine, for this I'm using ts and then calling the entry point for the engine inside of the compiled file from index.html's script tag,
however I can't load the js as ``System is not defined``, referencing tsc.js: 1:2.

#

Is there something I don't understand about my class file Types?

#

export interface Dot {
    colour : Colour;
    coords : Coordinate;
}
export interface Dimension {
    width : number;
    height : number;
}
export interface Coordinate {
    x : number;
    y : number;
}
export class Colour {
    red : number;
    blue : number;
    green : number;
    constructor(red : number, blue : number, green : number) {
        if (red > 255 || red < 0) throw new Error("Invalid colour size red");
        if (blue > 255 || blue < 0) throw new Error("Invalid colour size blue");
        if (green > 255 || green < 0) throw new Error("Invalid colour size green");

        this.red = red;
        this.blue = blue;
        this.green = green;
    }
    static CompareExact(ColourA : Colour, ColourB : Colour) : boolean {
        if (ColourA.red == ColourB.red) {
            if (ColourA.blue == ColourB.blue) {
                if (ColourA.green == ColourB.green) {
                    return true;
                }
            }
        }
        return false;
    }
}

quartz halo Jul 23, 2023, 1:50 PM

#

how are you compiling your code?

#

like, what command do you type?

wary heart Jul 23, 2023, 1:51 PM

#

exactly tsc, that's all

quartz halo Jul 23, 2023, 1:51 PM

#

alright, just making sure, since tsc filename.ts will fallback to default options

#

The file produced uses strict mode, even though the config does not specify strict mode.
"use strict" is emitted by default

#

if you want to disable that behavior, you have to use the noImplicitUseStrict option

#

https://www.typescriptlang.org/tsconfig#noImplicitUseStrict

TSConfig Reference - Docs on every TSConfig option

From allowJs to useDefineForClassFields the TSConfig reference includes information about all of the active compiler flags setting up a TypeScript project.

wary heart Jul 23, 2023, 1:53 PM

#

thank you for the above ❤️

autumn spruce Jul 23, 2023, 1:54 PM

#

Is there a reason you are using "module": "system"?

quartz halo Jul 23, 2023, 1:54 PM

#

also, are you sure you want/need to use System?

#

this sounds like a very odd choice, especially in 2023 where we have better/more common module systems

wary heart Jul 23, 2023, 1:55 PM

#

I'm not very experienced in ts so you are probably giving some very good advice

#

I've used this exact config in a different project and it did not produce System.register at all

quartz halo Jul 23, 2023, 1:56 PM

#

if you're building something for the browser (since you mentionned a HTML file)
you'll either need to use ES modules (module: "esnext") or use a bundler

quartz halo Jul 23, 2023, 1:56 PM

#

wary heart I've used this exact config in a different project and it did not produce System...

probably because you weren't using the system module

wary heart Jul 23, 2023, 1:57 PM

#

ah okay thank you

wary heart Jul 23, 2023, 1:57 PM

#

quartz halo probably because you weren't using the `system` module

I remembered why I'm using system, it looks like esnext would give an error if I wanted to compile into one file :P

quartz halo Jul 23, 2023, 1:58 PM

#

oh, because of the outFile property

#

nah, don't use that

wary heart Jul 23, 2023, 1:58 PM

#

yeah

quartz halo Jul 23, 2023, 1:58 PM

#

you should use a bundler instead

#

I know it's tempting to use system, because then TS can emit all your code to a single file
but I would not recommend using that module system
browsers don't support it

wary heart Jul 23, 2023, 1:59 PM

#

I've noticed as I can't load it at all in the latest chromium T_T

quartz halo Jul 23, 2023, 2:00 PM

#

right, because in your TS code, imports don't have a file extension

#

but the browser requires one

#

meaning you can't use what TS emits directly

#

you have to use one more tool to add those extensions back (would not suggest)
or use a tool that takes all your JS files and bundles them into one

#

have a look at https://esbuild.github.io/

esbuild - An extremely fast bundler for the web

#

it supports taking TS code as input, and can emit a single JS file you can use in the browser for your engine

#

(you still need tsc to type-check your code, esbuild can only be use to "remove the types" + bundle, it doesn't perform any checks)

wary heart Jul 23, 2023, 2:03 PM

#

So, it'd be best to run some kind of script to first use typescript's compiler and then esbuild to bundle the files inside of the build directory into one file?

quartz halo Jul 23, 2023, 2:03 PM

#

you can
but you can also run esbuild directly, it will take care of compiling your source code at the same time (1 step instead of 2)

autumn spruce Jul 23, 2023, 2:04 PM

#

The game engine you are building, how do you intend on using it? Are you going to use it in this one web project, or are you distributing it as a package?

wary heart Jul 23, 2023, 2:05 PM

#

Preferably as a package, I intend it to be generic so I can build more than one game from it. It's very basic but I still want to avoid code duplication while providing some easy of use features for myself

#

how does one go about that? is there specific standard to follow?

autumn spruce Jul 23, 2023, 2:06 PM

#

If you are going to distribute it as a npm package, the frontend projects that use it will pretty much always have to use a bundler, unless you intend on your package to be used in <script> tag.

#

So you won't need bundler for your package and leave bundling to the projects that use it instead.

wary heart Jul 23, 2023, 2:09 PM

#

I suppose I just wouldn't include it as a dependency in the package.json and just leave it at that

#

Thank you for your help everyone! :))

#

❤️❤️❤️

#tsc not following tsconfig.json changes