Vue2 Vue-cli で Typescript を使用する設定の紹介

この記事では主に Vue2 Vue-cli で Typescript を使用するための設定を紹介します。必要な方は参考にしてください。Vue は 3 つの主要なフロントエンド フレームワークの 1 つです。 github では 44,873 個のスターを獲得しており、これは静かに主流になったことを示すのに十分です。以下の記事では、Vue2 Vue-cli で Typescript を使用するための設定に関する関連情報を主に紹介します。必要な方は参考にしてください。

前書き会社のチームが最近 vue フレームワークに熱心で、私は新しいプロジェクトで typescript を練習したいと思ったので、vue+ts の旅を始めました... この記事は次のような人を対象としています。私と同じ考えです。落とし穴に陥る時間を節約してください。これ以上は言いません。Vue2 Vue-cli で Typescript を使用するために必要な設定を見てみましょう。

1. 初期設定 まず、公式プラグイン vue-class-component、vue-property-decorator をインストールし、webpack を設定します。

エントリファイルを変更します

entry: {
 app: './src/main.ts'
}

解決部分:

extensions: ['.js', '.vue', '.json', '.ts', '.tsx']

ローダーを構成します

{
 test: /\.tsx?$/,
 loader: 'ts-loader',
 exclude: /node_modules/,
 options: {
  appendTsSuffixTo: [/\.vue$/],
 }
 }

tsconfig.jsonを構成する

{
 "include": [
 "src/**/*"
 ],
 "exclude": [
 "node_modules"
 ],
 "compilerOptions": {
 "allowSyntheticDefaultImports": true,
 "experimentalDecorators": true,
 "allowJs": true,
 "module": "es2015",
 "target": "es5",
 "moduleResolution": "node",
 "experimentalDecorators": true,
 "isolatedModules": true,
 "lib": [
  "dom",
  "es5",
  "es2015.promise"
 ],
 "sourceMap": true,
 "pretty": true
 }
}

2. 実戦！
構成のセットアップは最初のステップにすぎず、プロジェクトでの実行が重要です。

vueファイルのscriptタグにlang='ts'を追加します

lang='ts'

因为ts-loader不像配过loader的webpack一样知道vue,html等文件是什么东西，你跑起来后会报模块无法解析的错误，所以还需要配置.d.ts声明文件

vue的如下配置

declare module "*.vue" {
 import Vue from 'vue';
 export default Vue;
}

你也可以为其它的非js模块配置.d.ts文件如html（告诉ts-loader把html理解成字符串）

declare module "*.html" {
 let template: string;
 export default template;
}

配置好之后ts就能理解这些模块了

从vue-property-decorator引入需要用到的模块

（一般只用到Component, Vue, Watch, Prop这四个，其它3个没用到也没研究，知道的大佬可以解释下。）

import { Component, Vue, Watch } from 'vue-property-decorator'ts-loaderはローダー搭載のwebpackのようにvueやhtmlなどがどのようなファイルなのか分からないため、 run 起動後、モジュールを解析できないエラーが報告されるので、.d.ts宣言ファイルの設定も必要です

vueの以下の設定

class HoverTopElem {
 leaveTop: number = -200
 top: number = null
 height: number = null

 show(e) {
 this.top = e.target.getBoundingClientRect().top
 this.height = e.target.clientHeight
 }
 hidden() {
 this.top = this.leaveTop
 }
}

@Component({
 name: 'sidebar',
 template: template,
 components: {
 sidebarItem
 }
})
export default class Sidebar extends Vue {
 SidebarMenu: any = SidebarMenu
 hoverTopElem: HoverTopElem = new HoverTopElem()
 activeListItemName: string = null
 activeRouteItemRoute: string = null

 get _activeRouteItemRoute(): string {
 return this.$route.path
 }

 @Watch('_activeRouteItemRoute', { immediate: true })
 onRouteChanged(val: any) {
 this.activeRouteItemRoute = val
 }

 changeList(param) {
 this.activeListItemName = param
 }

 changeRoute(param) {
 this.activeRouteItemRoute = param
 }
}

.dの設定も可能です。 HTML などの他の非 JS モジュール用の ts ファイル (ts-loader に html を文字列として理解するように指示します)

設定後、ts はこれらのモジュールを理解できるようになります

以前に書いた sidbar コードの例です:

メタデータは、名前、コンポーネントなどの @Component 設定に書き込まれます。次に、以前に vue で使用されていた各インスタンス属性メソッドの使用方法について説明します。

data: これは、上記の SidebarMenu と同様に、最も一般的に使用されます (ここでは合計 4 つの変数が宣言されていることに注意してください)。ここに値を割り当てる必要があります。そうでない場合は null になり、未定義にすることはできません。そうしないと、データが応答しなくなります。したがって、HoverTopElem クラスのプロパティにも初期値が必要です。そうでない場合、これらのプロパティは応答しません。これは get 関数です。tsconfig.jsonp は "target": "es5" を構成していないため、エラーが発生します。ここで報告されています。Prop: vue- property-decorator に Prop モジュールがあります。このプロパティをメタデータで宣言してから、この変数をクラスで宣言することもできます。watch: vue- モジュールを宣言します。 property-decoratormethods : データと同様にクラス内に直接メソッドを記述可能(サイクルフックと同じ名前にしないように注意)

各種ライフサイクルフック: 直接記述するだけ
vueを参照ルーティングフック用の-class-componentドキュメント

この時点では、基本的には前と同じようにvueコンポーネントを書くことができます。 もちろん、以前のように ts を書きたい場合は、tslint も設定する必要があります。そうしないと、public 修飾子などの一部の ts 構文が認識されません。ts はあまり熟練していないため、それを設定することは考えていません。興味のある友達は試してみることができます。

Vue 背景画像のパッケージ化後のアクセス パスが正しくない問題を解決する方法

以上がVue2 Vue-cli で Typescript を使用する設定の紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。