Cómo escribir componentes basados ​​en clases con Vue.js y TypeScript

Introducción

Vue.js 2 admite componentes de estilo de clase. Si tiene experiencia en Angular (2+), probablemente esté familiarizado con el patrón de escritura de componentes como clases utilizando propiedades y decoradores para describir partes más complejas de su componente.

La mayor ventaja que tienen los componentes de estilo de clase sobre los componentes estándar de Vue.js es que dejan más claro a dónde apunta realmente esto en el componente compilado y permiten un código más conciso.

En este artículo, aprenderá a usar vue-class-componenty vue-property-decoratoradmitir TypeScript en componentes basados ​​en clases de Vue.js.

Prerrequisitos

Para seguir este artículo necesitarás:

• Node.js instalado localmente, lo cual puedes hacer siguiendo Cómo instalar Node.js y crear un entorno de desarrollo local .
• Algunos conocimientos sobre la configuración de un proyecto Vue.js y componentes de archivo único .
• Cierta familiaridad con las convenciones de TypeScript .

Este tutorial fue verificado con Node v15.1.0, npmv6.14.8, Vue.js v2.6.11, TypeScript v3.9.3, @vue/cliv4.5.0, vue-class-componentv7.2.3 y vue-property-decoratorv8.4.2.

Paso 1: Configuración del proyecto

Necesitarás vue-class-componentinstalarlo vue-property-decorator.

Puedes usar @vue/clipara crear un nuevo proyecto Vue.js:

npx @vue/cli create vue-typescript-example

Para los fines de este tutorial, la configuración requerirá:

@vue/-plugin-typescriptinstalará typescript, vue-class-component, y vue-property-decorator.

Luego, navegue hasta el directorio del proyecto:

cd vue-typescript-example

En este punto, tienes un proyecto Vue.js configurado para TypeScript y componentes de estilo de clase.

Paso 2: escribir un componente de un solo archivo con TypeScript

Un componente de clase es un TypeScript classque contiene extendsel Vueobjeto. En los componentes de un solo archivo, asegúrese de configurar el scriptlenguaje tsy exportar la clase como default.

Ábralo App.vueen su editor de código y cree este componente de archivo único de ejemplo con TypeScript:

origen/App.vue

template  div    labelUpdate myDataProperty      input :value="myDataProperty" @input="updateMyProperty($event)"/    /label    div{{ myDataProperty }}/div  /div/templatescript lang="ts"import { Component, Vue } from 'vue-property-decorator'@Componentexport default class App extends Vue {  // Data property  myDataProperty: string = 'Data Property'  // Component method  updateMyProperty ($event: { target: { value: string } }) {    this.myDataProperty = $event.target.value  }}/script

Tenga en cuenta que las propiedades de los datos se definen directamente en la clase y los métodos.

El @Component(componentConfig)decorador es lo que hace que esto sea posible. Transforma la clase en un formato que Vue.js pueda entender durante el proceso de compilación.

En este punto, si compilara y observara su aplicación en un navegador, se le presentaría un campo de entrada y la palabra Data Property. Al interactuar con el campo de entrada, myDataPropertyse actualizará y reflejará los cambios que se realicen.

Paso 3: Uso de accesorios de componentes

Mediante el uso del @Prop(config)decorador from vue-property-decorator, puedes declarar propiedades de entrada de la misma manera que las propiedades de datos.

A continuación se muestra un ejemplo en TypeScript que toma una examplePropertypropiedad de componente con el valor predeterminado de 'Input Property':

origen/App.vue

template  div{{ exampleProperty }}/div/templatescriptimport { Component, Prop, Vue } from 'vue-property-decorator'@Componentexport default class App extends Vue {  @Prop({ default: 'Input Property' })  exampleProperty!: string}/script

En JavaScript, esto es equivalente a:

export default {  props: {    exampleProperty: {      type: String,      default: 'Input Property'    }  }}

En este punto, si compilaras y observaras tu aplicación en un navegador, se te presentaría el mensaje: Input Property.

Paso 4: Uso de propiedades calculadas

Las propiedades calculadas se escriben como gettersy settersen la clase.

A continuación se muestra un ejemplo en TypeScript que getsa myComputedPropy devuelve un número aleatorio:

origen/App.vue

template  div{{ myComputedProp }}/div/templatescriptimport { Component, Vue } from 'vue-property-decorator'@Componentexport default class App extends Vue {  get myComputedProp() {    return Math.random()  }}/script

En JavaScript, esto es equivalente a:

export default {  computed: {    myComputedProp() {      return Math.random()    }  }}

En este punto, si compilaras y observaras tu aplicación en un navegador, se te presentaría un número aleatorio.

Paso 5: Uso de observadores

Se pueden crear observadores con el @Watch(propertyString, config)decorador.

Aquí hay un ejemplo en TypeScript que observa cuándo myWatchedPropertyse activa onPropertyChanged:

origen/App.vue

template  div    labelUpdate myWatchedProperty      input :value="myWatchedProperty" @input="updateMyProperty($event)"/    /label    div{{ myWatchedPropertyStatus }}/div  /div/templatescriptimport { Component, Watch, Vue } from 'vue-property-decorator'@Componentexport default class App extends Vue {  myWatchedProperty: string = 'Watched Property'  myWatchedPropertyStatus: string = ''  @Watch('myWatchedProperty')  onPropertyChanged(value: string, oldValue: string) {    this.myWatchedPropertyStatus = 'Watched Property Changed'  }  updateMyProperty ($event: { target: { value: string } }) {    this.myWatchedProperty = $event.target.value  }}/script

En JavaScript, esto es equivalente a:

export default {  data() {    return {      myWatchedProperty: null    }  }  methods: {    onPropertyChanged(value, oldValue) {      // ...    }  }  watch: {    myWatchedProperty: {      handler: 'onPropertyChanged',      immediate: false,      deep: true    }  }}

En este punto, si compilara y observara su aplicación en un navegador, se le presentaría un campo de entrada. Si cambia el valor de entrada, se mostrará el mensaje Watched Property Changed.

Conclusión

En este artículo, aprendió cómo usar vue-class-componenty vue-property-decoratorsoportar TypeScript en componentes basados ​​en clases de Vue.js.

En este artículo se presentaron @Component, get, y set. Para obtener una lista completa de las declaraciones disponibles en vue-class-component, consulte la documentación oficial .

En este artículo también se presentaron @Prop, y @Watch. Para obtener una lista completa de los decoradores disponibles en vue-property-decorator, consulte la documentación oficial .

Si desea obtener más información sobre TypeScript, consulte nuestra página de temas de TypeScript para obtener ejercicios y proyectos de programación.