Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

wip: data typing issue #200

Closed
wants to merge 1 commit into from
Closed

wip: data typing issue #200

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion src/mount.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,7 +42,7 @@ type SlotDictionary = {

interface MountingOptions<Props, Data = {}> {
data?: () => {} extends Data
? never
? {}
: Data extends object
? Partial<Data>
: never
Expand Down
4 changes: 2 additions & 2 deletions src/vueShims.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
declare module '*.vue' {
// TODO: Figure out the typing for this
import Vue from 'vue'
export default any
const component: any
export default component
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

unrelated: Maybe we should use the same shim as the one provided by the CLI. It is not cast as any I know, but that would help catch errors that developers will encounter.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think Component is a better candidate, but needs testing

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

From what I can tell since the shim gives you no information about your component (eg props/data/whatever) the majority of the types we have are not very useful. in my experience the vast majority of people are using vue files.

I think we are focusing too heavily on "correct typing" and not enough on the actual DX. At least from my point of view, I would rather not have type safety than have random ts compile errors even doing the most basic of things (like using data).

I wonder if there is some way to ignore all the mounting types when the imported component is from a vue file? That would really be ideal, at least at this point, since you cannot get any useful information from an SFC right now.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

without a typescript plugin that will handle vue files, I doubt we can extract much information from a .vue file.

The shim only tells the typescript: "this file import is of this type" - without any process.

Copy link
Member Author

@lmiller1990 lmiller1990 Sep 10, 2020 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think we need to merge something (this or something better?) sooner rather that later... using data to set a component up for testing is basically the Hello World of VTU and it doesn't work out of the box atm. I do not want to ruin the hard work that has gone into typing VTU, though, with ts-ignore and any etc... 🤔

}
22 changes: 11 additions & 11 deletions test-dts/mount.d-test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,8 @@
import { expectError, expectType } from 'tsd'
import { defineComponent } from 'vue'
import { mount } from '../src'
// @ts-ignore
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is it necessary? TBH I don't like @ts-ignore even less in dts tests where we're supposed to check that everything works :) I'd like this to work without it.

import Hello from '../tests/components/Hello.vue'

const AppWithDefine = defineComponent({
props: {
Expand All @@ -20,17 +22,6 @@ expectType<string>(
}).vm.a
)

// no data provided
expectError(
mount(AppWithDefine, {
data() {
return {
myVal: 1
}
}
})
)

// can not receive extra props
expectError(
mount(AppWithDefine, {
Expand Down Expand Up @@ -153,3 +144,12 @@ mount(AppWithProps, {
}
}
})

// SFC with data option
mount(Hello, {
data() {
return {
foo: 'bar'
}
}
})