Folgen Sie TypeScript den bewährten Methoden

TypeScript ist eine Sprache, die die Funktionen von erweitert JavaScript. Es ist eine stark typisierte und objektorientierte Sprache. Sie können TypeScript damit die Datentypen angeben, die in Ihrem Code übergeben werden, und haben die Möglichkeit, Fehler zu melden, wenn die Typen nicht übereinstimmen. Dieser Abschnitt bietet einen Überblick über TypeScript bewährte Methoden.

Beschreiben Ihrer Daten

Sie können ihn verwenden TypeScript , um die Form von Objekten und Funktionen in Ihrem Code zu beschreiben. Die Verwendung des Typs any ist gleichbedeutend mit dem Verzicht auf eine Typüberprüfung für eine Variable. Wir empfehlen, dass Sie die Verwendung von any in Ihrem Code vermeiden. Ein Beispiel.

type Result = "success" | "failure"
function verifyResult(result: Result) {
    if (result === "success") {
        console.log("Passed");
    } else {
        console.log("Failed")
    }
}

Enums verwenden

Sie können Enums verwenden, um eine Reihe benannter Konstanten und Standards zu definieren, die in Ihrer Codebasis wiederverwendet werden können. Wir empfehlen, dass Sie Ihre Enums einmal auf globaler Ebene exportieren und dann andere Klassen die Aufzählungen importieren und verwenden lassen. Gehen Sie davon aus, dass Sie eine Reihe möglicher Aktionen erstellen möchten, um die Ereignisse in Ihrer Codebasis zu erfassen. TypeScript stellt sowohl numerische als auch auf Zeichenketten basierende Aufzählungen bereit. Im folgenden Beispiel wird ein Enum verwendet.

enum EventType {
    Create,
    Delete,
    Update
}

class InfraEvent {
    constructor(event: EventType) {
        if (event === EventType.Create) {
            // Call for other function
            console.log(`Event Captured :${event}`);
        }
    }
}

let eventSource: EventType = EventType.Create;
const eventExample = new InfraEvent(eventSource)

Schnittstellen verwenden

Eine Schnittstelle ist ein Vertrag für die Klasse. Wenn Sie einen Vertrag erstellen, müssen Ihre Benutzer den Vertrag einhalten. Im folgenden Beispiel wird eine Schnittstelle verwendet, um die props zu standardisieren und sicherzustellen, dass der Aufrufer den erwarteten Parameter bereitstellt, wenn er diese Klasse verwendet.

import { Stack, App } from "aws-cdk-lib";
import { Construct } from "constructs";

interface BucketProps {
    name: string;
    region: string;
    encryption: boolean;

}

class S3Bucket extends Stack {
    constructor(scope: Construct, props: BucketProps) {
        super(scope);
        console.log(props.name);

    }
}
const app = App();
const myS3Bucket = new S3Bucket(app, {
    name: "my-bucket",
    region: "us-east-1",
    encryption: false
})

Einige Eigenschaften können nur geändert werden, wenn ein Objekt zum ersten Mal erstellt wird. Sie können dies angeben, indem Sie readonly vor dem Namen der Eigenschaft platzieren, wie das folgende Beispiel zeigt.

interface Position {
    readonly latitude: number;
    readonly longitute: number;
}

Schnittstellen erweitern

Durch das Erweitern von Schnittstellen wird die Doppelarbeit reduziert, da Sie die Eigenschaften nicht zwischen Schnittstellen kopieren müssen. Außerdem kann der Leser Ihres Codes die Beziehungen in Ihrer Anwendung leicht verstehen.

 interface BaseInterface{
    name: string;
  }
  interface EncryptedVolume extends BaseInterface{
      keyName: string;
  }
  interface UnencryptedVolume extends BaseInterface {
      tags: string[];
  }

Leere Schnittstellen vermeiden

Wir empfehlen, leere Schnittstellen aufgrund der damit verbundenen potenziellen Risiken zu vermeiden. Im folgenden Beispiel wird eine leere Schnittstelle aufgerufen. BucketProps Die myS3Bucket1- und myS3Bucket2-Objekte sind beide gültig, aber sie folgen unterschiedlichen Standards, da die Schnittstelle keine Verträge erzwingt. Der folgende Code kompiliert und druckt die Eigenschaften, was jedoch zu Inkonsistenzen in Ihrer Anwendung führt.

interface BucketProps {}

class S3Bucket implements BucketProps {
    constructor(props: BucketProps){
        console.log(props);
    }
}

const myS3Bucket1 = new S3Bucket({
    name: "my-bucket",
    region: "us-east-1",
    encryption: false,
});

const myS3Bucket2 = new S3Bucket({
    name: "my-bucket",
});

Factories verwenden

In einem Abstract-Factory-Muster ist eine Schnittstelle dafür verantwortlich, eine Factory verwandter Objekte zu erstellen, ohne deren Klassen explizit anzugeben. Sie können beispielsweise eine Lambda-Factory zum Erstellen von Lambda-Funktionen erstellen. Anstatt eine neue Lambda-Funktion in Ihrem Konstrukt zu erstellen, delegieren Sie den Erstellungsprozess an die Factory. Weitere Informationen zu diesem Entwurfsmuster finden Sie unter Abstract Factory TypeScript in der Refactoring.Guru-Dokumentation.

Destrukturierung für Eigenschaften verwenden

Die in ECMAScript 6 (ES6) eingeführte Destrukturierung ist eine JavaScript Funktion, mit der Sie mehrere Daten aus einem Array oder Objekt extrahieren und sie ihren eigenen Variablen zuweisen können.

