Using Typescript With PHP Tools

Hercule

Hi, I am trying to add some typescript to my PHP project, but there does not appear to be an easy way to do this compared to other VS project types. Has anyone managed to do this - if so - please explain how.
Thanks.
Howard

MarcHenderkes

Yes, it's as easy as clicking "new file" and choosing ".ts" as file ending.

That's the IDE side of it. I suppose you mean the side of using it in your php project. Basic rundown is that you keep your js/ts code in say ./assets/js and transpile it into ./public/js like you would usually pack your js code and include legacy code. Where ./ is your project directory and ./public/ is the directory used by the webserver.

HowardCole

MarcHenderkes
Hi,
this is pretty much the same conclusion I came to. However this leads to a problem debugging, because it uses the javascript as the debug source, rather than the typescript. This is not a problem using other web applications (ASP.NET for example) where the typescript is the source for debug. Is it possible for multiple debuggers to work simultaneously so that the devsense debugger works in parallel to the VS typescript debugger, so that I can debug my typescript in the same project as the PHP?

Thanks,
Howard.

MarcHenderkes

HowardCole This should happen automatically if you generate a source map when transpiling your ts files. It will map lines (and column numbers if you use eval-source-map) to the typescript files.

You can find general configuration if you use webpack here: https://webpack.js.org/guides/typescript/
Be advised though that there's a small issue with typescript/vue source mapping as chrome and visual studio use different biases for breakpoints. It's a bit stupid, but I haven't managed to fix that and resort to using Chrome in those select cases.

Edit: Completely forgot, but to get them running without issues where vue (and possibly ts) files land in different pack directories than normal javascript files (and the internally generated checksum files), I had to trick around a bit.

webpack.config.js

if (!Encore.isProduction()) {
    module.exports.devtool = 'eval-source-map';
    

    module.exports.output.devtoolFallbackModuleFilenameTemplate = 'webpack-fallback:///[resource-path]?[hash]';
    module.exports.output.devtoolModuleFilenameTemplate = info => {
        const isVue = info.resourcePath.match(/\.vue$/);
        const startsWithDot = info.resourcePath.startsWith("./");
        if (isVue) {
            if (startsWithDot) {
                return `webpack-generated:///${info.resourcePath}?${info.hash}`
            }
            else
                return `webpack:///./${info.resourcePath}`;
        }

        return `webpack:///${info.resourcePath}`;
    }
}```