Target Option

{
  "compilerOptions": {
    "target": "es2023",
  }
}

Sample Code

The output of this code will be different depending on target:

class Animal {
  private name: string;
  constructor(name: string) {
    this.name = name;
  }
  move(distanceInMeters: number) {
    console.log(`${this.name} moved ${distanceInMeters}m.`);
  }
}

Transcript

00:00

Here we have a simple TypeScript class with the property, a constructor, and a method. Now, as mentioned before, TypeScript is configured using a Ts config or JS file. Within that file, we've set the compiler options target to ES five. What this means is that when TypeScript will compile the Ts file into its corresponding JS file, it'll emit a version of JavaScript that can be run on an E ES five runtime. Now, classes are not something that are supported by ES five runtime. However, they can be simulated by JavaScript functions. And indeed, that is the code

00:33

that TypeScript will generate when we have the target set to ES five. Now, if we set the target to ES 2015, which is also known as E ES six, which is something that does support JavaScript classes, you can see that when TypeScript transplants the TS to a JS file, it generates a JavaScript class that is very similar to the original TypeScript source code. Now, an even newer feature for JavaScript classes in modern specification is private fields. Now, they are very similar to the TypeScript specific private access modifier, and the way they work is that we have to name the field

01:07

with a hash in the beginning. Now, going back to the TypeScript compiler options, ES 2015 is not something that supports private fields, so TypeScript will generate JavaScript that can be run on an ES 2015 runtime. However, it will be a bit more OSE in order to provide features similar to private fields. Now, this generated JavaScript relies on an e ES 2015 feature known as WeakMap. Now, there is a special value within Target called ES next, which is a way of saying that we want to target the most bleeding edge JavaScript

01:40

runtime out there. Now with the target set to ES next, you can see that the generated JavaScript is identical to the input TypeScript source code, except of course for the type annotations. Now, not all features of modern JavaScript can be transpired into something that can be run on an older JavaScript runtime. As an example. Let's go ahead and set our target back to ES five. Now, since private fields rely on an ES 2015 feature known as WeakMap, that is not supported by ES five, if you try to compile this code using TypeScript,

02:13

it'll give us an error specifying that the target is too old. Now, just as a side note for this particular example, we don't actually need to use private fields within TypeScript as we can simply use the private access modifier. Now, just like TypeScript type annotations, the private access modifier is something that is only used for compile time type checking and does not actually need any JavaScript runtime support.

Account Required

Professional TypeScript Masterclass Lessons

Target Compiler Option

Sign in to access this content

Target Option

Sample Code

Transcript

Professional TypeScript Masterclass