Compilation of programs in TypeScript.
The typescript compiler like every other compiler, can be highly customized. Some of the default parameters may not satisfy the programmer's intentions. For that reason, in this post we will see how to customize the compiler using some important options.
To compile a typescript file, we can use the tsc command followed by the file name.
tsc hello.tsDefault ECMAScript Version
By default, TypeScript compiles to JavaScript ES3, a very old version of JavaScript. You can use the --target parameter to specify the target version to which you want to compile the code.
tsc --target es2015 hello.tsYou can also change the target ECMAScript version from the tsconfig.json configuration file. You can see how to configure this file in our article "Install and Configure TypeScript".
Compilation with Errors
It may seem strange, but even when the compiler throws errors, it is possible to obtain an output file in JavaScript. The --noEmitOnError parameter prevents the output from being generated when there are errors in typescript.
This default behavior of TypeScript allows you to easily pass legacy JavaScript code that works to TypeScript. For example, you can have functions that have n parameters and fewer than required are sent. This would cause an error that is warned by the TypeScript compiler.
For example, the following code will throw an error in the compiler.
function helloWorld(name: string)
{
return 'Hello ' + (name || '');
}
helloWorld();However, it will produce the following valid JavaScript code.
function helloWorld(name) {
return 'Hello ' + (name || '');
}
helloWorld();
When executing the function helloWorld() without parameters, the message "Hello " will be obtained.
tsc --noEmitOnError hello.tsStrict Mode
Strict mode in typescript can be activated with the --strict parameter on the console. This mode is much stricter than the default settings and prevents certain types of errors that are difficult to find even with the strict typing of TypeScript by default due to how JavaScript works.
tsc --strict hello.tsAn example of this is the call function in JavaScript. If strict mode were not activated, it would not be possible to determine an error in the call function when it is called with a parameter of a different type.
// With strictBindCallApply on
function fn(x: string) {
return parseInt(x);
}
const n1 = fn.call(undefined, "10");
const n2 = fn.call(undefined, false);Strict mode is actually a set of features that can be activated independently, such as noImplicitAny or strictNullChecks.
noImplicitAny
In some cases, TypeScript will implicitly infer a data type as any. This means that it can be of any type. With the --noImplicitAny parameter, TypeScript will throw an error when a type is implicitly inferred as any. Consider the following example, which would throw an error because the parameter type of the function is not specified and is inferred as any.
function fn(s) {
console.log(s.subtr(3));
}
fn(42);
strictNullChecks
Null references have caused thousands of headaches and costs throughout history. We can change the behavior to check for null references with the --strictNullChecks option. Thus, the compiler will throw an error when it finds a variable declared but possibly not initialized. Consider the following code that would not throw an error when this option is disabled.
declare const loggedInUsername: string;
const users = [
{ name: "Oby", age: 12 },
{ name: "Heera", age: 32 },
];
const loggedInUser = users.find((u) => u.name === loggedInUsername);
console.log(loggedInUser.age);
However, when executing this code with the option enabled, we would get the following error:
Uncaught ReferenceError: loggedInUsername is not defined
That's the problem with having null references in our code.