開発者ドキュメント

VueシングルファイルコンポーネントでTypeScriptを使用する方法

序章

TypeScriptは、Microsoftによって作成されたJavaScriptスーパーセットであり、緩く型付けされた言語を厳密に型付けされた言語に変換します。 これは、オプションの型宣言を含むECMAScript6として要約できます。

Vue.jsの作成者であるEvanYouは、Vue.js3.0のコードベースは完全にTypeScriptで書き直されると述べています。

このチュートリアルでは、@vue/cliを使用して、TypeScriptを使用して新しいVue.js 2.0アプリケーションを生成し、単一ファイルコンポーネント(SFC)を構築します。

前提条件

この記事をフォローするには、次のものが必要です。

このチュートリアルは、Node v15.1.0、npm v6.14.8、Vue.js v2.6.11、TypeScript v3.9.3、および@vue/cliv4.5.0で検証されました。

ステップ1—プロジェクトの設定

Vue CLI 3+を使用すると、TypeScriptがすでに構成されている新しいプロジェクトを生成できます。

vue create を使用すると、プロジェクト構成の入力を求められます。

このチュートリアルの目的のために、構成には以下が必要です。

? Please pick a preset: Manually select features

選択プロンプトで、TypeScriptを選択します。

? Check the features needed for your project: TypeScript

次のプロンプトに答えます。

? Choose a version of Vue.js that you want to start the project with 2.x
? Use class-style component syntax? No
? Use Babel alongside TypeScript (required for modern mode, auto-detected polyfi
lls, transpiling JSX)? Yes
? Where do you prefer placing config for Babel, ESLint, etc.? In dedicated config files
? Save this as a preset for future projects? No

注:新しいプロジェクトをブートストラップしている間、Use class-style component syntax?というプロンプトも表示されます。

2月に、 EvanVue3.0コアライブラリのクラススタイル構文を完全に放棄しました。

これは一般的な選択肢ですが、このチュートリアルでは、いいえを選択します。

クラススタイルのコンポーネントを使用したプロジェクトを検討する場合は、Vue.jsとTypeScriptを使用したクラスベースのコンポーネントの作成を参照してください。

「TypeScript」を選択すると、いくつかのことが行われます。 プロジェクトに@vue /cli-plugin-typescriptが自動的に追加されます。 main.jsmain.tsに置き換えます。 shims-tsx.d.tsshims-vue.d.tsも追加されます。

注:すでにVueプロジェクトを作成していて、それにTypeScriptサポートを追加したい場合は、次の方法で追加できます。

  1. vue add typescript

コマンドラインからVueプロジェクトを生成した後、shims-vue.d.tsファイルに気付いたかもしれません。 それが宣言ファイル(.d.ts)です。

宣言ファイルは、実行可能コードを含まないが、プロジェクトファイルの外部に存在するコードの説明を含むファイルです。

これらは、TypeScriptインターフェース、タイプ、または宣言ファイルを含まないノードモジュールを使用する場合に役立ちます。 ある意味で、これらのファイルの唯一の目的は、TypeScriptに外部コードの処理方法を指示することです。

shims.d.ts
declare module '*.vue' {
  import Vue from 'vue'
  export default Vue
}

このコードエッセンシャルは、TypeScriptコンパイラ(およびIDE)に.vueファイルの処理方法を指示します。

TypeScriptを使用してVueプロジェクトを作成したら、tsconfig.jsonを構成できます。

ステップ2—TypeScriptコンパイラの設定

チームまたはプロジェクトのニーズに合わせてTypeScriptを構成できます。 多くのオプションがあり、tsconfig.jsonファイルを使用して有効または無効にできます。 このファイルは、プロジェクトのルートディレクトリにある必要があります。

これらのオプションを自由に試して、あなたとあなたのプロジェクトに最も役立つものを見つけてください。

noImplicitAnynoImplicitThisnoImplicitReturnsは、ほとんどの状況で役立つ可能性が高いオプションです。

次に例を示しますtsconfig.json

tsconfig.json
{
  "compilerOptions": {
    "target": "es5",
    "module": "esnext",
    "strict": true,
    "noImplicitAny": true,
    "noImplicitThis": true,
    "noImplicitReturns": true,
    "jsx": "preserve",
    "importHelpers": true,
    "moduleResolution": "node",
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "sourceMap": true,
    "baseUrl": ".",
    "types": [
      "webpack-env"
    ],
    "paths": {
      "@/*": [
        "src/*"
      ]
    },
    "lib": [
      "esnext",
      "dom",
      "dom.iterable",
      "scripthost"
    ]
  },
  "include": [
    "src/**/*.ts",
    "src/**/*.tsx",
    "src/**/*.vue",
    "tests/**/*.ts",
    "tests/**/*.tsx"
  ],
  "exclude": [
    "node_modules"
  ]
}

tsconfig.jsonの詳細については、公式ドキュメントを参照してください。

