打字稿：學習基礎知識反應

本文探討了 TypeScript 的好處及其基本用法，特別是在 React 開發中。 之前的一篇文章（為了簡潔省略了連結）介紹了 TypeScript 的介紹和環境設定。

為什麼要選 TypeScript？

JavaScript 最初的優點、彈性，在大型專案中常常成為弱點。 它的動態類型可能會導致維護困難和可擴展性挑戰。 TypeScript 透過引入靜態類型來解決這個問題，並提供了幾個關鍵優勢：

早期錯誤偵測：靜態型別允許在開發過程中及早識別潛在的錯誤。 如果偵測到類型錯誤，編譯器會阻止編譯，從而提高程式碼可靠性。

增強的可擴展性和可維護性：類型和介面確保程式碼的一致性和跨模組的正確使用，這對於大型應用程式至關重要。 在 React 中，這透過強制執行預期的 prop 類型來確保元件的可靠性。

提高程式碼可讀性和壽命：明確鍵入增強了程式碼清晰度，使原始開發人員和未來的貢獻者受益。 了解資料類型可以簡化調試和維護。

明確打字：核心優勢

TypeScript 的強大之處在於它能夠明確定義變數類型。雖然隱式類型是可能的，但它增加了意外行為的風險。 考慮這些例子：

let author: string = "Tyler Meyer";
author = 32; // Error: Type 'number' is not assignable to type 'string'.
console.log(author); // Will not execute due to the error above.

此處，author 明確鍵入為字串，從而防止分配數字。

let studentGrades: number[] = [80, 85, 93];
studentGrades.push(88); // Valid
studentGrades.push("A"); // Error: Type 'string' is not assignable to type 'number'.
studentGrades.push("97"); // Error: Type 'string' is not assignable to type 'number'.

studentGrades 陣列定義為僅保存數字。

別名與介面：管理複雜型別

隨著專案的成長，類型別名和介面對於管理複雜的資料結構變得至關重要。

type Author = {
  firstName: string;
  lastName: string;
  age: number;
  lovesCoding: boolean;
};

const coolAuthor: Author = {
  firstName: "Tyler",
  lastName: "Meyer",
  age: 32,
  lovesCoding: true,
};

別名 (type) 可用於各種資料型別。 然而，介面 (interface) 專門用於物件類型並支援繼承：

interface Book {
  title: string;
  numberOfPages: number;
}

interface Textbook extends Book {
  subject: string;
}

const calculusBook: Textbook = {
  title: "Calculus 4 Dummies",
  numberOfPages: 58,
  subject: "Calculus",
};

React 中的 TypeScript

對於使用 .tsx 檔案的 React 項目，TypeScript 增強了元件內的資料流管理。

型別安全函數：

type Person = {
  name: string;
  age: number;
};

function greeting({ name, age }: Person) {
  return `My name is ${name}, and I am ${age} years old.`;
}

greeting({ name: 'Tyler', age: 32 }); // Valid
greeting({ name: 'Ash', profession: 'Photographer' }); // Error: Missing 'age' property
greeting({ name: 'Sadie', age: '1' }); // Error: Type 'string' is not assignable to type 'number'.

greeting 函數的型別安全確保了參數的正確使用。

類型安全的 React 元件：

import React from 'react';

type ChildProps = {
  name: string;
  age: number;
  profession: string;
};

function Child({ name, age, profession }: ChildProps) {
  return (
    <div>
      <p>Name: {name}</p>
      <p>Age: {age}</p>
      <p>Profession: {profession}</p>
    </div>
  );
}

function App() {
  return (
    <div>
      <h1 id="This-is-my-child">This is my child:</h1>
      <Child name="Tyler" age={32} profession="Software Developer" />
    </div>
  );
}

此範例示範了 React 元件中的類型安全性 props。

來源：（為簡潔起見，省略了連結）引用了原始來源，但刪除了連結以符合不包含外部連結的要求。

以上是打字稿：學習基礎知識反應的詳細內容。更多資訊請關注PHP中文網其他相關文章！