---
title: "TS解構賦值"
date: "2026-02"
category: "TS"
tags: ["TS"]
description: "解構賦值一般是對某個物件進行使用的。簡單來說，就是將其中的屬性拆分出來，然後將其賦值給局部變數。這個在函式中，有時會寫成一個不是很好讀的形式，但也是使用比較多的，這裡要記錄一下..."
source: "https://enriquemark.com/zh-hant/posts/TS%E8%A7%A3%E6%9E%84%E8%B5%8B%E5%80%BC"
---

解構賦值一般是對某個物件進行使用的。簡單來說，就是將其中的屬性拆分出來，然後將其賦值給局部變數。這個在函式中，有時會寫成一個不是很好讀的形式，但也是使用比較多的，這裡要記錄一下。

```ts
// 定义一个类型
interface FuncOptions {
  name: string;
  age?: number;
  verbose?: boolean;
}

// 函数签名就清爽了
function func({ name, age = 18, verbose = false }: FuncOptions) {
  // ...
}
```

這裡說白了就是先定義了一個介面，該介面是一個包含若干屬性的物件。在定義函式時，直接從這個物件中解構出所需的元素，並使用等號（=）為其賦了一個預設值。這裡最大的坑就是後面的 FuncOptions：它既可以是一個定義好的物件，也可以是一個直接寫在花括號裡的物件，現場給你來了一個。

```ts
// 下面 ?: 指的是可选属性，换言之就是 age 可以不给
function createUser({ name, age = 18 }: { name: string; age?: number }) {
//                   ╰─────┬──────╯       ╰───────────┬────────────╯
//                    解构 + 默认值                  类型标注
}

createUser({ name: "Alice" });         // age 默认 18
createUser({ name: "Bob", age: 25 });  // age 是 25
```


除此之外，JavaScript 的語法糖 TypeScript 這邊也是完全繼承的。一個經典的方式就是物件屬性簡寫，具體程式碼可以看下面這些：

```ts
const adapter = new PrismaD1(db); // 1. 变量名叫 adapter
// 2. PrismaClient 要求配置对象里有个属性叫 adapter
// 3. 名字撞上了，可以简写
new PrismaClient({ adapter }); 
// 等同于：
new PrismaClient({ adapter: adapter });

// 如果这里的 adapter 不叫这个名字而是其他的话，它就会直接失效了
const myD1 = new PrismaD1(db); // 变量名叫 myD1，那就要显式指定
new PrismaClient({ adapter: myD1 }); 
// ❌ 错误写法：
// new PrismaClient({ myD1 }); 
// 这样写变成传了 { myD1: myD1 }，但 Prisma 不认识 myD1 这个属性，只认识 adapter。
```