Aktualisierung Build mit Typescript Target "ES6"

Hintergrund

Der IE ist nun Geschichte, damit können aktuelle Sprachfeatures verwendet werden.

Bisher erfolgt das Build der TypeScript Dateien mit dem Target ES5. Seit dem haben viele Weitereentwicklungen der Sprache JavaScript stattgefunden, z.B.:

  • Nativer Support für Klassen (ES6 (2015))

  • Arrow functions (ES6 (2015))

  • Template strings (ES6 (2015))

  • const, let (ES6 (2015))

  • async und await (ES2017) (nicht in Kiss verwendet)

  • Nullish Coalescing (ES2020)

  • Optional chaining (ES2020)

  • Datentyp BigInt (mit ES2020)

TypeScript sorgt dafür, dass diese Funktionen schon länger verwendet werden können. Erreicht wird dies dadurch, dass zusätzlicher Code generiert wird, statt direkt die ja eigentlich im Browser verfügbaren Funktionen zu nutzen.

Die meisten der ES2020 Features werden von allen aktuellen Desktop-Browsern mit Stand Anfang 2020 implementiert. Bei den mobilen Browsern allerdings erst bei Versionen seit Herbst 2022. Daher warten wir mit ES2020 noch etwas.

Bedenke: Dies betrifft das gesamte KISS-Framework, da auch viele Internetportale dieses verwenden, ist die Möglichkeit Vorgaben zu Versionen der Browserprogramme zu machen nur begrenzt möglich.

Einstellungen

Diese (sowie viele andere) Compiler Optionen werden über die globale Datei tsconfig.base.json gesteuert (siehe cardo Installation, Ordner TypeScript).

Wir empfehlen dringend die Einstellungen (durch Vererbung) aus dieser Datei zu verwenden. Verwenden Sie die cardo Anwendungsvorlage ist dies bereits gegeben.

Ggf. die eigenen tsconfig.json Dateien prüfen und redundante oder wiedersprüchliche Einträge entfernen (wobei gilt: striktere Einträge sollte belassen werden).

Erforderliche Anpassungen

Probleme, die nicht von TypeScript gemeldet werden

Kritisch sind Fehler, die erst zur Laufzeit auftreteten. Die andere Fehlerkategorie sind Compile-Time Fehler.

Sie sollten daher auf alle Fälle den kompletten Typescript-Code "durchbuilden", bei der Verwendung unsere Visual-Studio Erweiterung steht im Kontextmenü an einem Assembly dazu "IduIT: Compile All TypeScript in Folder" zur Verfügung.

"this" before "super"

Dabei sticht ein Problem besonders hervor: die Verwendung von this im Konstruktur einer ableitenden Klassen vor dem Aufruf an "super()".

class Sample extends Base
{
	constructor(cfg: IFoo)
	{
		//dieser Fall wird von TypeScript nicht als Fehler gemeldet
		//und führt zu einem Laufzeitfehler!!
		cfg.sampleFn = ()=>this.__method();

		super(cfg);
	}
}

In diesem Fall muss der Aufruf so geändert werden, dass der Zugriff auf this erst später stattfindet. In den KISS - Klassen gibt es dafür die _initConfig(cfg:any) Methode. Zur Lösung des Problems, den code aus dem constructor also in die _initConfig Methode verschieben.

Schreiben auf "readonly" Properties

Dieser Fall hat weniger mit dem ES-Target, als mehr mit der Option strict zu tun.

interface ISample
{
	foo: string;
}

class Sample implements ISample
{
	public get foo(): string
	{
		return "x";
	}
}

const inst: ISample = new Sample();
inst.foo = "Test";

In dem Fall entweder den Setter definieren, oder, besser, dem Compiler die Absicht mitteilen:

interface ISample
{
	readonly foo: string;
}

Mischen von serverseitig generiertem Code (var vs. let. vs const)

Clientseitig:

//globale Methode deklarieren
let main: () => void | undefined;

Server-Code:

	var code = $@"function main()
	 {{
		var app = new Foo();
	    ...
	 }}
	";
	resourceCollector.AddScriptBlock("s", code);

Führt dann zur Laufzeit zu dem Fehler SyntaxError: redeclaration of let main, hier muss declare korrekt verwendet werden:

	//globale Methode deklarieren
	declare main: () => void | undefined;

Ähnliche Probleme ergeben sich auch bei der Verwendung von eval (was eh nicht verwendet werden sollte :)).

let myVar:string;
eval("var myVar=...");

wäre dann zu ändern in:

let myVar:string;
eval("myVar=...");

Mit dem Target ES5 wurde der transpilierte Code immer in var .. übersetzt, jetzt bleibt let und const erhalten, so dass diese Fehler damit zur Laufzeit ausgelöst werden.


Zuletzt geändert: 21.11.2022 08:12:43 (erstmals erstellt 20.11.2022)