Cómo utilizar TypeScript con componentes de archivo único de Vue

Introducción

TypeScript es un superconjunto de JavaScript creado por Microsoft que convierte un lenguaje de tipado flexible en uno de tipado estricto. Se puede resumir como ECMAScript 6 con declaraciones de tipos opcionales.

Evan You, el creador de Vue.js, ha declarado que el código base de Vue.js 3.0 se reescribirá completamente en TypeScript .

En este tutorial, utilizarás @vue/cliTypeScript para generar una nueva aplicación Vue.js 2.0 y crear un componente de archivo único (SFC).

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 y @vue/cliv4.5.0.

Paso 1: Configuración del proyecto

Con Vue CLI 3+, es posible generar un nuevo proyecto con TypeScript ya configurado.

Al utilizar vue create, se le solicitarán las configuraciones del proyecto:

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

? Please pick a preset: Manually select features

En el mensaje de selección, elija TypeScript:

? Check the features needed for your project: TypeScript

Responda las siguientes indicaciones:

? 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 polyfills, 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

Nota: Al iniciar un nuevo proyecto, también se le solicitará lo siguiente: Use class-style component syntax?.

En febrero, Evan You abandonó por completo la sintaxis de estilo de clase para la biblioteca principal de Vue 3.0.

Es una opción popular, pero para los propósitos de este tutorial, seleccioneNo.

Si desea explorar un proyecto con componentes de estilo de clase, consulte Cómo escribir componentes basados ​​en clases con Vue.js y TypeScript .

Si seleccionas “TypeScript”, se harán varias cosas. Se agregará automáticamente @vue/cli-plugin-typescripta tu proyecto. Reemplazará main.jspor main.ts. También agregará shims-tsx.d.ts, y shims-vue.d.ts.

Nota: Si ya tiene un proyecto Vue creado y desea agregarle compatibilidad con TypeScript, puede hacerlo con lo siguiente:

vue add typescript

Después de generar su proyecto Vue desde la línea de comandos, es posible que haya notado el shims-vue.d.tsarchivo . Ese es el archivo de declaración ( .d.ts).

Un archivo de declaración es un archivo que no contiene ningún código ejecutable, pero contiene descripciones de código que existe fuera de los archivos del proyecto.

Son útiles cuando se utilizan módulos de Node que no contienen interfaces, tipos ni archivos de declaración de TypeScript. En cierto sentido, el único propósito de estos archivos es indicarle a TypeScript cómo manejar el código externo.

cuñas.d.ts

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

Este código esencialmente le dice al compilador de TypeScript (y al IDE) cómo manejar .vuelos archivos.

Una vez que tenga un proyecto Vue con TypeScript, puede configurar tsconfig.json.

Paso 2: Configuración del compilador TypeScript

Puedes configurar TypeScript según las necesidades de tu equipo o proyecto. Hay muchas opciones que puedes habilitar o deshabilitar mediante el uso de un tsconfig.jsonarchivo. Este archivo debe estar en el directorio raíz de tu proyecto.

Siéntase libre de experimentar con estas opciones para encontrar cuál es la más útil para usted y su proyecto.

noImplicitAny, noImplicitThis, noImplicitReturnsson opciones que probablemente serán beneficiosas para la mayoría de las situaciones:

• noImplicitAny: Genera un error en expresiones y declaraciones con un tipo implícito any. Esto generará un error si un argumento, const, leto varno tiene un tipo. Esto es más bien una comprobación mental para crear tipos de datos personalizados para tu código.
• noImplicitThis:Similar a noImplicitAny, pero arrojará un error con la thispalabra clave. Otra comprobación mental para animarte a escribir todo lo que puedas.
• noImplicitReturns: Informar un error cuando no todas las rutas de código en la función devuelvan un valor. Esto ayuda a garantizar que todas las condiciones en una función dada con un tipo de retorno devuelvan un valor.

He aquí un ejemplo 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"  ]}

