Vue3+TS+Vite開発スキル：開発効率を高めるTypeScriptの使い方-Vue.js-php.cn

Vue3+TS+Vite開発スキル：開発効率を高めるTypeScriptの使い方

PHPz

リリース： 2023-09-08 09:16:45

オリジナル

627 人が閲覧しました

Vue3+TS+Vite開発スキル：開発効率を高めるTypeScriptの使い方

Vue3 TS Vite 開発スキル: TypeScript を使用して開発効率を高める方法

はじめに:
Vue は人気のある JavaScript フレームワークであり、Vue3 のリリースにより、多くの新機能と改善がもたらされます。 TypeScript は、開発中に優れたツールサポートとタイプセーフを提供する、強く型付けされた JavaScript のスーパーセットです。 Vite は、強力な開発サーバーとホットアップデート機能を提供する高速ビルドツールです。この記事では、Vue3 を TypeScript および Vite と組み合わせて使用し、開発効率を向上させるいくつかのテクニックを検討します。

1. Vue3 TS Vite プロジェクトを構成する
Vue3 TS Vite プロジェクトを開始するには、まず Vue CLI をインストールする必要があります:

npm install -g @vue/cli

ログイン後にコピー

次に、コマンドで新しい Vue プロジェクトを作成します行:

vue create my-project

ログイン後にコピー

[機能を手動で選択する] を選択して追加する機能を手動で選択し、[TypeScript] を選択します。

完了後、次のコマンドを使用してプロジェクトディレクトリに入り、開発サーバーを起動できます:

cd my-project
npm run serve

ログイン後にコピー

2. TypeScript を使用した型推論
Vue3 では、TypeScript を使用して次のことを行うことができます。優れた型チェックと型推論をさらに提供します。 Props、data、computed などのプロパティのタイプを宣言することで、開発中のコードの堅牢性を確保できます。

たとえば、Vue コンポーネントでは、次の方法で Props のタイプを定義できます:

import { defineComponent, PropType } from 'vue';

interface MyComponentProps {
  name: string;
  age: number;
}

export default defineComponent({
  props: {
    name: {
      type: String as PropType<MyComponentProps['name']>,
      required: true
    },
    age: {
      type: Number as PropType<MyComponentProps['age']>,
      default: 18
    }
  },
  setup(props) {
    // ...
  }
});

ログイン後にコピー

この例では、インターフェイス MyComponentProps を使用して定義します。 Props のタイプ。Props では PropType を使用してタイプを指定します。こうすることで、コンポーネントを使用するときに正しい Props を渡し、コンポーネントを使用するときに正しい型ヒントを取得できるようになります。

同様に、データ、計算属性、メソッド、その他の属性で TypeScript の型推論を使用して、コードの可読性と保守性を向上させることもできます。

3. TypeScript デコレーターの使用
TypeScript は、Vue3 開発でいくつかの高度な機能をより便利に使用できるようにするいくつかのデコレーターを提供します。

@ComponentDecorator
Vue2 では、Vue.extend を使用して Vue コンポーネントクラスを作成する必要があります。 Vue3 では、defineComponent 関数を使用して Vue コンポーネントを定義できます。

コードをわかりやすくするために、defineComponent 関数の代わりに @Component デコレータを使用できます:

import { Component, Vue } from 'vue-class-component';

@Component
export default class MyComponent extends Vue {
  // ...
}

ログイン後にコピー

@PropDecorator
Vue コンポーネントでは、@Prop デコレータを使用して Props プロパティを宣言し、その型を指定できます:

import { Component, Prop, Vue } from 'vue-class-component';

@Component
export default class MyComponent extends Vue {
  @Prop({ type: String, required: true })
  name!: string;
}

ログイン後にコピー

このようにして、コンポーネント内で this.name を直接使用して Props プロパティにアクセスし、正しい型のヒントとチェックを取得できます。

4. Vue3 の複合 API を使用する
Vue3 によって導入された複合 API を使用すると、コードロジックをより適切に整理して再利用できるようになります。 Comboposition API は、TypeScript を使用する場合に、より優れた型推論とチェックを提供します。

ref() 関数と reactive() 関数を使用する
Vue3 では、ref() 関数を使用できますデータの変更を追跡するためのリアクティブ変数を作成します。 reactive() 関数を使用すると、通常のオブジェクトを応答性の高いオブジェクトに変換できます。

import { ref, reactive, onMounted } from 'vue';

export default defineComponent({
  setup() {
    const count = ref(0);
    const data = reactive({
      name: 'Alice',
      age: 18
    });

    onMounted(() => {
      count.value++; // ref需要通过value属性访问
    });

    return {
      count,
      data
    };
  }
});

ログイン後にコピー

この例では、ref() 関数を使用して応答カウント変数を作成し、value 属性値を通じてそれにアクセスします。同時に、reactive() 関数を使用して、data オブジェクトをレスポンシブオブジェクトに変換しました。

カスタムフックの使用
Composition API では、データ転送に provide 関数と inject 関数を使用できます。 TypeScript を使用する場合、ジェネリックスを組み合わせて型チェックを強化できます。

import { InjectionKey, provide, inject } from 'vue';

interface MyContext {
  name: string;
  age: number;
}

const myKey: InjectionKey<MyContext> = Symbol();

export function provideMyContext(context: MyContext) {
  provide(myKey, context);
}

export function useMyContext(): MyContext {
  const context = inject(myKey);

  if (!context) {
    throw new Error('Cannot find MyContext');
  }

  return context;
}

ログイン後にコピー

この例では、provide 関数と inject 関数を使用して、MyContext オブジェクトを提供および取得します。ジェネリック MyContext を通じて、送受信される型の一貫性を確保できます。

結論:
この記事では、型推論、デコレータ、Composition API など、TypeScript を使用して Vue3 Vite の開発効率を高めるためのいくつかのテクニックを紹介します。これらのテクニックを適切に使用することで、コードをより堅牢で読みやすくし、開発効率を向上させることができます。これらのヒントが Vue3 TS Vite プロジェクトでの開発作業に役立つことを願っています。

以上がVue3+TS+Vite開発スキル：開発効率を高めるTypeScriptの使い方の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。