vue-tsc 3.3.0

v3.3.0

on Node.js NPM

Features

Refined Autocomplete for Component Props

Previously, we inferred props used for autocomplete from the component itself's type, which did not work well with components whose props need to be inferred dynamically, such as generics or discriminated unions.

Now, we have improved this feature to better align with TS behavior. See the following example:

<script lang="ts" setup>
  defineProps<
    | { type: "foo"; foo: string }
    | { type: "bar"; bar: string }
  >();
</script>

<template>
  <Self type="foo" :| />
  <!--              ^ [foo, ...] -->
  <Self type="bar" :| />
  <!--              ^ [bar, ...] -->
</template>

When triggering completions at the two positions above, we will now get the props that are actually available in each corresponding case.

(PR: #5709)

Check Required Fallthrough Attributes

Consider the following structure:

<!-- basic.vue -->
<script lang="ts" setup>
  defineProps<{
    foo: string;
    bar: string;
  }>();
</script>

<!-- comp.vue -->
<script lang="ts" setup>
  import Basic from "./basic.vue";
</script>

<template>
  <Basic />
</template>

When the fallthroughAttributes option is enabled on Comp, Comp inherits all props from Basic, allowing us to get prop completions for Basic when using Comp.

By default, however, the props inherited from Basic are all optional. This means we cannot enforce passing those required props when using Comp. At the same time, even if the required props from Basic are passed to Comp, Basic will still report missing prop errors.

After enabling the new checkRequiredFallthroughAttributes option on Comp, Comp will inherit Basic's props exactly as they are, and the missing prop errors on Basic inside Comp will disappear. This is because doing so is equivalent to promising that these required props should be passed when using Comp. Additionally, if some of the props required by Basic have already been passed directly to Basic, those props will be excluded from the inherited props.

(PR: #6049)

Bug Fixes

• In subprojects using project references, importing Vue files from another project will no longer trigger TS6307 errors (PR: #6048)
• When the js/ts.tsserver.experimental.enableProjectDiagnostics option is enabled, Vue files in large projects will no longer trigger diagnostics in an infinite loop (PR: #6051)

Changelog

Please refer to CHANGELOG.md for details.

❤️ Thanks to Our Sponsors

This project is made possible thanks to our generous sponsors:

Special Sponsor
Next Generation Tooling
Platinum Sponsors
An approachable, performant and versatile framework for building web user interfaces.			Stay in the flow with instant dev experiences. No more hours stashing/pulling/installing locally — just click, and start coding.
Gold Sponsors
Silver Sponsors

Become a sponsor to support Vue tooling development