Ikuti praktik TypeScript terbaik

TypeScript adalah bahasa yang memperluas kemampuan. JavaScript Ini adalah bahasa yang diketik dengan kuat dan berorientasi objek. Anda dapat menggunakan TypeScript untuk menentukan jenis data yang diteruskan dalam kode Anda dan memiliki kemampuan untuk melaporkan kesalahan ketika jenis tidak cocok. Bagian ini memberikan ikhtisar praktik TypeScript terbaik.

Jelaskan data Anda

Anda dapat menggunakan TypeScript untuk menggambarkan bentuk objek dan fungsi dalam kode Anda. Menggunakan any tipe ini setara dengan memilih keluar dari jenis memeriksa variabel. Kami menyarankan Anda menghindari penggunaan any dalam kode Anda. Inilah contohnya.

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

Gunakan enum

Anda dapat menggunakan enum untuk menentukan satu set konstanta bernama dan menentukan standar yang dapat digunakan kembali dalam basis kode Anda. Kami menyarankan Anda mengekspor enum Anda satu kali di tingkat global, dan kemudian membiarkan kelas lain mengimpor dan menggunakan enum. Asumsikan bahwa Anda ingin membuat serangkaian tindakan yang mungkin untuk menangkap peristiwa dalam basis kode Anda. TypeScript menyediakan enum numerik dan berbasis string. Contoh berikut menggunakan enum.

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)

Gunakan antarmuka

Antarmuka adalah kontrak untuk kelas. Jika Anda membuat kontrak, maka pengguna Anda harus mematuhi kontrak. Dalam contoh berikut, antarmuka digunakan untuk membakukan props dan memastikan bahwa penelepon memberikan parameter yang diharapkan saat menggunakan kelas ini.

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
})

Beberapa properti hanya dapat dimodifikasi ketika objek pertama kali dibuat. Anda dapat menentukan ini dengan meletakkan readonly sebelum nama properti, seperti contoh berikut menunjukkan.

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

Perluas antarmuka

Memperluas antarmuka mengurangi duplikasi, karena Anda tidak perlu menyalin properti antar antarmuka. Selain itu, pembaca kode Anda dapat dengan mudah memahami hubungan dalam aplikasi Anda.

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

Hindari antarmuka kosong

Kami menyarankan Anda menghindari antarmuka kosong karena potensi risiko yang mereka buat. Dalam contoh berikut, ada antarmuka kosong yang disebutBucketProps. myS3Bucket2Objek myS3Bucket1 dan keduanya valid, tetapi mereka mengikuti standar yang berbeda karena antarmuka tidak memberlakukan kontrak apa pun. Kode berikut akan mengkompilasi dan mencetak properti tetapi ini memperkenalkan inkonsistensi dalam aplikasi Anda.

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",
});

Gunakan pabrik

Dalam pola Abstrak Pabrik, antarmuka bertanggung jawab untuk membuat pabrik objek terkait tanpa secara eksplisit menentukan kelas mereka. Misalnya, Anda dapat membuat pabrik Lambda untuk membuat fungsi Lambda. Alih-alih membuat fungsi Lambda baru dalam konstruksi Anda, Anda mendelegasikan proses pembuatan ke pabrik. Untuk informasi lebih lanjut tentang pola desain ini, lihat Pabrik Abstrak di TypeScript dalam dokumentasi Refactoring.Guru.

Gunakan destrukturisasi pada properti

Destructuring, diperkenalkan di ECMAScript 6 (ES6), adalah JavaScript fitur yang memberi Anda kemampuan untuk mengekstrak beberapa bagian data dari array atau objek dan menetapkannya ke variabel mereka sendiri.

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

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

const { objname, scope } = object;

Tentukan konvensi penamaan standar

Menegakkan konvensi penamaan membuat basis kode tetap konsisten dan mengurangi overhead saat memikirkan cara memberi nama variabel. Sebaiknya lakukan hal berikut:

• Gunakan camelCase untuk nama variabel dan fungsi.

• Gunakan PascalCase untuk nama kelas dan nama antarmuka.

• Gunakan camelCase untuk anggota antarmuka.

• Gunakan PascalCase untuk nama tipe dan nama enum.

• Nama file dengan camelCase (misalnya, atau) ebsVolumes.tsx storage.tsb

Jangan gunakan kata kunci var

letPernyataan ini digunakan untuk mendeklarasikan variabel lokal di. TypeScript Ini mirip dengan var kata kunci, tetapi memiliki beberapa batasan dalam pelingkupan dibandingkan dengan kata kunci. var Variabel yang dideklarasikan dalam blok dengan hanya let tersedia untuk digunakan di dalam blok itu. varKata kunci tidak dapat dicakup blok, yang berarti dapat diakses di luar blok tertentu (diwakili oleh{}) tetapi tidak di luar fungsi yang ditentukan. Anda dapat mendeklarasikan ulang dan memperbarui variabel. var Ini adalah praktik terbaik untuk menghindari penggunaan var kata kunci.

Pertimbangkan untuk menggunakan ESLint dan Prettier

ESLint menganalisis kode Anda secara statis untuk menemukan masalah dengan cepat. Anda dapat menggunakan ESLint untuk membuat serangkaian pernyataan (disebut aturan lint) yang menentukan bagaimana kode Anda seharusnya terlihat atau berperilaku. ESLint juga memiliki saran pemecah otomatis untuk membantu Anda meningkatkan kode Anda. Terakhir, Anda dapat menggunakan ESLint untuk memuat aturan lint dari plugin bersama.

Prettier adalah pemformat kode terkenal yang mendukung berbagai bahasa pemrograman yang berbeda. Anda dapat menggunakan Prettier untuk mengatur gaya kode Anda sehingga Anda dapat menghindari pemformatan kode secara manual. Setelah instalasi, Anda dapat memperbarui package.json file Anda dan menjalankan npm run lint perintah npm run format dan.

Contoh berikut menunjukkan cara mengaktifkan ESLint dan formatter Prettier untuk proyek Anda. 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)'"
}

Gunakan pengubah akses

Pengubah pribadi TypeScript membatasi visibilitas ke kelas yang sama saja. Saat Anda menambahkan pengubah pribadi ke properti atau metode, Anda dapat mengakses properti atau metode tersebut dalam kelas yang sama.

Pengubah publik memungkinkan properti dan metode kelas dapat diakses dari semua lokasi. Jika Anda tidak menentukan pengubah akses apa pun untuk properti dan metode, mereka akan mengambil pengubah publik secara default.

Pengubah yang dilindungi memungkinkan properti dan metode kelas dapat diakses dalam kelas yang sama dan dalam subkelas. Gunakan pengubah yang dilindungi saat Anda berharap untuk membuat subclass dalam aplikasi Anda AWS CDK .

Gunakan jenis utilitas

Jenis utilitas di TypeScript adalah fungsi tipe standar yang melakukan transformasi dan operasi pada tipe yang ada. Ini membantu Anda membuat tipe baru berdasarkan tipe yang ada. Misalnya, Anda dapat mengubah atau mengekstrak properti, membuat properti opsional atau wajib, atau membuat versi tipe yang tidak dapat diubah. Dengan menggunakan tipe utilitas, Anda dapat menentukan jenis yang lebih tepat dan menangkap potensi kesalahan pada waktu kompilasi.

Sebagian <Type>

Partialmenandai semua anggota dari jenis input Type sebagai opsional. Utilitas ini mengembalikan tipe yang mewakili semua himpunan bagian dari tipe tertentu. Berikut adalah contoh Partial.

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

let partialDog: Partial<Dog> = {};

Diperlukan <Type>

Requiredmelakukan kebalikan dariPartial. Itu membuat semua anggota tipe input Type non-opsional (dengan kata lain, diperlukan). Berikut adalah contoh 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
};