Vue.js×TypeScriptのpropsで型定義していないデータが渡された場合、エディタ上でエラーが発生するようにしたい

Question

実現したいこと

Vue.jsのpropsで型定義したもの以外のデータが渡された場合、エディタ上でエラーが発生するようにしたい

状況

以下のコードのようにpropsの型をenumのような形で定義し、外から定義以外のものを渡した際、エディタ上でエラーや警告が発生しませんでした。
type ButtonColor = 'primary' | 'info' | 'success' | 'warning' | 'danger' | 'simple'

今回はわかりやすく、
:color="'succsssesssss'"とあからさまに誤った値を渡して検証しております。

なお使用エディタはVSCode+Plugin(Vetur)です。

該当のソースコード

【Button.vue】

<template>
  <md-button :class="`md-${color}`">
    <slot />
  </md-button>
</template>

<script lang="ts">
import Vue, { PropType } from 'vue'

type ButtonColor = 'primary' | 'info' | 'success' | 'warning' | 'danger' | 'simple'

export default Vue.extend({
  name: 'Button',
  props: {
    color: {
      type: String as PropType<ButtonColor>, ←定義された型を使用
      default: null,
    },
  },
})
</script>

【Sample.vue】

<template>
  <div>
    <Button :color="'succsssesssss'" /> ←ここでエディタ上で警告が出ない
  </div>
</template>

<script lang="ts">
import Button from './Button.vue'
import Vue from 'vue'

export default Vue.extend({
  name: 'Sample',
  components: { Button },
})
</script>

試したこと

propsの型定義の書き方を変更

『type: String as PropType<ButtonColor>という書き方がそもそも違うのか・・？』と考え、以下のように書き方を変えてみましたが、結果は変わりませんでした。

【Button.vue】

<template>
  <md-button :class="`md-${color}`">
    <slot />
  </md-button>
</template>

<script lang="ts">
import Vue, { PropType } from 'vue'

type ButtonColor = 'primary' | 'info' | 'success' | 'warning' | 'danger' | 'simple'

export default Vue.extend({
  name: 'Button',
  props: {
    color: {
      type: String as () => ButtonColor, ←ここの書き方を変更
      default: null,
    },
  },
})
</script>

この他にも、

  type: String as PropType<'primary' | 'info' | 'success' | 'warning' | 'danger' | 'simple'>,

このような書き方でも結果は変わりませんでした。

ご教示いただきたいこと

外から定義外のpropsを渡した際のエディタ上での警告の出し方

書き方が誤っているか、Reactだとこの場合エラーが出ることを確認したので、言語仕様の問題か、判断がついておりません。
お手数をおかけし大変恐縮ですが、何卒宜しくお願い申し上げます。

Answer 1

お使いのエディターが分かりませんが、VSCode+Plugin(Vetur)と想定してコメントします。

https://vuejs.github.io/vetur/guide/linting-error.html#linting

Linting TypeScript
TSLint is not available yet.

とのこと。私もこの機能を待っております。

Comments

[im05ttbbh]

おっしゃるとおり、エディタはVSCode+Plugin(Vetur)です。質問時に記載が抜けており申し訳ございませんでした。

現状この機能はサポートされていないということですね。お忙しい中、ご回答をいただき誠にありがとうございました。