ステップ3—基本データ型とカスタムデータ型を使用する

TypeScriptでは、12の基本的なタイプがサポートされています。

使用する一般的なタイプは、プリミティブ型です。stringnumberbooleannullundefined、およびvoid

ただし、カスタムデータ型を作成する必要がある場合があります。 そのような状況では、TypeScriptがInterfaceと呼ぶものを作成できます。

ルートディレクトリにディレクトリを作成し、typesという名前を付けます。

  1. mkdir types

この新しいディレクトリ内に、index.tsという名前の新しいファイルを作成します。 interfaceキーワードを使用して、新しいインターフェイスを宣言できます。

types / index.ts
export interface User {

}

注:命名規則にCamelCaseを使用することをお勧めします。

ここから、オブジェクトが持つプロパティと値型の定義を開始できます。

types / index.ts
export interface User {
  firstName: string,
  lastName: string,
  twitterHandle: string,
  location: {
    city: string,
    state: string
  }
}

この例では、オブジェクトが内部にあるインターフェース(location)があります。 これは、インターフェイスをネストすることでさらに分割できます。

?を追加して、任意のプロパティをオプションにすることもできます。 これは、このプロパティに値がある場合とない場合があることを意味します。

これらの変更で書き直された以前のindex.tsは次のとおりです。

types / index.ts
export interface User {
  firstName: string,
  lastName: string,
  twitterHandle?: string,
  location: Location
}

export interface Location {
  city: string,
  state: string
}

このカスタムデータ型は、任意の単一ファイルVueコンポーネント(.vue)またはTypeScript(.ts)ファイルで使用できるようになりました。

ステップ4—単一ファイルVueコンポーネント(SFC)でのカスタムデータ型の使用

Userインターフェイスを使用し、firstNamelastNameを表示するApp.vueの例を次に示します。

src / App.vue
<template>
  <p>{{ fullName }}</p>
</template>

<script lang="ts">
  export default {
    name: 'Home',
    data() {
      return {
        user: {}
      }
    },
    computed: {
      fullName() {
        return `${this.user.firstName} ${this.user.lastName}`
      }
    },
    mounted() {
      this.user = {
        firstName: `Sammy`,
        lastName: `Shark`,
        twitterHandle: `@digitalocean`,
        location: {
          city: `New York City`,
          state: `NY`
        }
      }
    }
  }
</script>

このコンポーネントでTypeScriptを使用するには、コンポーネントのscriptタグにlang属性を追加する必要があります。 その属性の値はtsである必要があります。

単一ファイルのVueコンポーネントでTypeScriptを使用する場合は、Vueライブラリをインポートして、そこから拡張できるようにする必要があります。

クラススタイルの構文は使用しないため、asキーワードを使用して、データをデータ型として宣言します。

constletvar、または関数の戻り型の場合は、コロン(:)を使用して型を定義できます。

これらの変更をApp.vueに適用すると、次のようになります。

src / App.vue
<template>
  <p>{{ fullName }}</p>
</template>

<script lang="ts">
  import { User } from '../types'

  export default Vue.extend({
    name: 'Home',
    data() {
      return {
        user: {} as User
      }
    },
    computed: {
      fullName(): string {
        return `${this.user.firstName} ${this.user.lastName}`
      }
    },
    mounted(): void {
      this.user = {
        firstName: `Sammy`,
        lastName: `Shark`,
        twitterHandle: `@digitalocean`,
        location: {
          city: `New York City`,
          state: `NY`
        }
      }
    }
  })
</script>

このコードは、Userインターフェイスをインポートし、リアクティブdataをタイプUserとして宣言します。

computedプロパティはstringを返すため、stringタイプが定義されます。 mountedフックは何も返さないため、voidタイプが定義されています。 これらの定義が整っていれば、コンパイル時にTypeScriptエラーは発生しません。

アプリケーションをコンパイルします。

  1. npm run serve

結果をブラウザで開くときは、表示されるフルネームを確認する必要があります。

結論

TypeScriptはJavaScriptです。 TypeScriptを使用すると、必要に応じて厳密または寛大にすることができます。 プロジェクトの成長に合わせて、コードベースの一貫性とスケーラブルを維持するのに役立ちます。

TypeScriptは、さまざまな一般的なIDEおよびエディター(VS Code、WebStorm、Sublime、Vim、Atomなど)とも緊密に統合されています。 これらのエディターを使用すると、TypeScriptはバックグラウンドで動作し、舞台裏で関数の引数と戻り値の型のリアルタイムの手がかり、提案、プレビューを提供します。

全体として、これは、開発者が毎日使用するより多くのツール、ライブラリ、およびフレームワークへの道を見つけ続けている言語です。 強力なオープンソースコミュニティとMicrosoftの支援があります。

TypeScriptの詳細については、TypeScriptトピックページで演習とプログラミングプロジェクトを確認してください。

モバイルバージョンを終了