TypeScript z Options API ​

Ta strona zakłada, że przeczytałeś już Używanie Vue z TypeScript.

Typowanie propsów komponentu ​

Wnioskowanie typów dla propsów w Options API wymaga owinięcia komponentu w defineComponent(). Dzięki temu Vue jest w stanie wywnioskować typy dla propsów na podstawie opcji props, biorąc pod uwagę dodatkowe opcje takie jak required: true i default:

import { defineComponent } from 'vue'  export default defineComponent({  // wnioskowanie typów włączone  props: {  name: String,  id: [Number, String],  msg: { type: String, required: true },  metadata: null  },  mounted() {  this.name // typ: string | undefined  this.id // typ: number | string | undefined  this.msg // typ: string  this.metadata // typ: any  } })

Jednakże opcje props wykonywane w czasie działania wspierają jedynie użycie funkcji konstruktora jako typ propa - nie ma możliwości określenia złożonych typów, takich jak obiekty z zagnieżdżonymi właściwościami lub sygnaturami wywołania funkcji.

Aby opisać złożone typy propsów, możemy użyć typu pomocniczego PropType:

import { defineComponent } from 'vue' import type { PropType } from 'vue'  interface Book {  title: string  author: string  year: number }  export default defineComponent({  props: {  book: {  // podaj bardziej szczegółowy typ dla `Object`  type: Object as PropType<Book>,  required: true  },  // można również opisać funkcje  callback: Function as PropType<(id: number) => void>  },  mounted() {  this.book.title // string  this.book.year // number   // Błąd TS: argument typu 'string' nie jest  // przypisywalny do parametru typu 'number'  this.callback?.('123')  } })

Zastrzeżenia ​

Jeśli używasz wersji TypeScript niższej niż 4.7, musisz zachować ostrożność używając wartości funkcji dla opcji propów validator i default - upewnij się, że używasz funkcji strzałkowych:

import { defineComponent } from 'vue' import type { PropType } from 'vue'  interface Book {  title: string  year?: number }  export default defineComponent({  props: {  bookA: {  type: Object as PropType<Book>,  // Upewnij się, że używasz funkcji strzałkowych jeśli Twoja wersja TypeScript jest niższa niż 4.7  default: () => ({  title: 'Wyrażenie Funkcji Strzałkowej'  }),  validator: (book: Book) => !!book.title  }  } })

Zapobiega to konieczności wnioskowania przez TypeScript typu this wewnątrz tych funkcji, co niestety może powodować niepowodzenie wnioskowania typów. Było to wcześniejsze ograniczenie projektowe, które zostało ulepszone w TypeScript 4.7.

Typowanie emitów komponentu ​

Możemy zadeklarować oczekiwany typ payload'u dla emitowanego zdarzenia używając składni obiektowej opcji emits. Dodatkowo, wszystkie niezadeklarowane emitowane zdarzenia będą powodować błąd typu podczas wywoływania:

import { defineComponent } from 'vue'  export default defineComponent({  emits: {  addBook(payload: { bookName: string }) {  // wykonaj walidację w czasie wykonania  return payload.bookName.length > 0  }  },  methods: {  onSubmit() {  this.$emit('addBook', {  bookName: 123 // Błąd typu!  })   this.$emit('non-declared-event') // Błąd typu!  }  } })

Typowanie właściwości obliczanych ​

Właściwość obliczana wywnioskuje swój typ na podstawie zwracanej wartości:

import { defineComponent } from 'vue'  export default defineComponent({  data() {  return {  message: 'Witaj!'  }  },  computed: {  greeting() {  return this.message + '!'  }  },  mounted() {  this.greeting // typ: string  } })

W niektórych przypadkach możesz chcieć jawnie opisać typ właściwości obliczanej, aby upewnić się, że jej implementacja jest poprawna:

import { defineComponent } from 'vue'  export default defineComponent({  data() {  return {  message: 'Witaj!'  }  },  computed: {  // jawnie opisz typ zwracany  greeting(): string {  return this.message + '!'  },   // opisywanie zapisywalnej właściwości obliczanej  greetingUppercased: {  get(): string {  return this.greeting.toUpperCase()  },  set(newValue: string) {  this.message = newValue.toUpperCase()  }  }  } })

Jawne adnotacje mogą być również wymagane w niektórych skrajnych przypadkach, gdy TypeScript nie może wywnioskować typu właściwości obliczanej z powodu cyklicznych pętli wnioskowania.

Typowanie Obsługi Zdarzeń ​

Podczas pracy z natywnymi zdarzeniami DOM, może być przydatne poprawne typowanie argumentu, który przekazujemy do funkcji obsługującej. Przyjrzyjmy się temu przykładowi:

<script lang="ts"> import { defineComponent } from 'vue'  export default defineComponent({  methods: {  handleChange(event) {  // `event` niejawnie ma typ `any`  console.log(event.target.value)  }  } }) </script>  <template>  <input type="text" @change="handleChange" /> </template>

Bez adnotacji typu, argument event będzie miał niejawnie typ any. Spowoduje to błąd TS jeśli "strict": true lub "noImplicitAny": true są używane w tsconfig.json. Dlatego zaleca się jawne oznaczenie argumentu handlera zdarzeń. Dodatkowo może być konieczne użycie asercji typu podczas uzyskiwania dostępu do właściwości event:

import { defineComponent } from 'vue'  export default defineComponent({  methods: {  handleChange(event: Event) {  console.log((event.target as HTMLInputElement).value)  }  } })

Rozszerzanie Właściwości Globalnych ​

Niektóre wtyczki instalują globalnie dostępne właściwości dla wszystkich instancji komponentów poprzez app.config.globalProperties. Na przykład, możemy zainstalować this.$http do pobierania danych lub this.$translate do internacjonalizacji. Aby działało to poprawnie z TypeScript, Vue udostępnia interfejs ComponentCustomProperties zaprojektowany do rozszerzania poprzez rozszerzanie modułów TypeScript:

import axios from 'axios'  declare module 'vue' {  interface ComponentCustomProperties {  $http: typeof axios  $translate: (key: string) => string  } }

Zobacz także:

• Testy jednostkowe TypeScript dla rozszerzeń typów komponentów

Umiejscowienie Rozszerzenia Typów ​

Możemy umieścić to rozszerzenie typów w pliku .ts lub w ogólnoprojektowym pliku *.d.ts. W obu przypadkach upewnij się, że jest ono uwzględnione w tsconfig.json. Dla autorów bibliotek/wtyczek, ten plik powinien być określony we właściwości types w package.json.

Aby skorzystać z rozszerzenia modułu, musisz upewnić się, że rozszerzenie jest umieszczone w module TypeScript. Oznacza to, że plik musi zawierać co najmniej jeden import lub export na najwyższym poziomie, nawet jeśli jest to tylko export {}. Jeśli rozszerzenie zostanie umieszczone poza modułem, nadpisze oryginalne typy zamiast je rozszerzać!

// Nie działa, nadpisuje oryginalne typy. declare module 'vue' {  interface ComponentCustomProperties {  $translate: (key: string) => string  } }

// Działa poprawnie export {}  declare module 'vue' {  interface ComponentCustomProperties {  $translate: (key: string) => string  } }

Rozszerzanie Opcji Niestandardowych ​

Niektóre wtyczki, na przykład vue-router, zapewniają wsparcie dla niestandardowych opcji komponentów, takich jak beforeRouteEnter:

import { defineComponent } from 'vue'  export default defineComponent({  beforeRouteEnter(to, from, next) {  // ...  } })

Bez odpowiedniego rozszerzenia typów, argumenty tego hooka będą miały niejawnie typ any. Możemy rozszerzyć interfejs ComponentCustomOptions, aby obsługiwał te niestandardowe opcje:

import { Route } from 'vue-router'  declare module 'vue' {  interface ComponentCustomOptions {  beforeRouteEnter?(to: Route, from: Route, next: () => void): void  } }

Teraz opcja beforeRouteEnter będzie miała właściwe typy. Zauważ, że to tylko przykład - dobrze typowane biblioteki jak vue-router powinny automatycznie wykonywać te rozszerzenia w swoich własnych definicjach typów.

Umiejscowienie tego rozszerzenia podlega tym samym ograniczeniom co rozszerzenia właściwości globalnych.

Zobacz także:

• Testy jednostkowe TypeScript dla rozszerzeń typów komponentów