Is there a problem mixing javascript and typescript in node projects?

Question

I am very new to node.js and typescript. I am trying to learn by porting an existing application over from python. I am getting a syntax error in a place I do not expect.

I have a class that is the workhorse of the project. It is in a file called myClass.ts

myProject
└── js
    ├── commands
    │   └── rules.js
    ├── myClass.ts
    └── main.js

rules.js includes myClass as:

try {
    const {myClass} = require("../myClass.ts")
} catch(e) {
    console.log(e)
}

I am using PyCharm and can put a breakpoint in the catch block. The error points to the constructor in the class. The error is:

/home/me/PycharmProjects/myProject/js/myClass.ts:44
        rule_type: string,
                ^

SyntaxError: Unexpected token ':'
    at Object.compileFunction (node:vm:352:18)
    at wrapSafe (node:internal/modules/cjs/loader:1031:15)
    at Module._compile (node:internal/modules/cjs/loader:1065:27)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1153:10)
    at Module.load (node:internal/modules/cjs/loader:981:32)
    at Function.Module._load (node:internal/modules/cjs/loader:822:12)
    at Module.require (node:internal/modules/cjs/loader:1005:19)
    at require (node:internal/modules/cjs/helpers:102:18)
    at Object.<anonymous> (/home/me/PycharmProjects/myProject/js/commands/rules.js:4:19)
    at Module._compile (node:internal/modules/cjs/loader:1101:14)

myClass is too big to fit in here. It starts:

const {randomInt} = require('crypto')

class myClass {
    constructor(
        rule_type: string,
        display_type: string,
        range_min: number     = 1,
        range_max: number     = 10000,
        display_mapping: {}   = undefined,
        value_adjustments: {} = undefined,
    ) {
        this.rule_type = die_type
        this.display_type = display_type
        this.range_min = Math.trunc(range_min)
        this.range_max = Math.trunc(range_max)
        this.display_mapping = display_mapping
        this.value_adjustments = value_adjustments
    }

    ...//a bunch of methods, etc
}

exports.myClass = myClass;

If I take the : string type hint away, then the error just falls down to the next type hint. Is there a problem mixing javascript and typescript in this way?

Why am I mixing js and ts? I found a sample node project that seems to be a reasonable starting point for what I want to do. I figured that trying out typescript for this class might be a good exercise.

** Edit **

Thanks to all. Much to learn...

Answer 1

I wouldn't suggest mixing .ts files and .js files in the same project while starting out. Since TypeScript is a superset of JavaScript, changing every .js file to end with .ts should not break anything. Then you can use tsc to compile everything to native JavaScript.

Make sure to enable allowJs in your tsconfig file.