---
title: "TS解构赋值"
date: "2026-02"
category: "TS"
tags: ["TS"]
description: "解构赋值一般是对某个对象进行使用的。简单来说，就是将其中的属性拆分出来，然后将其赋值给局部变量。这个在函数中，有时会写成一个不是很好读的形式，但也是使用比较多的，这里要记录一下..."
source: "https://enriquemark.com/zh-hans/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。
```