Membina dengan TypeScript: Panduan Berasaskan Lego

TypeScript: Peralihan lancar daripada JavaScript kepada TypeScript adalah seperti menaik taraf proses pembinaan Lego anda!

"Lakukan apa yang anda boleh, gunakan apa yang anda ada" - ini adalah salah satu moto saya. Ayat ini juga mencerminkan sebahagian daripada minda pertumbuhan. Kebanyakan kita pembangun front-end atau JavaScript telah pun memulakan atau berhijrah sepenuhnya ke TypeScript. Tetapi sesetengah orang mungkin masih mengalami kesukaran untuk memahami konsep, atau menukar minda mereka daripada JavaScript kepada TypeScript. Untuk menyelesaikan masalah ini, kami akan menggunakan salah satu alat kegemaran saya: Legos. Mari kita mulakan di sini: “Fikirkan JavaScript sebagai set asas bata Lego yang boleh anda bina secara bebas ialah set bata yang sama, tetapi dengan arahan terperinci dan semakan kawalan kualiti untuk perbincangan yang lebih mendalam tentang TypeScript, anda boleh rujuk sini , sini , dan video ini . Panduan ini bertujuan untuk menunjukkan cara setiap konsep JavaScript diterjemahkan kepada TypeScript, menggunakan analogi Lego untuk membantu anda memahami konsep dengan lebih mudah.

Skop Pembolehubah dan Pengangkat: Membina Bilik

Takrifan konsep

Skop pembolehubah merujuk kepada konteks di mana pembolehubah boleh diakses dan digunakan dalam atur cara. Terdapat dua jenis skop utama: skop tempatan dan skop global. Pembolehubah yang diisytiharkan di luar sebarang fungsi adalah dalam skop global, yang bermaksud ia boleh diakses dan diubah suai di mana-mana dalam kod. Sebaliknya, pembolehubah yang diisytiharkan dalam fungsi berada dalam skop setempat dan hanya boleh diakses dalam fungsi tersebut. JavaScript menggunakan kata kunci var, let dan const untuk mengisytiharkan pembolehubah dan setiap kata kunci mempunyai kesan yang berbeza pada skop. Pembolehubah yang diisytiharkan dengan let dan const adalah berskop blok, yang bermaksud ia hanya boleh diakses dalam blok tertutup terdekat {}. Sebaliknya, var adalah skop fungsi, menjadikannya tersedia di seluruh fungsi di mana ia diisytiharkan. Pemahaman yang jelas tentang skop pembolehubah membantu mengelakkan masalah seperti konflik nama berubah dan kesan sampingan yang tidak dijangka dalam program JavaScript.

Mengangkat ialah tindakan memindahkan pembolehubah dan pengisytiharan fungsi ke bahagian atas skop yang mengandunginya sebelum kod dilaksanakan (fasa penyusunan). Ini bermakna pembolehubah dan fungsi boleh digunakan sebelum ia diisytiharkan. Pengisytiharan fungsi dinaikkan sepenuhnya, membolehkan ia dipanggil walaupun sebelum ia ditakrifkan dalam kod. Walau bagaimanapun, pembolehubah yang diisytiharkan dengan var dinaikkan tetapi tidak dimulakan kepada nilai awalnya, jadi mengaksesnya sebelum penetapan akan menghasilkan undefined. Pembolehubah yang diisytiharkan dengan let dan const juga dinaikkan tetapi tidak dimulakan, yang akan menghasilkan ReferenceError jika diakses sebelum pengisytiharan. Memahami promosi membantu pembangun mengelakkan perangkap biasa dengan membina perisytiharan pembolehubah dan fungsi dengan betul.

Analogi Lego

Fikirkan skop sebagai bilik Lego yang berbeza:

• Skop global: Semua pembina boleh mengakses ruang tamu kongsi blok bangunan.
• Skop fungsi: meja bangunan peribadi.
• Skop Blok: Bina kawasan tertentu pada jadual.

Pelaksanaan JavaScript

<code class="language-javascript">// 全局搭建房间
const globalBricks = "每个人都可以使用这些";
function buildSection() {
    // 个人搭建桌
    var tableBricks = "仅供此搭建者使用";

    if (true) {
        // 特定区域
        let sectionBricks = "仅供此部分使用";
    }
}</code>

Evolusi TypeScript

<code class="language-typescript">// 为我们的搭建房间添加类型安全
type BrickType = "regular" | "special" | "rare";
const globalBricks: BrickType = "regular";

function buildSection(): void {
    // TypeScript确保我们只使用有效的积木类型
    const tableBricks: BrickType = "special";

    if (true) {
        // TypeScript阻止在此块之外使用sectionBricks
        let sectionBricks: BrickType = "rare";
    }
}

// 真实世界的例子：配置管理
interface AppConfig {
    readonly apiKey: string;
    environment: "dev" | "prod";
    features: Set<string>;
}

