I need to have two tsconfig.json files. One for testing and one for publishing. Reading through a number of Typescript repository issues it seems like the flag for specifying the tsconfig file to use is tsc --project tsconfig-test.json, however when using this I get the following error:
return path.replace(backslashRegExp, ts.directorySeparator);
^
Thoughts?
Related
I Have a third-party library needed to be used in project ts code, which is added to the application using a CDN path in the HTML. And this library is exporting a window variable, which is used in the code.
The package is not available as an npm module. While running the webpack build it's failing with the following error message:
error TS2304: Cannot find name 'CUSTOM_WINDOW_VARIABLE'.
I have added this in name in the webpackconfig.js file as :
externals: {
CUSTOM_WINDOW_VARIABLE: "CUSTOM_WINDOW_VARIABLE",
},
But still getting the same error.
How to tell webpack to ignore these global variables while building. Or convert them to window.CUSTOM_WINDOW_VARIABLE from CUSTOM_WINDOW_VARIABLE.
As I know your problem is not about webpack at all. The issue is most likely throwing from ts-loader which uses tsc compiler your tsx? files so in order to fix this issue you might need to define the type for your global value which is available on window as following steps:
Create your project typing dir and the file types/global.d.ts (you can name whatever you want, feel free to use my suggested name in terms of no idea how to name it) with following content:
// global.d.ts
// You can define your own type by replacing with the exact type
declare const CUSTOM_WINDOW_VARIABLE: any;
Make sure your tsconfig.json which is placed at repo's root dir in most cases includes your types dir by adding to include config option:
// tsconfig.json
{
"include": ["types", ...]
}
Hopefully it would work for your case
PS: If you don't import your library as externals, basically you don't have to configure the externals property in your webpack.config file
It is possible to put a types property in a package.json file:
...
"types": "index.d.ts"
...
As far as I can tell, you can put whatever you like in this file, with no requirement that the types it says the module exports are actually exported, or valid, or anything else.
The issue that I'm having comes from me having not updated this types file after renaming a file which it exports. Where this module was used subsequently, the imports failed.
What I'd like to be able to do is determine via an automated test whether or not the file referenced by this types property is actually valid, as in, does the module export what this types file says it exports.
--declaration this tsc compile option may can help you to automatic generate d.ts file according to your typescript source file.
at build hooks in your package.json scripts section, execute tsc --out index.js --declaration src/index.ts.
I have a typescript project that uses paths for imports. For example:
"paths": {
"#example/*": ["./src/*"],
}
Thus the project can import files directly from using statement like:
import { foo } from "#example/boo/foo";
For publishing to NPM I have I'm compiling the typescript files and then copying the result to a dist folder. Thus all the *.d.ts and corresponding *.js files are in the dist folder. I also copy package.json to the dist folder.
I now test this by generation a new typescript project and then run npm i -S ../example/dist, in order to install the project and attempt to run some of the compiled typescript code.
However the relative imports no longer work. For example if boo.ts depends on foo.ts it will say that it can't resolve foo.ts.
When I look at the *.d.ts files they contain the same paths that were used the source code before it was compiled. Is it possible to turn these into relative paths?
Update
I looks as if generating relative paths for Node is something Typescript does not perform automatically. If you would like this feature, as I would, please provide feedback on this bug report.
As a brief follow-up to arhnee's suggestion, it seems that as of Aug 2020, Microsoft still refuses to implement custom transformers for whatever reason, so these modules remain relevant.
So to future readers, here's how you can actually compile TS path aliases to relative paths. ttypescript is merely a transformer framework that requires a "path transformer" in order to actually convert the TS path aliases. Thus you will need to install both ttypescript and typescript-transform-paths.
npm i --save ttypescript typescript-transform-paths
Then, it's easy as just specifying usage by adding the following property to the compilerOptions object in tsconfig.json:
"plugins": [
{ "transform": "typescript-transform-paths" }
]
And finally, run ttsc instead of tsc.
There is a project called ttypescript that you can use for this. If you use it with the module typescript-transform-paths I beleive it will acheive what you want.
I have a tsconfig.json which specifies an outDir. The reason is that I want to separate the generated JavaScript output from the TypeScript sources.
So:
"compilerOptions": {
...
"outDir": "target/",
...
}
This works very well, until I compile the project with the typescript compiler only. All generated javascript output is created in the target/ directory.
But, if I call it with the angular compiler (ngc, it is essentially a wrapper around the tsc typescript compiler), we have an additional build step. It compiles the template files and components into typescript, which will be compiled further to javascript by the tsc.
These intermediary typescript files have the *.ngfactory.ts or *.ngsummary.json extension.
Now my problem is, that the ngc command generates these files still in my src/ directory, totally ignoring my outDir setting in my tsconfig.json.
What is the cause of this problem? Does any useful workaround exist?
Extension: regarding comments, ng from the angular-cli can do this. This leads to a side-question, how does it do with the ngc?
The cause of the problem was that ngc has some additional options in tsconfig.json what I didn't add.
The following settings in tsconfig.json do what I want.
"angularCompilerOptions": {
"genDir": "aot",
"skipMetadataEmit" : true
}
I need to change the TypeScript generated js file name to something else. How can I do that
For example I have MyCompany.ClassA.ts
It will generate MyCompany.ClassA.js by default
But I want MyCompany.ClassA.generated.js
I took a look at .tsConfig file but I couldn't find anything useful there.
ps. I am using VisualStudio2013 for Typescript and generating the js files
To compile a single TypeScript file to .js with a custom name, use --outFile:
tsc MyCompany.ClassA.ts --outFile MyCompany.ClassA.generated.js
Compiling multiple files to the .generated.js pattern would require a bit more work. You could compile one at a time as in the tsc example above.
tsc A.ts --outFile A.generated.js
tsc B.ts --outFile B.generated.js
Or you could use --outDir to collect the compiled files under standard names, and then rename them with your own script.
tsc --outDir ./generated
# run script to rename ./generated/*.js to *.generated.js
Note that --outFile and --outDir replace --out, which is deprecated:
https://github.com/Microsoft/TypeScript/wiki/Compiler-Options
The other answer here is good and comprehensive, but just to address this:
I took a look at the .tsconfig file but I couldn't find anything useful there
You can also set the outFile config in your .tsconfig.json under compilerOptions
{
"compilerOptions": {
"outFile": "./some/path/MyCompany.ClassA.generated.js",
...
}
}
See this example in the documentation