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.

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

refactor(form): export interfaces used in createForm() #16894

Merged
merged 2 commits into from
Mar 16, 2023

Conversation

browsnet
Copy link
Contributor

// src/composables/form.ts
interface FormField {
}

interface FormValidationResult {
  valid: boolean
  errors: FieldValidationResult[]
}

export function createForm (props: FormProps) {
  const items = ref<FormField[]>([])
  const errors = ref<FieldValidationResult[]>([])
}

There is an anti-pattern in src/composables/form.ts, where a .d.ts file is generated. The internal ref field is typed with an interface but not exported. However, the external field is exported using typeof and includes the interface. This is problematic and would result in a TypeScript error, even if not using vue.js.

For example, if you create a new TypeScript project with "declaration": true in tsconfig, and have two files: one file exports a function that uses an interface not exported in that file, and another file imports that function. TypeScript will report an error during the compilation process.

180761678543229_ pic

TypeScript will report this error only when the following four conditions all met:

  1. The declaration flag is turned on to generate .d.ts files
  2. An interface is used in the file but not exported
  3. This interface is used as a type for a JavaScript variable and exported
  4. The exported variable is used with typeof to retrieve its type.

Why wasn't this anti-pattern code reported as an error by TypeScript before? This is related to the previous implementation of the Vue.js generic type UnwrapRef, which adopts the implementation method of constantly deconstructing types. When ref<T>() is called, it happens to generate a brand-new type alias for types like FormField and FieldValidationResult, and type alias will not trigger this issue, so it can just work properly.

But in fact, it's wrong, If the implementation of UnwrapRef is changed, this file will encounter typescript errors.

There are two ways to rectify it: one is to export the corresponding interface and the other is to change the interface to a type declaration. Considering that other files use interfaces extensively, I adopted the first rectification approach.

@KaelWD KaelWD added this to the v3.1.x milestone Mar 16, 2023
@KaelWD KaelWD self-assigned this Mar 16, 2023
@KaelWD KaelWD changed the title fix(types): Exported variables Should exported interfaces For re-exported variables type refactor(form): export interfaces used in createForm() Mar 16, 2023
@KaelWD KaelWD merged commit 9532d7e into vuetifyjs:master Mar 16, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants