How to use isolatedDeclarations with defineComponent in typescript

[Mister-Hope]

When I am trying to speed up with oxc, I need to enable isolatedDeclarations for dts generation.

However, I do not see any possibility to write a detailed type by hand. Is there anyway to "declare these components" gracefully?

[gitboyzcf]

下面是在启用 isolatedDeclarations 的前提下，优雅生成 d.ts 的常用做法与注意点（以 Vue + TS 为例），尽量不手写冗长类型：

---

✅ 核心思路

isolatedDeclarations 要求每个文件都能独立产出声明，因此禁止依赖“类型推断链过长/跨文件推断/复杂条件类型展开”。解决方案是：

1. 显式导出类型
2. 把推断结果“固定住”
3. 避免运行时值推断出复杂类型

---

✅ 推荐做法 1：显式导出 Props/Emits 类型

export interface FadeInExpandTransitionProps {
  group?: boolean
  appear?: boolean
  width?: boolean
  mode?: 'default' | 'in-out' | 'out-in'
  onLeave?: () => void
  onAfterLeave?: () => void
  onAfterEnter?: () => void
}

然后：

export default defineComponent({
  props: {
    // ...使用 PropType 显式标注
  } as PropType<FadeInExpandTransitionProps>,
})

好处：
d.ts 能稳定生成，且 IDE 友好。

---

✅ 推荐做法 2：satisfies 固定推断结果（TS 4.9+）

const props = {
  group: Boolean,
  appear: Boolean,
  width: Boolean,
  mode: String as PropType<'default' | 'in-out' | 'out-in'>,
  onLeave: Function,
  onAfterLeave: Function,
  onAfterEnter: Function,
} satisfies ComponentPropsOptions<FadeInExpandTransitionProps>

好处：
既保留推断，又能避免“类型漂移”。

---

✅ 推荐做法 3：defineProps<T>() + 显式导出

在 <script setup> 中：

export interface Props {
  group?: boolean
  appear?: boolean
  width?: boolean
  mode?: 'default' | 'in-out' | 'out-in'
}

const props = defineProps<Props>()

---

✅ 推荐做法 4：拆分类型文件

在 types.ts 中导出：

export interface FadeInExpandTransitionProps { ... }

组件里导入使用。
**好处：**声明文件生成稳定，避免复杂推断链。

---

⚠ 常见问题与规避

问题	规避
通过 PropType<typeof something> 推断链很长	改用显式 interface
条件类型 + infer 组合	拆成明确类型别名
导出 default defineComponent 直接推断	用 const X = defineComponent(...); export type Props = ...; export default X

---

✅ 结论（给你一个最实用的答案）

想“优雅声明组件”，而不是手写长类型：

✅ 把 props/emits 类型显式抽到 interface
✅ 用 satisfies 或 defineProps<T>() 固定推断
✅ 让每个文件声明可独立生成

[Mister-Hope]

Could you please NOT replying bullshits from AI?

isolatedDeclarations requires implicitly declaring all exports type, which is NOT equals to prop type annotation and nothing F**king related to IDE

[aniruddhaadak80]

Hello @Mister-Hope,

Working with Vue reactivity system and compilers can sometimes present interesting edge cases. A few quick things to consider regarding this topic:

1. Reactivity & Refs: Remember that reactive() unwraps refs automatically, but accessing private properties of proxy classes inherently breaks proxy traps. Always interact with the standard exposed endpoints.
2. Component Lifecycle & state: If you are mixing <script setup>, ensure you aren???t trying to mutate props directly or losing reactivity when destructuring (use toRefs if needed).

I highly recommend checking out the Vue DevTools extension to inspect the component tree and verify if the state is updating as expected. Let me know if you want to dig deeper into the specific component logic.

Hope this points you in the right direction! Let me know how it goes. Happy coding!