Debugging steps into modified file | TypeScript Community | Page 1

zealous shale Jan 28, 2024, 4:28 AM

#

What do I do to get vs code to step into the actual TS file instead of this? See it has the sourceMappingURL thing at the bottom and some other generated stuff at the top.

{
    "compilerOptions": {
        "module": "commonjs",
        "target": "es2020",
        "declaration": true,
        "outDir": "./dist",
        "emitDecoratorMetadata": true,
        "experimentalDecorators": true,
        "sourceMap": true
    },
    "include": [
        "src/stasis/**/*"
    ],
    "exclude": [
        "node_modules"
    ]
}

{
    "name": "test",
    "type": "node",
    "request": "launch",
    "runtimeArgs": [
        "--nolazy",
        "-r",
        "ts-node/register/transpile-only"
    ],
    "args": [
        "evaluate.ts",
        "${input:subscription}"
    ],
    "cwd": "${workspaceRoot}/src/stasis",
    "internalConsoleOptions": "openOnSessionStart",
    "skipFiles": [
        "<node_internals>/**",
        "${workspaceFolder}/node_modules/**",
    ]
}

wanton dagger Jan 28, 2024, 10:44 AM

#

@zealous shale you need to generate map files

#

you can do that by setting the sourceMap option

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.

#

those source maps will then be loaded by the runtime when debugging, and will allow you to see the corresponding TS code, instead of the JS that's actually running

zealous shale Jan 28, 2024, 3:17 PM

#

wanton dagger <@267057699856842753> you need to generate map files

I still see the same after adding sourceMap to the tsconfig.

wanton dagger Jan 28, 2024, 3:19 PM

#

make sure those are in the same folder as your JS code

#

or that the sourceMaps are appended to the JS, that is also an option

#

maybe there is a nodejs option you need to enable too, to load map files, not sure

zealous shale Jan 28, 2024, 3:42 PM

#

Moving the class into the same directory seems to have helped. That is good to know, but is counter to my end goal. The goal is to write classes that I can export to an azure devops artifact feed so that others can instantiate my classes in their ts projects. The class pictured above is me trying to emulate that. I think what I need to do now is get my classes emitted in whatever way the artifact feed will expect, I'm guessing that is a d.ts? Then in my test I can make a new TS project which imports those d.ts files.

wanton dagger Jan 28, 2024, 4:27 PM

#

@zealous shale the basic idea is:

you write the source code of library in JS
you compile your TS code to JS, using tsc
you emit typings (.d.ts files) at the same time, using tsc too, those files are for your TS consumers, to know the types of what they import
you references those JS and typings files in your package.json
you publish the JS files, typings files, and the package.json on npm

#

also, you don't need to distribute the map files, those are only used for debugging
most libraries don't ship them, tho you could (but it would make your lib bigger)
the main reason is that your lib is supposed to be bug-free, so no need to debug that part of the application

#Debugging steps into modified file