|
| 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