VueシングルファイルコンポーネントでTypeScriptを使用する方法
序章
TypeScriptは、Microsoftによって作成されたJavaScriptスーパーセットであり、緩く型付けされた言語を厳密に型付けされた言語に変換します。 これは、オプションの型宣言を含むECMAScript6として要約できます。
Vue.jsの作成者であるEvanYouは、Vue.js3.0のコードベースは完全にTypeScriptで書き直されると述べています。
このチュートリアルでは、@vue/cli
を使用して、TypeScriptを使用して新しいVue.js 2.0アプリケーションを生成し、単一ファイルコンポーネント(SFC)を構築します。
前提条件
この記事をフォローするには、次のものが必要です。
- Node.jsはローカルにインストールされます。これは、Node.jsのインストール方法とローカル開発環境の作成に従って実行できます。
- Vue.jsプロジェクトのセットアップおよび単一ファイルコンポーネントにある程度精通している。
- TypeScriptの規則にある程度精通している。
このチュートリアルは、Node v15.1.0、npm
v6.14.8、Vue.js v2.6.11、TypeScript v3.9.3、および@vue/cli
v4.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.js
をmain.ts
に置き換えます。 shims-tsx.d.ts
、shims-vue.d.ts
も追加されます。
注:すでにVueプロジェクトを作成していて、それにTypeScriptサポートを追加したい場合は、次の方法で追加できます。
- vue add typescript
コマンドラインからVueプロジェクトを生成した後、shims-vue.d.ts
ファイルに気付いたかもしれません。 それが宣言ファイル(.d.ts
)です。
宣言ファイルは、実行可能コードを含まないが、プロジェクトファイルの外部に存在するコードの説明を含むファイルです。
これらは、TypeScriptインターフェース、タイプ、または宣言ファイルを含まないノードモジュールを使用する場合に役立ちます。 ある意味で、これらのファイルの唯一の目的は、TypeScriptに外部コードの処理方法を指示することです。
declare module '*.vue' {
import Vue from 'vue'
export default Vue
}
このコードエッセンシャルは、TypeScriptコンパイラ(およびIDE)に.vue
ファイルの処理方法を指示します。
TypeScriptを使用してVueプロジェクトを作成したら、tsconfig.json
を構成できます。
ステップ2—TypeScriptコンパイラの設定
チームまたはプロジェクトのニーズに合わせてTypeScriptを構成できます。 多くのオプションがあり、tsconfig.json
ファイルを使用して有効または無効にできます。 このファイルは、プロジェクトのルートディレクトリにある必要があります。
これらのオプションを自由に試して、あなたとあなたのプロジェクトに最も役立つものを見つけてください。
noImplicitAny
、noImplicitThis
、noImplicitReturns
は、ほとんどの状況で役立つ可能性が高いオプションです。
noImplicitAny
:暗黙のany
タイプの式と宣言でエラーが発生します。 引数const
、let
、またはvar
に型がない場合、これはエラーをスローします。 これは、コードのカスタムデータ型を作成するための自分自身のメンタルチェックです。noImplicitThis
:noImplicitAny
に似ていますが、this
キーワードでエラーがスローされます。 できる限りすべてを入力するように促すもう1つのメンタルチェック。noImplicitReturns
:関数内のすべてのコードパスが値を返すわけではない場合にエラーを報告します。 これは、戻り型を持つ特定の関数のすべての条件が値を返すことを保証するのに役立ちます。
次に例を示します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の基本的なタイプがサポートされています。
boolean
number
string
array
object
tuple
enum
any
void
undefined
null
never
使用する一般的なタイプは、プリミティブ型です。string
、number
、boolean
、null
、undefined
、およびvoid
。
ただし、カスタムデータ型を作成する必要がある場合があります。 そのような状況では、TypeScriptがInterface
と呼ぶものを作成できます。
ルートディレクトリにディレクトリを作成し、types
という名前を付けます。
- mkdir types
この新しいディレクトリ内に、index.ts
という名前の新しいファイルを作成します。 interface
キーワードを使用して、新しいインターフェイスを宣言できます。
export interface User {
}
注:命名規則にCamelCaseを使用することをお勧めします。
ここから、オブジェクトが持つプロパティと値型の定義を開始できます。
export interface User {
firstName: string,
lastName: string,
twitterHandle: string,
location: {
city: string,
state: string
}
}
この例では、オブジェクトが内部にあるインターフェース(location
)があります。 これは、インターフェイスをネストすることでさらに分割できます。
?
を追加して、任意のプロパティをオプションにすることもできます。 これは、このプロパティに値がある場合とない場合があることを意味します。
これらの変更で書き直された以前の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
インターフェイスを使用し、firstName
とlastName
を表示する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
キーワードを使用して、データをデータ型として宣言します。
const
、let
、var
、または関数の戻り型の場合は、コロン(:
)を使用して型を定義できます。
これらの変更を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エラーは発生しません。
アプリケーションをコンパイルします。
- npm run serve
結果をブラウザで開くときは、表示されるフルネームを確認する必要があります。
結論
TypeScriptはJavaScriptです。 TypeScriptを使用すると、必要に応じて厳密または寛大にすることができます。 プロジェクトの成長に合わせて、コードベースの一貫性とスケーラブルを維持するのに役立ちます。
TypeScriptは、さまざまな一般的なIDEおよびエディター(VS Code、WebStorm、Sublime、Vim、Atomなど)とも緊密に統合されています。 これらのエディターを使用すると、TypeScriptはバックグラウンドで動作し、舞台裏で関数の引数と戻り値の型のリアルタイムの手がかり、提案、プレビューを提供します。
全体として、これは、開発者が毎日使用するより多くのツール、ライブラリ、およびフレームワークへの道を見つけ続けている言語です。 強力なオープンソースコミュニティとMicrosoftの支援があります。
TypeScriptの詳細については、TypeScriptトピックページで演習とプログラミングプロジェクトを確認してください。