學習 Typescript 的旅程。

大家好，我最近開始了我的 TypeScript 之旅，並透過程式設計英雄的高級 Web 開發課程取得了進步。我對 TypeScript 有一些基礎知識，但沒有深入探索。我的課程從深入研究 TypeScript 開始。一週過去了，我的學習有了很大的進步。以下是我所掌握的關鍵概念的簡化概述。

TypeScript 就像 JavaScript，但有超能力！

TypeScript 是 JavaScript 的超集，為該語言新增了可選的靜態類型。這意味著您可以聲明變數、函數參數和傳回值的類型，這有助於在開發過程的早期發現潛在的錯誤。
使用 TypeScript 的好處

• 早期錯誤偵測
• 提高程式碼可讀性
• 增強程式碼可靠性
• 更好的程式碼完成和 IntelliSense
• 大型專案支援

原始和非原始資料類型

原始資料類型表示單一值並直接儲存在記憶體中。以下是 typescript 中使用的一些原始資料類型

• 字串
• 數字
• 布林值
• 未定義
• 空

let name : string = "Kishor";
let age : number = 27;
let isDeveloper: boolen = true;
let x : null = null;
let y: undefined = undefined;

如您在範例中看到的，要為變數指派類型，您必須在定義變數名稱和類型後使用冒號 ( :) 符號。

非原始資料類型，也稱為引用類型，表示複雜的資料結構，並儲存為對記憶體位置的引用。 TypeScript 支援以下非原始資料型別：

• 對象
• 數組
• 元組
• 功能

let Person: {name: string, age : number} = {name: "kishor", age: 27}; //object
let numbers: number[] = [1,2,3,4];
let fruits: string[]= ["apple", "pineapple", "banana"];
let tuple: [string, number, boolean] = ["xyz", 123, true];
function greet(name: string) : any {
  return `hello ${name}`
}

類型別名

TypeScript 中的型別別名是一種為現有型別賦予新名稱的方法。這可以使您的程式碼更具可讀性和可維護性，尤其是在處理複雜類型時。

// Defining a type alias for a person object
type Person = {
  name: string;
  age: number;
};
// Using the type alias
const person1: Person = {
  name: "Alice",
  age: 30
};

在此範例中，Person 是一個型別別名，表示具有名稱和年齡屬性的物件。
TypeScript 中的並集與交集類型
聯合類型表示可以是多種類型之一的值。它是使用 | 定義的運算子。
交叉類型將多種類型合併為一種類型。它是使用 & 運算子定義的。

type StringOrNumber = string | number; //Union type
let value: StringOrNumber = "hello";
value = 42;
type Person = {
    name: string;
    age: number;
};
type Address = {
    street: string;
    city: string;
};
type PersonWithAddress = Person & Address;//Intersection type
const personWithAddress: PersonWithAddress = {
    name: "Alice",
    age: 30,
    street: "123 Main St",
    city: "Anytown"
};

從未、未知

never 類型表示從未出現過的值。
未知類型代表任何值。它比 any 類型更安全，因為在使用未知類型的值之前必須執行類型檢查或斷言。

let name : string = "Kishor";
let age : number = 27;
let isDeveloper: boolen = true;
let x : null = null;
let y: undefined = undefined;

型別斷言

類型斷言是一種告訴 TypeScript 編譯器您對類型的了解比它更多的方法。這是一種明確指定變數類型的方法

let Person: {name: string, age : number} = {name: "kishor", age: 27}; //object
let numbers: number[] = [1,2,3,4];
let fruits: string[]= ["apple", "pineapple", "banana"];
let tuple: [string, number, boolean] = ["xyz", 123, true];
function greet(name: string) : any {
  return `hello ${name}`
}

類型保護裝置

類型保護可讓您根據某些條件縮小變數的類型範圍。透過在存取變數的屬性或方法之前檢查變數的類型，您可以避免潛在的執行階段錯誤。

• 運算符類型
• 實例操作符

// Defining a type alias for a person object
type Person = {
  name: string;
  age: number;
};
// Using the type alias
const person1: Person = {
  name: "Alice",
  age: 30
};

TypeScript 中的介面

TypeScript 中的介面是用於建立具有特定屬性的物件的藍圖。

