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

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

Closed
ThaDaVos opened this issue Nov 24, 2021 · 3 comments

Comments

@ThaDaVos
Copy link

ThaDaVos commented Nov 24, 2021

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
Copy link
Member

posva commented Nov 24, 2021

Duplicate of #4294

@posva posva marked this as a duplicate of #4294 Nov 24, 2021
@posva posva closed this as completed Nov 24, 2021
@ThaDaVos
Copy link
Author

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
Copy link

adamcjm commented May 12, 2022

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

@github-actions github-actions bot locked and limited conversation to collaborators Sep 27, 2023
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants