首頁 > web前端 > js教程 > 打字稿:學習基礎知識反應

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

Barbara Streisand
發布: 2025-01-27 18:37:08
原創
175 人瀏覽過

TypeScript: Learning the Basics   React

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

為什麼要選 TypeScript?

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

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

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

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

明確打字:核心優勢

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

<code class="language-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.</code>
登入後複製

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

<code class="language-typescript">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'.</code>
登入後複製

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

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

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

<code class="language-typescript">type Author = {
  firstName: string;
  lastName: string;
  age: number;
  lovesCoding: boolean;
};

const coolAuthor: Author = {
  firstName: "Tyler",
  lastName: "Meyer",
  age: 32,
  lovesCoding: true,
};</code>
登入後複製

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

<code class="language-typescript">interface Book {
  title: string;
  numberOfPages: number;
}

interface Textbook extends Book {
  subject: string;
}

const calculusBook: Textbook = {
  title: "Calculus 4 Dummies",
  numberOfPages: 58,
  subject: "Calculus",
};</code>
登入後複製

React 中的 TypeScript

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

型別安全函數:

<code class="language-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'.</code>
登入後複製

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

類型安全的 React 元件:

<code class="language-typescript">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>This is my child:</h1>
      <Child name="Tyler" age={32} profession="Software Developer" />
    </div>
  );
}</code>
登入後複製

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

來源:(為簡潔起見,省略了連結)引用了原始來源,但刪除了連結以符合不包含外部連結的要求。

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

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板