type StringOrNumber = string | number; //Union type
let value: StringOrNumber = "hello";
value = 42;
type Person = {
    name: string;
    age: number;
};
type Address = {
    street: string;
    city: string;
};
type PersonWithAddress = Person & Address;//Intersection type
const personWithAddress: PersonWithAddress = {
    name: "Alice",
    age: 30,
    street: "123 Main St",
    city: "Anytown"
};

在此範例中，Person 介面定義了 person 物件必須具有firstName、lastName 和age 屬性。建立 person1 物件時

TypeScript 中的泛型

泛型是 TypeScript 中的一項強大功能，它允許您建立可以處理不同資料類型的可重複使用元件。

function error(message: string): never {
    throw new Error(message);
} //the return type is never because there is no data returned.
let value: unknown = "hello";
if (typeof value === "string") {
  let strLength: number = value.length;
}

在此範例中，T 是型別參數。它代表任何類型的佔位符。當你呼叫恆等函數時，你可以傳遞任何類型的參數，函數會傳回相同的類型。

TypeScript 中的約束

在 TypeScript 中，泛型約束可讓您對可以作為參數傳遞給泛型函數或用作泛型類別或介面中的類型參數的類型套用限制。

let value: unknown = "hello";
let strLength: number = (value as string).length;

這裡使用extends關鍵字來約束資料

操作員的鑰匙

TypeScript 中的 keyof 運算子用於取得物件類型的所有屬性名稱的聯合類型。這在使用泛型類型和映射類型時特別有用。

//typeof
function printValue(value: unknown) {
    if (typeof value === "string") {
        console.log(value.toUpperCase());
    } else if (typeof value === "number") {
        console.log(value.toFixed(2));   
    }
}
//instanceof
function printDate(date: unknown) {
    if (date instanceof Date) {
        console.log(date.toISOString());
    }
}

實用程式類型

Pick：從 T
中挑選特定屬性

interface Person {
  firstName: string;
  lastName: string;
  age: number;
}
const person1: Person = {
  firstName: "Alice",
  lastName: "Johnson",
  age: 30
};

省略：省略 T
中的特定屬性

function identity<T>(arg: T): T {
  return arg;
}
identity<string>(string);

Partial：使 T 的所有屬性可選。

interface Person {
    name: string;
    age: number;
}
function identity<T extends Person>(arg: T): T {
  return arg;
}
const result  = identity<Person>({
    name: "aa";
    age: 12;
});

其他人喜歡，
必填
只讀
記錄

TypeScript 中的類別

在 TypeScript 中，類別是使用 class 關鍵字定義的。

interface Person {
  name: string;
  age: number;
}
type PersonKeys = keyof Person; // Type: "name" | "age"

TypeScript 中的存取修飾符

public 類別成員的預設可見性是public。公共成員可以在任何地方存取
受保護的成員僅對聲明它們的類別的子類別可見。
私人成員只能在班級內存取。

TypeScript 中的靜態成員

TypeScript 中的靜態成員是屬於類別本身的成員（屬性和方法），而不是屬於類別的各個實例。

let name : string = "Kishor";
let age : number = 27;
let isDeveloper: boolen = true;
let x : null = null;
let y: undefined = undefined;

在 TypeScript 中實現

在 TypeScript 中，介面定義了要實現的類別的契約。實作介面的類別必須具有介面中聲明的所有屬性和方法。使用了implements關鍵字

let Person: {name: string, age : number} = {name: "kishor", age: 27}; //object
let numbers: number[] = [1,2,3,4];
let fruits: string[]= ["apple", "pineapple", "banana"];
let tuple: [string, number, boolean] = ["xyz", 123, true];
function greet(name: string) : any {
  return `hello ${name}`
}

結論：

這些是我本週學到的 Typescript 的一些基本用例。我學到了很多很酷的東西，但還有很多東西有待發現。 TypeScript 不斷發展，因此我努力跟上最新版本和功能，並關注 TypeScript 的官方文件和部落格以獲取最新消息和最佳實踐。 
感謝您在我的旅途中陪伴我。

以上是學習 Typescript 的旅程。的詳細內容。更多資訊請關注PHP中文網其他相關文章！