TypeScript - 環境變量：初學者指南

你好啊，未來的編程巨星！今天，我們將踏上一段令人興奮的旅程，探索 TypeScript 環境變量的世界。別擔心如果你之前從未寫過一行代碼——我將成為你的友好導遊，我們將一步一步地一起探索這個主題。所以，拿起你的虛擬背包，讓我們開始吧！

TypeScript - Ambients

TypeScript 中的環境變量是什麼？

在我們深入之前，讓我們從基礎開始。想像你正在學習一門新的語言，有人給你一本字典。這本字典能幫助你理解你可能遇到的單詞，即使你還沒有學會如何在句子中使用它們。在 TypeScript 的世界中，環境變量扮演著類似的作用。

TypeScript 中的環境變量是描述現有 JavaScript 代碼的形狀和結構的聲明，而不實際實現這段代碼。它們就像一張地圖，告訴 TypeScript：“嘿，這段代碼在某個地方存在，這就是它的樣子！”

我們為什麼需要環境變量？

你可能會想，“為什麼要這麼麻煩？”讓我給你講一個小故事。

從前有一個名叫愛麗絲的開發者，她住在 JavaScript 的土地上。愛麗絲喜歡在她的項目中使用各種各樣的酷炫庫。但是當她轉向 TypeScript 時，她發現 TypeScript 對這些庫一無所知！可憐的愛麗絲陷入了困境——她無法使用她最喜歡的工具，除非 TypeScript 不再抱怨。那就是她發現環境變量的魔法時候，這讓她能夠教 TypeScript 了解這些外部庫。

定義環境變量

現在我們理解了為什麼環境變量如此重要，讓我們來學習如何定義它們。有幾種方法可以做到這點，讓我們來一一介紹：

1. 使用 'declare' 的環境變量聲明

最常見的創建環境變量聲明的方法是使用 declare 鍵字。這告訴 TypeScript：“相信我，這個東西在 JavaScript 世界中的某個地方存在。”

讓我們看一個例子：

declare var myGlobalVariable: number;

console.log(myGlobalVariable); // TypeScript 現在知道這個存在！

在這個例子中，我們告訴 TypeScript 有一個名為 myGlobalVariable 的全局變量，類型為 number。TypeScript 現在會允許我們使用這個變量而不會抱怨，即使我們實際上並未在我們的 TypeScript 代碼中定義它。

2. 環境模塊

有時候，我們想描述整個模塊。我們可以使用環境模塊來做到這點。這是它的樣子：

declare module 'my-cool-library' {
export function doSomethingAwesome(): void;
export const magicNumber: number;
}

現在，我們可以在 TypeScript 代碼中使用這個庫：

import { doSomethingAwesome, magicNumber } from 'my-cool-library';

doSomethingAwesome();
console.log(magicNumber);

TypeScript 現在理解 my-cool-library 的結構，即使它無法訪問其實際的實現。

3. 環境命名空間

命名空間是 TypeScript 特有的組織代碼的方式。我們也可以聲明環境命名空間：

declare namespace MyNamespace {
function myFunction(): void;
const myConstant: string;
}

MyNamespace.myFunction();
console.log(MyNamespace.myConstant);

這告訴 TypeScript MyNamespace 的結構，讓我們能夠使用其成員而不會出現錯誤。

高級環境變量技巧

現在我們已經介紹了基礎知識，讓我們來看看一些更先進的技巧。別擔心如果這些看起來有點複雜——隨著練習，它們會變得習以為常！

合併聲明

TypeScript 允許我們添加到現有的聲明。這被稱為聲明合併：

// 現有的聲明
declare namespace MyNamespace {
const x: number;
}

// 與現有的聲明合併
declare namespace MyNamespace {
const y: string;
}

// 現在 MyNamespace 有 x 和 y
console.log(MyNamespace.x, MyNamespace.y);

環境枚舉

枚舉是一種給數字集合提供更友好名稱的方式。我們也可以聲明環境枚舉：

declare enum Color {
Red,
Green,
Blue
}

let myFavoriteColor: Color = Color.Blue;

通配符模塊聲明

有時候，我們想聲明一整組模塊。我們可以使用通配符來做到這點：

declare module "mylib/*" {
export function doSomething(): void;
}

import { doSomething } from "mylib/something";
doSomething(); // 這個現在可以工作了！

使用環境變量的最佳實踐

在我們結束之前，讓我們來討論一些最佳實踐：

使用聲明文件：將你的環境變量聲明放在 .d.ts 文件中是一個好主意。這樣可以將它們與你的實際代碼分開。
謹慎使用 'any'：雖然使用 any 來描述一切都很誘人，但請儘可能地在你的聲明中具體化。
保持更新：如果你描述的庫發生了變化，請確保更新你的環境變量聲明！
使用現有的聲明文件：許多流行的庫已經有可用的聲明文件。在編寫自己的之前，請檢查是否有現成的！

結論

恭喜你！你剛剛踏出了進入 TypeScript 環境變量世界的第一步。我們已經介紹了很多內容，從基本的聲明到先進的技巧。記住，就像學習任何新技能一樣，精通環境變量需要練習。如果起初這看起來有點棘手——請不要氣餒，堅持下去，很快你就能像專家一樣編寫環境變量了！

在我們結束時，這裡有一張總結我們討論的主要方法的表格：

方法	描述	示例
declare var	聲明一個全局變量	`declare var myGlobal: number;`
declare function	聲明一個全局函數	`declare function myFunc(): void;`
declare module	聲明一個模塊	`declare module 'my-module' { ... }`
declare namespace	聲明一個命名空間	`declare namespace MyNS { ... }`
declare enum	聲明一個枚舉	`declare enum Color { ... }`

記住，TypeScript 的環境變量是你的朋友。它們在這裡幫助你將現有的 JavaScript 代碼用在你的 TypeScript 項目中。所以，勇往直前，去探索吧，並且快樂編程！

Credits: Image by storyset