I'm trying to convert lot of JS files with double question marks to TypeScript using tsc.
But unfortunately tsc compiler doesn't understand ??. Example: this.x = typeof params.x == "string" ? this._processStringParam(params.x, "x") : params.x ?? 0;
It just throws error: imageElement.js:70:96 - error TS1109: Expression expected. this.x = typeof params.x == "string" ? this._processStringParam(params.x, "x") : params.x ?? 0;
I do not understand one thing. This double question-marks is the main reason to convert to TS. What the point for me to fix it in JS before tsc then?
How to convert such js files to TypeScript then?
tsconfig.json looks like this:
{
"compilerOptions": {
"checkJs": false,
"module": "commonjs",
"target": "ES5",
"allowJs": true,
"rootDir": "./",
"baseUrl": "./",
"outDir": "./build",
"noStrictGenericChecks": true,
"skipLibCheck": true,
"strictFunctionTypes": false,
"lib": [
"es2015",
"dom"
]
},
"exclude": [
"./build/**"
]
}
Try it by changing the target to "ES6"
This is because the ?? or nullish coalescing operation is added after ES2020
Try this configuration:
"compilerOptions": {
/* Language and Environment */
"target": "ES5", /* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */
/* Modules */
"module": "commonjs", /* Specify what module code is generated. */
"outDir": "dist", /* Specify an output folder for all emitted files. */
"esModuleInterop": true, /* Emit additional JavaScript to ease support for importing CommonJS modules. This enables `allowSyntheticDefaultImports` for type compatibility. */
"forceConsistentCasingInFileNames": true, /* Ensure that casing is correct in imports. */
/* Type Checking */
"strict": true, /* Enable all strict type-checking options. */
"skipLibCheck": true /* Skip type checking all .d.ts files. */
}
code ts:
console.log('coallescing nullish with undefined: ', undefined ?? 'compare with undefined');
console.log('coallescing nullish with null: ', null ?? 'compare with null');
console.log('coallescing nullish with valid data: ', 'with data' ?? 'compare with null or undefined');
transpiled code to js:
console.log('coallescing nullish with undefined: ', undefined !== null && undefined !== void 0 ? undefined : 'compare with undefined');
console.log('coallescing nullish with null: ', null !== null && null !== void 0 ? null : 'compare with null');
console.log('coallescing nullish with valid data: ', 'with data' !== null && 'with data' !== void 0 ? 'with data' : 'compare with null or undefined');
Results on console:
coallescing nullish with undefined: compare with undefined
coallescing nullish with null: compare with null
coallescing nullish with valid data: with data
This js code has ES5 compatibility.