const config: AppConfig = {
    apiKey: "secret",
    environment: "dev",
    features: new Set(["feature1", "feature2"])
};</code>

Fungsi dan Penutupan: Arahan Membina

Takrifan konsep

Fungsi ialah blok kod boleh guna semula yang direka untuk melaksanakan tugas tertentu. Ini meningkatkan kecekapan modulariti dan kod. Ia boleh ditakrifkan menggunakan kata kunci function, diikuti dengan nama, kurungan () dan blok kod yang disertakan dalam kurungan kerinting {}. Argumen boleh dihantar ke dalam fungsi dalam kurungan atau pendakap, yang bertindak sebagai pemegang tempat untuk nilai yang disediakan apabila fungsi dipanggil. JavaScript juga menyokong fungsi tanpa nama (tanpa nama) dan fungsi anak panah (menyediakan sintaks yang lebih bersih). Fungsi boleh menggunakan pernyataan return untuk mengembalikan nilai atau melakukan operasi yang tidak mengembalikan nilai. Selain itu, fungsi dalam JavaScript ialah objek kelas pertama, yang bermaksud ia boleh diberikan kepada pembolehubah, diluluskan sebagai hujah dan dikembalikan daripada fungsi lain, sekali gus membolehkan corak pengaturcaraan berfungsi.

Penutupan ialah ciri berkuasa yang membenarkan fungsi mengingati dan mengakses skop leksikalnya walaupun fungsi tersebut dilaksanakan di luar skop tersebut. Penutupan boleh dibuat apabila fungsi ditakrifkan di dalam fungsi dan merujuk pembolehubah dalam fungsi luar. Walaupun selepas fungsi luar selesai dilaksanakan, fungsi dalam masih boleh mengakses pembolehubah ini. Ciri ini berguna untuk pengkapsulan data dan mengekalkan keadaan dalam persekitaran seperti pengendali acara atau panggil balik. Penutupan menyokong corak seperti pembolehubah persendirian, di mana fungsi boleh mendedahkan gelagat tertentu sambil menyembunyikan butiran pelaksanaan.

Analogi Lego

• Fungsi adalah seperti arahan membina.
• Parameter adalah seperti blok binaan yang diperlukan.
• Nilai pulangan adalah seperti struktur yang telah siap.
• Penutupan adalah seperti kit bangunan tertutup dengan beberapa blok bangunan yang disertakan secara kekal.

Pelaksanaan JavaScript

<code class="language-javascript">function buildHouse(floors, color) {
    const foundation = "concrete";

    return function addRoof(roofStyle) {
        return `${color} house with ${floors} floors and ${roofStyle} roof on ${foundation}`;
    };
}</code>

Evolusi TypeScript

<code class="language-typescript">// 带有类型的基本函数
interface House {
    floors: number;
    color: string;
    roofStyle: string;
    foundation: string;
}

// 为我们的搭建者添加类型安全
function buildHouse(
    floors: number,
    color: string
): (roofStyle: string) => House {
    const foundation = "concrete";

    return (roofStyle: string): House => ({
        floors,
        color,
        roofStyle,
        foundation
    });
}

// 真实世界的例子：组件工厂
interface ComponentProps {
    id: string;
    style?: React.CSSProperties;
    children?: React.ReactNode;
}

function createComponent<T extends ComponentProps>(
    baseProps: T
): (additionalProps: Partial<T>) => React.FC<T> {
    return (additionalProps) => {
        // 组件实现
        return (props) => <div></div>;
    };
}</code>

Objek dan Prototaip: Petua Membina

Takrifan konsep

Objek dalam JavaScript ialah struktur data asas yang berfungsi sebagai bekas untuk data dan fungsi yang berkaitan. Ia terdiri daripada pasangan nilai kunci, di mana setiap kunci (harta) dipetakan kepada nilai, yang boleh menjadi sebarang jenis JavaScript yang sah, termasuk fungsi (kaedah). Objek boleh dibuat dalam beberapa cara:

• Objek literal: const obj = {}
• Pembina: new Object()
• Object.create()Kaedah

Sistem prototaip ialah mekanisme pewarisan terbina dalam JavaScript. Setiap objek mempunyai pautan dalaman ke objek lain, dipanggil prototaipnya. Apabila cuba mengakses harta yang tidak wujud pada objek, JavaScript mencarinya secara automatik dalam rantaian prototaipnya. Rantaian objek ini berterusan sehingga ia mencapai objek dengan prototaip null, biasanya Object.prototype. Memahami prototaip adalah penting untuk:

• Melaksanakan pewarisan
• Kaedah perkongsian antara kejadian
• Urus kecekapan ingatan
• Bina hierarki objek

Analogi Lego

Fikirkan objek dan prototaip seperti ini:

