Our React/React Native project is built with Typescript. We've got a mobile project built with React Native, and a shared private package that is used by both React Native client and the React frontend.
Since we're making frequent changes to the shared package, we're linking the package locally in dependencies like "our_shared_package": "*" and symlinking node_modules/our_shared_package in the file system. Even though the package is written is Typescript, we manually run tsc after making channges to generate corresponding JS before we run the project.
Everything works perfectly, though whenever I'm debugging and step into code generated by tsc, it doesn't step into the .ts file but the generated .js file which contains lots of ugly code (especially with awaiters, async functions, promises etc.) making it extremely hard to debug. If I put a breakpoint into a .ts file from the external package it doesn't hit. I have no problems debugging .ts from the React Native app though, it's only the shared code that doesn't play well with the debugger.
How can I make Vscode correctly hit .ts files in external package built with tsc instead of the output JS files?
I am not familiar with VSCode, but I would assume that it uses source maps, as most other tools do. So you would need to add the following to your tsconfig.json:
{
"compilerOptions": {
"sourceMap": true
}
}