概要
vue-cliの3.0がbetaですが利用できるようになりました。
cliでTypescriptのプロジェクトが作成できる便利さにさっそく作ってみたのですが、Veturに怒られたので対象法を書きます。
この現象の発生条件
-
vue-cli 3.0.0-beta(vue create でプロジェクト作成) - オプションで
TypeScriptを利用 -
Use class-style component syntax?にYと回答(class-styleでコンポーネントを書く) - Veturを拡張機能で利用している
発生すること
HelloWorld.vueでVeturのチェックでエラーが発生します。
HelloWorld.vue
export default class HelloWorld extends Vue {
// msg! の '!' がsyntax errorになります
@Prop() private msg!: string;
}
原因
TypeScript2.7.1で変数末尾に!をつけることで厳密化した
初期化チェックを割愛できるようになったのですが、Veturの
TypeScriptのバージョンが対応できてないことが原因です。
TypeScript2.7.1の変更点はこちらを参考にさせていただきました。
対処法
VeturのGithub Issueに上がっていたので対応方法を記載します。
簡単に言うと、インストールしたVeturのTypeScriptバージョンを上げようぜってことです。
コンソールで、VSCodeのExtensionのディレクトリを開きます。
.vscode\extensions\octref.vetur-0.11.7
yarn upgrade typescript@latest
cd ./server
yarn upgrade typescript@latest
これでVSCodeでのVeturのエラーが消えます。
ちなみに、本件のIssueは以下になります。