Skip to content

Commit 8a91c88

Browse files
rudyxu1102rudyxu1102
committed
chore: improve code
1 parent 7f17e61 commit 8a91c88

File tree

7 files changed

+156
-149
lines changed

7 files changed

+156
-149
lines changed

Diff for: ‎packages/dts-test/defineComponent.test-d.tsx

+59-59
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ import {
1414
Slots,
1515
VNode
1616
} from 'vue'
17-
import { describe, expectType, IsUnion } from './utils'
17+
import { describe, expectType, IsUnion, test } from './utils'
1818

1919
describe('with object props', () => {
2020
interface ExpectedProps {
@@ -1195,18 +1195,16 @@ describe('define attrs', () => {
11951195
bar: number
11961196
baz?: string
11971197
}
1198-
const MyComp = defineComponent(
1199-
{
1200-
props: {
1201-
foo: String
1202-
},
1203-
attrs: Object as AttrsType<CompAttrs>,
1204-
created() {
1205-
expectType<CompAttrs['bar']>(this.$attrs.bar)
1206-
expectType<CompAttrs['baz']>(this.$attrs.baz)
1207-
}
1198+
const MyComp = defineComponent({
1199+
props: {
1200+
foo: String
1201+
},
1202+
attrs: Object as AttrsType<CompAttrs>,
1203+
created() {
1204+
expectType<CompAttrs['bar']>(this.$attrs.bar)
1205+
expectType<CompAttrs['baz']>(this.$attrs.baz)
12081206
}
1209-
)
1207+
})
12101208
expectType<JSX.Element>(<MyComp foo="1" bar={1} />)
12111209
})
12121210

@@ -1215,16 +1213,14 @@ describe('define attrs', () => {
12151213
bar: number
12161214
baz?: string
12171215
}
1218-
const MyComp = defineComponent(
1219-
{
1220-
props: ['foo'],
1221-
attrs: Object as AttrsType<CompAttrs>,
1222-
created() {
1223-
expectType<CompAttrs['bar']>(this.$attrs.bar)
1224-
expectType<CompAttrs['baz']>(this.$attrs.baz)
1225-
}
1216+
const MyComp = defineComponent({
1217+
props: ['foo'],
1218+
attrs: Object as AttrsType<CompAttrs>,
1219+
created() {
1220+
expectType<CompAttrs['bar']>(this.$attrs.bar)
1221+
expectType<CompAttrs['baz']>(this.$attrs.baz)
12261222
}
1227-
)
1223+
})
12281224
expectType<JSX.Element>(<MyComp foo="1" bar={1} />)
12291225
})
12301226

@@ -1233,15 +1229,13 @@ describe('define attrs', () => {
12331229
bar: number
12341230
baz?: string
12351231
}
1236-
const MyComp = defineComponent(
1237-
{
1238-
attrs: Object as AttrsType<CompAttrs>,
1239-
created() {
1240-
expectType<CompAttrs['bar']>(this.$attrs.bar)
1241-
expectType<CompAttrs['baz']>(this.$attrs.baz)
1242-
}
1232+
const MyComp = defineComponent({
1233+
attrs: Object as AttrsType<CompAttrs>,
1234+
created() {
1235+
expectType<CompAttrs['bar']>(this.$attrs.bar)
1236+
expectType<CompAttrs['baz']>(this.$attrs.baz)
12431237
}
1244-
)
1238+
})
12451239
expectType<JSX.Element>(<MyComp bar={1} />)
12461240
})
12471241

@@ -1250,24 +1244,20 @@ describe('define attrs', () => {
12501244
bar: number
12511245
baz?: string
12521246
}
1253-
const MyComp = defineComponent(
1254-
{
1255-
props: {
1256-
foo: {
1257-
type: String,
1258-
required: true
1259-
}
1260-
},
1261-
setup(props, { attrs }) {
1262-
expectType<string>(props.foo)
1263-
expectType<number>(attrs.bar)
1264-
expectType<string | undefined>(attrs.baz)
1247+
const MyComp = defineComponent({
1248+
props: {
1249+
foo: {
1250+
type: String,
1251+
required: true
12651252
}
12661253
},
1267-
{
1268-
attrs: {} as CompAttrs
1254+
attrs: Object as AttrsType<CompAttrs>,
1255+
setup(props, { attrs }) {
1256+
expectType<string>(props.foo)
1257+
expectType<number>(attrs.bar)
1258+
expectType<string | undefined>(attrs.baz)
12691259
}
1270-
)
1260+
})
12711261
expectType<JSX.Element>(<MyComp foo="1" bar={1} />)
12721262
})
12731263

@@ -1283,11 +1273,10 @@ describe('define attrs', () => {
12831273
expectType<CompAttrs['baz']>(ctx.attrs.baz)
12841274
return () => (
12851275
// return a render function (both JSX and h() works)
1286-
<div>
1287-
{props.foo}
1288-
</div>
1276+
<div>{props.foo}</div>
12891277
)
1290-
}, {
1278+
},
1279+
{
12911280
attrs: Object as AttrsType<CompAttrs>
12921281
}
12931282
)
@@ -1298,20 +1287,31 @@ describe('define attrs', () => {
12981287
type CompAttrs = {
12991288
foo: number
13001289
}
1301-
const MyComp = defineComponent(
1302-
{
1303-
props: {
1304-
foo: String
1305-
},
1306-
attrs: Object as AttrsType<CompAttrs>,
1307-
created() {
1308-
// @ts-expect-error
1309-
console.log(this.$attrs.foo)
1310-
}
1290+
const MyComp = defineComponent({
1291+
props: {
1292+
foo: String
1293+
},
1294+
attrs: Object as AttrsType<CompAttrs>,
1295+
created() {
1296+
// @ts-expect-error
1297+
console.log(this.$attrs.foo)
13111298
}
1312-
)
1299+
})
13131300
expectType<JSX.Element>(<MyComp foo="1" />)
13141301
})
1302+
1303+
test('define attrs w/ no attrs', () => {
1304+
const MyComp = defineComponent({
1305+
props: {
1306+
foo: String
1307+
},
1308+
created() {
1309+
expectType<unknown>(this.$attrs.bar)
1310+
}
1311+
})
1312+
// @ts-expect-error
1313+
expectType<JSX.Element>(<MyComp foo="1" bar={1} />)
1314+
})
13151315
})
13161316

13171317
// #5948

Diff for: ‎packages/dts-test/defineCustomElement.test-d.ts

+35-52
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,5 @@
1-
import {
2-
defineCustomElement,
3-
expectType,
4-
expectError,
5-
SetupContext
6-
} from './index'
1+
import { defineCustomElement, AttrsType } from 'vue'
2+
import { describe, expectType, test } from './utils'
73

84
describe('inject', () => {
95
// with object inject
@@ -73,57 +69,45 @@ describe('define attrs', () => {
7369
bar: number
7470
baz?: string
7571
}
76-
defineCustomElement(
77-
{
78-
props: {
79-
foo: String
80-
},
81-
created() {
82-
expectType<number>(this.$attrs.bar)
83-
expectType<string | undefined>(this.$attrs.baz)
84-
}
72+
defineCustomElement({
73+
props: {
74+
foo: String
8575
},
86-
{
87-
attrs: {} as CompAttrs
76+
attrs: Object as AttrsType<CompAttrs>,
77+
created() {
78+
expectType<number>(this.$attrs.bar)
79+
expectType<string | undefined>(this.$attrs.baz)
8880
}
89-
)
81+
})
9082
})
9183

9284
test('define attrs w/ array props', () => {
9385
type CompAttrs = {
9486
bar: number
9587
baz?: string
9688
}
97-
defineCustomElement(
98-
{
99-
props: ['foo'],
100-
created() {
101-
expectType<number>(this.$attrs.bar)
102-
expectType<string | undefined>(this.$attrs.baz)
103-
}
104-
},
105-
{
106-
attrs: {} as CompAttrs
89+
defineCustomElement({
90+
props: ['foo'],
91+
attrs: Object as AttrsType<CompAttrs>,
92+
created() {
93+
expectType<number>(this.$attrs.bar)
94+
expectType<string | undefined>(this.$attrs.baz)
10795
}
108-
)
96+
})
10997
})
11098

11199
test('define attrs w/ no props', () => {
112100
type CompAttrs = {
113101
bar: number
114102
baz?: string
115103
}
116-
defineCustomElement(
117-
{
118-
created() {
119-
expectType<number>(this.$attrs.bar)
120-
expectType<string | undefined>(this.$attrs.baz)
121-
}
122-
},
123-
{
124-
attrs: {} as CompAttrs
104+
defineCustomElement({
105+
attrs: Object as AttrsType<CompAttrs>,
106+
created() {
107+
expectType<number>(this.$attrs.bar)
108+
expectType<string | undefined>(this.$attrs.baz)
125109
}
126-
)
110+
})
127111
})
128112

129113
test('define attrs w/ function component', () => {
@@ -132,10 +116,13 @@ describe('define attrs', () => {
132116
baz?: string
133117
}
134118
defineCustomElement(
135-
(_props: { foo: string }, ctx: SetupContext<{}, CompAttrs>) => {
119+
(_props: { foo: string }, ctx) => {
136120
expectType<number>(ctx.attrs.bar)
137121
expectType<number>(ctx.attrs.bar)
138122
expectType<string | undefined>(ctx.attrs.baz)
123+
},
124+
{
125+
attrs: Object as AttrsType<CompAttrs>
139126
}
140127
)
141128
})
@@ -144,19 +131,15 @@ describe('define attrs', () => {
144131
type CompAttrs = {
145132
foo: number
146133
}
147-
defineCustomElement(
148-
{
149-
props: {
150-
foo: String
151-
},
152-
created() {
153-
// @ts-expect-error
154-
console.log(this.$attrs.foo)
155-
}
134+
defineCustomElement({
135+
props: {
136+
foo: String
156137
},
157-
{
158-
attrs: {} as CompAttrs
138+
attrs: Object as AttrsType<CompAttrs>,
139+
created() {
140+
// @ts-expect-error
141+
console.log(this.$attrs.foo)
159142
}
160-
)
143+
})
161144
})
162145
})

Diff for: ‎packages/runtime-core/src/apiDefineComponent.ts

+12-7
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,8 @@ import {
1515
import {
1616
SetupContext,
1717
AllowedComponentProps,
18-
ComponentCustomProps
18+
ComponentCustomProps,
19+
Data
1920
} from './component'
2021
import {
2122
ExtractPropTypes,
@@ -28,7 +29,8 @@ import { extend, isFunction } from '@vue/shared'
2829
import { VNodeProps } from './vnode'
2930
import {
3031
CreateComponentPublicInstance,
31-
ComponentPublicInstanceConstructor
32+
ComponentPublicInstanceConstructor,
33+
IsSameType
3234
} from './componentPublicInstance'
3335
import { SlotsType } from './componentSlots'
3436

@@ -57,7 +59,7 @@ export type DefineComponent<
5759
Props = ResolveProps<PropsOrPropOptions, E>,
5860
Defaults = ExtractDefaultPropTypes<PropsOrPropOptions>,
5961
S extends SlotsType = {},
60-
Attrs extends AttrsType = {},
62+
Attrs extends AttrsType = {}
6163
> = ComponentPublicInstanceConstructor<
6264
CreateComponentPublicInstance<
6365
Props,
@@ -107,7 +109,10 @@ export function defineComponent<
107109
E extends EmitsOptions = {},
108110
EE extends string = string,
109111
S extends SlotsType = {},
110-
Attrs extends AttrsType = {}
112+
Attrs extends AttrsType = {},
113+
PropsAttrs = IsSameType<Data, UnwrapAttrsType<Attrs>> extends true
114+
? {}
115+
: UnwrapAttrsType<Attrs>
111116
>(
112117
setup: (
113118
props: Props,
@@ -116,10 +121,10 @@ export function defineComponent<
116121
options?: Pick<ComponentOptions, 'name' | 'inheritAttrs'> & {
117122
props?: (keyof Props)[]
118123
emits?: E | EE[]
119-
slots?: S,
124+
slots?: S
120125
attrs?: Attrs
121126
}
122-
): (props: Props & EmitsToProps<E> & UnwrapAttrsType<Attrs>) => any
127+
): (props: Props & EmitsToProps<E> & PropsAttrs) => any
123128
export function defineComponent<
124129
Props extends Record<string, any>,
125130
E extends EmitsOptions = {},
@@ -153,7 +158,7 @@ export function defineComponent<
153158
S extends SlotsType = {},
154159
Attrs extends AttrsType = {},
155160
I extends ComponentInjectOptions = {},
156-
II extends string = string,
161+
II extends string = string
157162
>(
158163
comp: ComponentOptionsWithoutProps<
159164
Props,

Diff for: ‎packages/runtime-core/src/componentOptions.ts

+1-3
Original file line numberDiff line numberDiff line change
@@ -428,9 +428,7 @@ export type UnwrapAttrsType<
428428
? Data
429429
: Readonly<
430430
Prettify<{
431-
[K in keyof T]: NonNullable<T[K]> extends (...args: any[]) => any
432-
? T[K]
433-
: T[K]
431+
[K in keyof T]: T[K]
434432
}>
435433
>
436434

0 commit comments

Comments
 (0)