• Objek adalah seperti kit LEGO khusus dengan batu bata dan arahan uniknya sendiri.
• Prototaip adalah seperti templat induk yang boleh dirujuk oleh pelbagai kit.
• Warisan adalah seperti mempunyai suite asas yang daripadanya suite yang lebih maju boleh dibina.
• Hartanah adalah seperti blok binaan tertentu dalam setiap kit.
• Kaedah adalah seperti petua bangunan khas yang disertakan dalam setiap kit.

Pelaksanaan JavaScript

<code class="language-javascript">// 全局搭建房间
const globalBricks = "每个人都可以使用这些";
function buildSection() {
    // 个人搭建桌
    var tableBricks = "仅供此搭建者使用";

    if (true) {
        // 特定区域
        let sectionBricks = "仅供此部分使用";
    }
}</code>

Evolusi TypeScript

<code class="language-typescript">// 为我们的搭建房间添加类型安全
type BrickType = "regular" | "special" | "rare";
const globalBricks: BrickType = "regular";

function buildSection(): void {
    // TypeScript确保我们只使用有效的积木类型
    const tableBricks: BrickType = "special";

    if (true) {
        // TypeScript阻止在此块之外使用sectionBricks
        let sectionBricks: BrickType = "rare";
    }
}

// 真实世界的例子：配置管理
interface AppConfig {
    readonly apiKey: string;
    environment: "dev" | "prod";
    features: Set<string>;
}

const config: AppConfig = {
    apiKey: "secret",
    environment: "dev",
    features: new Set(["feature1", "feature2"])
};</code>

Pengaturcaraan Asynchronous: Membina Pasukan

Takrifan konsep

Fungsi tak segerak dan pengaturcaraan

Fungsi tak segerak ialah jenis fungsi khas dalam JavaScript yang menyediakan cara yang elegan untuk mengendalikan operasi tak segerak. Apabila diisytiharkan dengan kata kunci async, fungsi ini mengembalikan Janji secara automatik dan membolehkan penggunaan kata kunci await dalam badannya. Operator await menjeda pelaksanaan fungsi sehingga Promise diselesaikan atau ditolak, membenarkan kod tak segerak ditulis dalam gaya yang lebih segerak dan boleh dibaca. Sintaks ini secara berkesan mengurangkan kerumitan panggilan balik dan menghapuskan keperluan untuk rantai Promise bersarang. Contohnya, dalam async function fetchData() { const response = await fetch(url); }, fungsi menunggu operasi fetch selesai sebelum meneruskan pelaksanaan, menjadikan gelagat kod lebih boleh diramal sambil memastikan urutan utama kekal tidak disekat. Corak ini amat berguna apabila berurusan dengan berbilang operasi tak segerak yang bergantung antara satu sama lain, kerana ia membolehkan pembangun menulis kod yang menyatakan dengan jelas susunan operasi tanpa mengorbankan prestasi.

Janji

Janji mewakili nilai yang mungkin tersedia sekarang, tersedia pada masa hadapan, atau tidak pernah tersedia. Ia adalah objek dengan tiga keadaan yang mungkin: Menunggu, Selesai, atau Ditolak. Ia digunakan untuk mengendalikan operasi tak segerak. Janji mempunyai kaedah seperti .then(), .catch() dan .finally() untuk tindakan merantai berdasarkan hasilnya. Ini menjadikan mereka alternatif yang berkuasa kepada panggilan balik bersarang, meningkatkan kebolehbacaan kod dan pengendalian ralat.

Analogi Lego

• Fungsi tak segerak adalah seperti ahli pasukan yang bekerja pada bahagian yang berbeza.
• Janji adalah seperti perjanjian untuk menyampaikan bahagian yang telah siap.

Pelaksanaan JavaScript

<code class="language-javascript">// 全局搭建房间
const globalBricks = "每个人都可以使用这些";
function buildSection() {
    // 个人搭建桌
    var tableBricks = "仅供此搭建者使用";

    if (true) {
        // 特定区域
        let sectionBricks = "仅供此部分使用";
    }
}</code>

Evolusi TypeScript

<code class="language-typescript">// 为我们的搭建房间添加类型安全
type BrickType = "regular" | "special" | "rare";
const globalBricks: BrickType = "regular";

function buildSection(): void {
    // TypeScript确保我们只使用有效的积木类型
    const tableBricks: BrickType = "special";

    if (true) {
        // TypeScript阻止在此块之外使用sectionBricks
        let sectionBricks: BrickType = "rare";
    }
}

// 真实世界的例子：配置管理
interface AppConfig {
    readonly apiKey: string;
    environment: "dev" | "prod";
    features: Set<string>;
}

const config: AppConfig = {
    apiKey: "secret",
    environment: "dev",
    features: new Set(["feature1", "feature2"])
};</code>

