vuejs / core

🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
https://vuejs.org/
MIT License
47.93k stars 8.36k forks source link

Script Setup: Using an Interface which extends another seems to be ignoring base interface properties #4989

Closed ThaDaVos closed 3 years ago

ThaDaVos commented 3 years ago

Version

3.2.22

Reproduction link

sfc.vuejs.org/

Steps to reproduce

Sorry, I was not able to create a reproduction with typescript... so it's blank...

The following seems to fail when using inside the script setup

interface Test {
  helloWorld: string;
}

interface Props extends Test {}

defineProps<Props>

Now, when this is done inside a SFC - the prop helloWorld won't be required... it's even so, if you supply it, it won't even use it as prop as it stays an attribute for some reason - so, base properties seem to be ignored... why?

My use-case:

<template>
  <div>
    <video-js ref="videoPlayer">
      <source
        v-for="(source, index) in sources"
        :key="index"
        :src="source.source"
        :type="source.type"
      />
    </video-js>
  </div>
</template>

<script lang="ts" setup>
import videojs, { VideoJsPlayer, VideoJsPlayerOptions, VideoJsPlayerPluginOptions } from 'video.js';
import videoJsNL from 'video.js/dist/lang/nl.json';
import 'video.js/dist/video-js.css';
import { pickBy } from 'lodash';
import {
  toRefs, ref, onMounted, onBeforeUnmount, computed,
} from 'vue';
import { VideoSource } from '&/types';

interface Props extends Omit<VideoJsPlayerOptions, 'sources' | 'src'> {
  sources: VideoSource[];
}));

onMounted(() => {
  videojs.addLanguage('nl', videoJsNL);

  player.value = videojs(
    videoPlayer.value,
    pickBy(
      options.value,
    ),
  );
});

onBeforeUnmount(() => {
  player.value?.dispose();
});
</script>

What is expected?

That the properties defined in the base interface are used too

What is actually happening?

The properties in the base interface seem to be ignored


Again... sorry for not being able to supply a reproduction example as:

  1. I don't know how the SFC Playground works
  2. I don't know how to convert it to Typescript fully
  3. Didn't really have enough time to look into it during worktimes (the moment I created the issue)
posva commented 3 years ago

Duplicate of https://github.com/vuejs/vue-next/issues/4294

ThaDaVos commented 3 years ago

Ah, it didn't look to be a duplicate as it was about importing the type from an external file - while I am defining the interface inside the same file and extending a type from a external file

adamcjm commented 2 years ago

I defined an external interface and declare props's type with extends, then the props gone. I can't get right props value.