const object = {
    objname: "obj",
    scope: "this",
};

const oName = object.objname;
const oScop = object.scope;

const { objname, scope } = object;

Standard-Benennungskonventionen definieren

Durch die Durchsetzung einer Namenskonvention bleibt die Codebasis konsistent und der Aufwand bei der Benennung einer Variablen wird reduziert. Wir empfehlen Folgendes:

• Verwenden Sie Groß-/Kleinschreibung für Variablen- und Funktionsnamen.

• Wird PascalCase für Klassennamen und Schnittstellennamen verwendet.

• Verwenden Sie Groß-/Kleinschreibung für Schnittstellenmitglieder.

• Wird PascalCase für Typnamen und Aufzählungsnamen verwendet.

• Benennen Sie Dateien mit CamelCase (zum Beispiel ebsVolumes.tsx oder storage.tsb)

Verwenden Sie nicht das Schlüsselwort var

Die let Anweisung wird verwendet, um eine lokale Variable in zu deklarieren TypeScript. Es ähnelt dem var Schlüsselwort, weist jedoch im Vergleich zum Schlüsselwort einige Einschränkungen beim Gültigkeitsbereich aufvar. Eine Variable, die in einem Block mit let deklariert ist, ist nur für die Verwendung innerhalb dieses Blocks verfügbar. Das var Schlüsselwort kann nicht blockbezogen sein, was bedeutet, dass auf es außerhalb eines bestimmten Blocks (repräsentiert durch{}) zugegriffen werden kann, aber nicht außerhalb der Funktion, in der es definiert ist. Sie können Variablen neu deklarieren und aktualisieren. var Es hat sich bewährt, die Verwendung des var Schlüsselworts zu vermeiden.

Erwägen Sie die Verwendung von ESLint und Prettier

ESLint analysiert Ihren Code statisch, um Probleme schnell zu finden. Sie können ESLint verwenden, um eine Reihe von Assertionen zu erstellen (Lint-Regeln genannt), die definieren, wie Ihr Code aussehen oder sich verhalten soll. ESLint bietet auch Vorschläge für automatische Korrekturen, mit denen Sie Ihren Code verbessern können. Schließlich können Sie ESLint verwenden, um Lint-Regeln aus gemeinsam genutzten Plugins zu laden.

Prettier ist ein bekannter Codeformatierer, der eine Vielzahl verschiedener Programmiersprachen unterstützt. Sie können Prettier verwenden, um Ihren Codestil so festzulegen, dass Sie Ihren Code nicht manuell formatieren müssen. Nach der Installation können Sie Ihre package.json-Datei aktualisieren und die Befehle npm run format und npm run lint ausführen.

Das folgende Beispiel zeigt Ihnen, wie Sie ESLint und den Prettier-Formatierer für Ihr Projekt aktivieren. AWS CDK

"scripts": {
    "build": "tsc",
    "watch": "tsc -w",
    "test": "jest",
    "cdk": "cdk",
    "lint": "eslint --ext .js,.ts .",
    "format": "prettier --ignore-path .gitignore --write '**/*.+(js|ts|json)'"
}

Verwenden Sie Zugriffsmodifikatoren

Der private Modifikator TypeScript beschränkt die Sichtbarkeit nur auf dieselbe Klasse. Wenn Sie den privaten Modifikator einer Eigenschaft oder Methode hinzufügen, können Sie innerhalb derselben Klasse auf diese Eigenschaft oder Methode zugreifen.

Der öffentliche Modifikator ermöglicht den Zugriff auf Klasseneigenschaften und Methoden von allen Orten aus. Wenn Sie keine Zugriffsmodifikatoren für Eigenschaften und Methoden angeben, verwenden sie standardmäßig den öffentlichen Modifikator.

Der geschützte Modifikator ermöglicht den Zugriff auf Eigenschaften und Methoden einer Klasse innerhalb derselben Klasse und innerhalb von Unterklassen. Verwenden Sie den Modifikator protected, wenn Sie erwarten, Unterklassen in Ihrer Anwendung zu erstellen. AWS CDK

Verwenden Sie Dienstprogrammatypen

Bei den Dienstprogrammtypen TypeScript handelt es sich um vordefinierte Typfunktionen, die Transformationen und Operationen an vorhandenen Typen durchführen. Auf diese Weise können Sie neue Typen auf der Grundlage vorhandener Typen erstellen. Sie können beispielsweise Eigenschaften ändern oder extrahieren, Eigenschaften optional oder erforderlich machen oder unveränderliche Versionen von Typen erstellen. Mithilfe von Dienstprogrammtypen können Sie genauere Typen definieren und potenzielle catch bei der Kompilierung erkennen.

Teilweise <Type>

Partialmarkiert alle Mitglieder eines Eingabetyps Type als optional. Dieses Tool gibt einen Typ zurück, der alle Teilmengen eines bestimmten Typs darstellt. Es folgt ein Beispiel für Partial.

interface Dog {
  name: string;
  age: number;
  breed: string;
  weight: number;
}

let partialDog: Partial<Dog> = {};

Erforderlich <Type>

Requiredmacht das Gegenteil vonPartial. Es macht alle Elemente eines Eingabetyps Type nicht optional (mit anderen Worten, erforderlich). Es folgt ein Beispiel für Required.

interface Dog {
  name: string;
  age: number;
  breed: string;
  weight?: number;
}

let dog: Required<Dog> = { 
  name: "scruffy",
  age: 5,
  breed: "labrador",
  weight 55 // "Required" forces weight to be defined
};