Ciri-ciri Moden: Teknik Bangunan Termaju

Takrifan konsep

Nyahbina

Ini ialah cara yang kemas untuk mengekstrak nilai daripada tatasusunan atau sifat daripada objek ke dalam pembolehubah yang berbeza. Pemusnahan tatasusunan menggunakan kurungan segi empat sama [], manakala pemusnahan objek menggunakan kurungan kerinting {}. Sintaks ini mengurangkan keperluan untuk kod pendua dengan membongkar nilai terus ke dalam pembolehubah, menjadikannya lebih mudah untuk mengendalikan struktur data yang kompleks. Contohnya, const [a, b] = [1, 2] memberikan 1 kepada a dan 2 kepada b, manakala const { name } = person mengekstrak atribut nama daripada objek orang.

Kembangkan operator

Pengendali hamparan diwakili oleh tiga titik (...). Ia membenarkan objek boleh lelar seperti tatasusunan atau objek untuk dilanjutkan di mana berbilang elemen atau pasangan nilai kunci diperlukan. Ia boleh digunakan untuk menyalin, menggabungkan atau menghantar elemen tatasusunan sebagai hujah fungsi. Contohnya, const arr = [1, 2, ...anotherArray].

Rantai pilihan

Rantaian pilihan diwakili oleh ?.. Ia menyediakan cara yang selamat untuk mengakses sifat objek bersarang dalam tanpa menyebabkan ralat apabila harta itu tidak ditentukan atau batal. Jika rujukan adalah batal, ia litar pintas dan kembali tidak ditentukan serta-merta. Contohnya, user?.address?.street menyemak sama ada pengguna dan alamat wujud sebelum mengakses jalan. Sintaks ini menghalang ralat masa jalan dan menjadikan kerja dengan struktur data bersarang lebih bersih dan kurang terdedah kepada ralat, terutamanya dalam API atau data yang bergantung pada input pengguna.

Analogi Lego

• Dekonstruksi adalah seperti menyusun blok bangunan ke dalam bekas.
• Pengendali penyebaran adalah seperti menyalin blok binaan antara suite.
• Rantaian pilihan adalah seperti menyemak sama ada blok wujud sebelum menggunakannya.

Pelaksanaan JavaScript

<code class="language-javascript">function buildHouse(floors, color) {
    const foundation = "concrete";

    return function addRoof(roofStyle) {
        return `${color} house with ${floors} floors and ${roofStyle} roof on ${foundation}`;
    };
}</code>

Evolusi TypeScript

<code class="language-typescript">// 带有类型的基本函数
interface House {
    floors: number;
    color: string;
    roofStyle: string;
    foundation: string;
}

// 为我们的搭建者添加类型安全
function buildHouse(
    floors: number,
    color: string
): (roofStyle: string) => House {
    const foundation = "concrete";

    return (roofStyle: string): House => ({
        floors,
        color,
        roofStyle,
        foundation
    });
}

// 真实世界的例子：组件工厂
interface ComponentProps {
    id: string;
    style?: React.CSSProperties;
    children?: React.ReactNode;
}

function createComponent<T extends ComponentProps>(
    baseProps: T
): (additionalProps: Partial<T>) => React.FC<T> {
    return (additionalProps) => {
        // 组件实现
        return (props) => <div></div>;
    };
}</code>

Ringkasan

Peralihan daripada JavaScript kepada TypeScript adalah seperti menaik taraf proses pembinaan Lego anda:

1. JavaScript (pembinaan asas):

   • Pembinaan bentuk bebas
   • Penggunaan blok binaan yang fleksibel
   • Pengesanan ralat masa jalan

2. Skrip Jenis (dibina secara profesional):

   • Arahan terperinci dan khusus
   • Semakan Keserasian Bata
   • Pencegahan ralat sebelum pembinaan

Petua peralihan utama:

1. Mulakan dengan anotasi jenis asas.
2. Tambahkan antara muka dan taip takrifan secara beransur-ansur.
3. Gunakan pengkompil untuk menangkap ralat lebih awal.
4. Gunakan inferens jenis apabila boleh.
5. Pemeriksaan nol yang ketat dan pilihan pengkompil lain ditambah secara beransur-ansur.

Ingat: TypeScript membina pengetahuan JavaScript anda, menambah keselamatan dan kejelasan, dan bukannya mengubah proses pembinaan asas. Yang berkata, nasihat saya masih... belajar JavaScript dahulu, kemudian belajar TypeScript.

Rujukan

Diperoleh pada 12 Januari 2025, daripada
• https://www.php.cn/link/84b184211c5d929d9435a371eb505cad Mozilla https://www.php.cn/link/646e69d6e105d351e4e31a2e02a69b0e

Atas ialah kandungan terperinci Membina dengan TypeScript: Panduan Berasaskan Lego. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!