限制與注意事項
數值需自行加單位：
如果綁定的值是數字，記得附加單位，例如：僅支持樣式作用域內：
v-bind()只能用在<style scoped>中，不能直接用於全局樣式。瀏覽器兼容性：
這依賴於 CSS 變數，因此需要現代瀏覽器的支持。
:deep(.a + .a)
這表示選擇作用域內類名為.a的元素，並選中其後直接緊接另一個.a元素的組合。這是正確且有效的寫法。:deep(.a) { & + .a { } }
這是一種嵌套的寫法，表示與上一個寫法等價，選擇.a元素，並設置它後面直接相鄰的.a元素樣式。
因此，兩種寫法的選擇器目的是相同的。
4. constant() 和 env() 是 CSS 函數，用於訪問環境變數。這些變數通常由設備或瀏覽器設置，用於適配特定設備（例如具有瀏海的手機）。它們最常用於處理安全區域（safe area insets）的布局。
1. constant()
- 概念：
constant()是早期的 CSS 函數，曾被用來引用瀏覽器環境變數，例如 iOS Safari 中的安全區域（safe area）。 - 狀態：已被廢棄，現已由
env()取代。 - 支持情況：僅支持一些舊版的 iOS Safari（12 及更早版本）。
範例：
在支持的瀏覽器中，這會將 padding-top 設置為設備頂部的安全區域高度。
2. env()
- 概念：
env()是現代 CSS 中推薦的方式，用於訪問環境變數，提供對設備特定屬性的支持，例如安全區域。 - 支持情況：現代瀏覽器，包括 iOS Safari、Chrome 等。
範例：
這是目前標準方式，用來確保內容不會與瀏海等設備元素重疊。
使用場景
這兩個函數通常用於適配帶有安全區域的設備，尤其是 iPhone 帶有瀏海或圓角的情況。
常見環境變數
safe-area-inset-top：安全區域的上間距safe-area-inset-bottom：安全區域的下間距safe-area-inset-left：安全區域的左間距safe-area-inset-right：安全區域的右間距
範例：
body {
padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}
結論
- 如果需要兼容舊版 iOS Safari：可以同時使用兩者，例如：
- 在現代開發中，優先使用
env()，因為它是 CSS 的標準化功能且被廣泛支持。
5.字面量类型 ( Literal type )是 JavaScript 本身提供的一个准确变量
type Status = 'success' | 'error' | 'pending'; // 用|設定多的types，叫做union types 聯合型別
let requestStatus: Status = 'success'; // 僅允許這三種值
測驗練習:
function iTakeFoo(foo: 'foo') {}
const test = {
someProp: 'foo'
};
iTakeFoo(test.someProp); // Error: Argument of type string is not assignable to parameter of type 'foo'
这是由于 test 被推断为 { someProp: string }，我们可以采用一个简单的类型断言来告诉 TypeScript 你想推断的字面量：
function iTakeFoo(foo: 'foo') {}
const test = {
someProp: 'foo' as 'foo'
};
iTakeFoo(test.someProp); // ok
或者使用类型注解的方式，来帮助 TypeScript 推断正确的类型：
function iTakeFoo(foo: 'foo') {}
type Test = {
someProp: 'foo';
};
const test: Test = {
// 推断 `someProp` 永远是 'foo'
someProp: 'foo'
};
iTakeFoo(test.someProp); // okkeyof 顧名思義就是把「物件型別（object type）」的 key 拿出來，但要留意的是，這裡提到的是「物件型別」，而不是真的「物件」，前者是 TypeScript 的型別，後者是 JavaScript 中的一個物件（object）：