Skip to content

Commit 085f62b

Browse files
author
rudyxu
committed
docs: infer attrs rfc
1 parent cdee004 commit 085f62b

File tree

1 file changed

+79
-0
lines changed

1 file changed

+79
-0
lines changed

active-rfcs/0000-infer-attrs.md

+79
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,79 @@
1+
- Start Date: 2023-01-01
2+
- Target Major Version: 3.x
3+
- Reference Issues: [vuejs/core#3452](https://github.com/vuejs/core/issues/3452), [vuejs/core#5423](https://github.com/vuejs/core/issues/5423),
4+
- Implementation PR: [vuejs/core#]()
5+
6+
# Summary
7+
8+
Allow to infer `attrs` when passing type on the second param of`defineComponent`. And In the `setup-script`, passing generic type on the `useAttrs<T>` make `attrs` inferred.
9+
10+
I already publish an npm package named [vue-ts-utils](https://github.com/rudy-xhd/vue-ts-utils), so that you can use `defineComponent` to infer attrs in advance.
11+
12+
# Basic example
13+
14+
## Using `defineComponent` directly
15+
[TS Playground](https://www.typescriptlang.org/play?jsx=1#code/JYWwDg9gTgLgBAbzgEwKYDNgDtUGELgQ5bwC+c6UBcA5AG4CuqAtDAM7MMzAA2bNAWABQwgMZE28fODgBeFBmx4CkYjAAUCYXDhgqYNgC5E2nRQgRjAZRhRsAcwA0p0s6E6oqLGijqAlIikwq6IcACGMLZGgeFsoQBGYVDGWAwg8ahQcOSkfsJiEvDiMvIAPNJg5hCyCDQAjDTkiVA1deQA9AB8wkA)
16+
```tsx
17+
const Comp = defineComponent({
18+
props: {
19+
foo: String
20+
}
21+
}, { attrs: {} as { bar: number } })
22+
23+
const comp = <Comp foo={'1'} bar={1} />
24+
```
25+
26+
## Using `useAttrs<T>` in `script-setup`
27+
28+
```vue
29+
<script setup lang="ts">
30+
const attrs = useAttrs<{bar: number}>()
31+
</script>
32+
```
33+
34+
<details>
35+
<summary>Compiled Output</summary>
36+
37+
```js
38+
export default /*#__PURE__*/_defineComponent({
39+
setup(__props, { expose }) {
40+
expose();
41+
42+
const attrs = useAttrs<{ foo: number }>()
43+
44+
return { attrs, useAttrs, ref }
45+
}
46+
47+
}, { attrs: {} as { foo: number }})"
48+
```
49+
50+
</details>
51+
52+
# Motivation
53+
This proposal is mainly to infer `attrs` using `defineComponent`.
54+
55+
When using typescript in Vue3, the fallthrough attributes is unable to be used. It's not appropriate obviously that only one can be chosen from `typescript` and `the fallthrough attributes`. In most cases, we choose `typescript` and set attributes to `props` options instead of using the fallthrough attributes.
56+
57+
58+
# Detailed design
59+
60+
## `defineComponent`
61+
Due to typescript limitation from [microsoft/TypeScript#10571](https://github.com/microsoft/TypeScript/issues/10571), it's not possable to allow skipping generics in the `defineComponent` like below.
62+
```tsx
63+
// it's not work
64+
const Comp = defineComponent<Props, Attrs>({})
65+
```
66+
So I propose to pass `attrs` type to the second params of `defineComponent`.
67+
68+
The following blow is the design details.
69+
- `attrs` is inferred to `{ class: unknown; style: unknown }` when the value of the second param is `undefined`
70+
- `attrs` is lower priority than `props`.
71+
72+
73+
## `useAttrs`
74+
In the `setup-script`, the generic type of `useAttrs` will compile to the second param of `defineComponent`
75+
76+
77+
# Unresolved questions
78+
Naming suggestions or improvements on the API are welcome.
79+

0 commit comments

Comments
 (0)