Más información tsconfig.jsonestá disponible en la documentación oficial .

Paso 3: Uso de tipos de datos básicos y personalizados

En TypeScript, se admiten 12 tipos básicos:

• boolean
• number
• string
• array
• object
• tuple
• enum
• any
• void
• undefined
• null
• never

Los tipos más comunes que utilizará son los tipos primitivos: string, number, boolean, null, undefinedy void.

Sin embargo, habrá ocasiones en las que necesitarás crear un tipo de datos personalizado. Para esas situaciones, puedes crear algo que TypeScript llame Interface.

En su directorio raíz, cree un directorio y nómbrelo types:

mkdir types

Dentro de este nuevo directorio, crea un nuevo archivo llamado . index.tsPuedes declarar una nueva interfaz con la interfacepalabra clave:

tipos/índice.ts

export interface User {}

Nota: Se considera una buena práctica utilizar CamelCase para las convenciones de nomenclatura.

Desde aquí podrás empezar a definir las propiedades y tipos de valores que tendrá el objeto.

tipos/índice.ts

export interface User {  firstName: string,  lastName: string,  twitterHandle: string,  location: {    city: string,    state: string  }}

En este ejemplo, tienes una interfaz con un objeto dentro de ella ( location). Esto se puede dividir aún más anidando interfaces.

También puedes hacer que cualquier propiedad sea opcional añadiéndole un ?. Esto significa que esta propiedad puede tener o no un valor.

A continuación se muestran las versiones anteriores index.tsreescritas con esos cambios:

tipos/índice.ts

export interface User {  firstName: string,  lastName: string,  twitterHandle?: string,  location: Location}export interface Location {  city: string,  state: string}

Ahora puede utilizar este tipo de datos personalizado en cualquier componente Vue de archivo único ( .vue) o archivo TypeScript ( .ts).

Paso 4: Uso de tipos de datos personalizados en componentes Vue de archivo único (SFC)

A continuación se muestra un ejemplo App.vueque utiliza la Userinterfaz y muestra el firstName y lastName:

origen/App.vue

template  p{{ fullName }}/p/templatescript  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

Para utilizar TypeScript en este componente, deberá agregar un langatributo a la scriptetiqueta de su componente. El valor de ese atributo debe ser ts.

Al usar TypeScript en componentes Vue de un solo archivo, se debe importar la biblioteca Vue para poder extender desde ella.

Dado que no utilizará la sintaxis de estilo de clase, utilice la aspalabra clave para declarar los datos como un tipo de datos.

Para cosas como const, let, var, o un tipo de retorno de función, puede definir su tipo con dos puntos ( :).

Después de aplicar estos cambios a App.vue, ahora se parece a:

origen/App.vue

template  p{{ fullName }}/p/templatescript  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

Este código importa la Userinterfaz y declara reactivo datacomo tipo User.

La computedpropiedad devuelve un string, por lo que stringse define un tipo. El mountedgancho no devuelve nada, por lo que voidse define un tipo. Con estas definiciones en su lugar, no habrá errores de TypeScript al compilar.

Compilar la aplicación:

npm run serve

Al abrir el resultado en un navegador, debería observar el nombre completo que se muestra.

Conclusión

TypeScript es JavaScript. Con TypeScript, puedes ser tan estricto o tan indulgente como quieras. Esto ayuda a mantener la coherencia y la escalabilidad de tu base de código a medida que tu proyecto sigue creciendo.

TypeScript también está muy integrado con varios IDE y editores populares (incluidos VS Code, WebStorm, Sublime, Vim, Atom y más). Con estos editores, TypeScript trabaja en segundo plano, detrás de escena, para brindar pistas, sugerencias y vistas previas en tiempo real de los argumentos de las funciones y los tipos de retorno.

En general, es un lenguaje que sigue encontrando su lugar en más herramientas, bibliotecas y marcos que los desarrolladores usan todos los días. Tiene una sólida comunidad de código abierto y el respaldo de Microsoft.

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.