Presentación para charla del JSDayCAN2018 sobre cómo integrar Typescript en un proyecto Vue, utilizando la api basada en clases y extendiendo Vue.

1. Vue + Typescript:
Decorators vs Extend, Fight!
Integrando Typescript en tus proyectos de Vue

2. Sara Lissette Luis Ibáñez
@LissetteIbnz

3. ¿Por qué usar Typescript?

4. EcmaScript
Nuestro código es
escalable y evoluciona de
forma automática
Tipado
Adición de tipos
estáticos a Javascript
Clases
Similar a ES6 pero con
azúcar sintáctico de serie
que nos dará más poder
Interfaces
Código que nos ayudará
a modelar nuestras APIs
Genéricos
Nos permite utilizar
clases con distintos tipos
Intellisense
Información de los
objetos y librerías que
utilizamos

5. Resumiendo…
Más fácil de mantener Tipado estático opcionalMenos testeo
“Hagas lo que hagas con Typescript, al final será
Javascript compilado entendible por tu navegador”

6. Cómo integrar Typescript

7. ● Mediante el uso de Vue CLI
$ npm install -g @vue/cli
$ vue create name-project
Proyecto nuevo
Inicia Vue CLI
https://cli.vuejs.org/

8. Elige un preset
Proyecto nuevo
Inicia Vue CLI
https://cli.vuejs.org/
? Please pick a preset:
default (babel, eslint)
> Manually select features

9. ? Check the features needed for your project:
( * ) Babel
( * ) Typescript
( ) Progressive Web App (PWA) Support
( ) Router
( ) Vuex
( ) CSS Pre-processor
( * ) Linter / Formatter
( ) Unit Testing
( ) E2E Testing
Escoge las características
Elige un preset
Proyecto nuevo
Inicia Vue CLI
https://cli.vuejs.org/

10. Escoge las características
Elige un preset
Proyecto nuevo
Inicia Vue CLI
? Use class-style component syntax? Yes
? Use Babel alongisde Typescript for auto-detected
polyfills? Yes
? Pick a linter / formatter config: TSLint
? Pick additional lint features: Lint on save
? Where do you prefer placing config for Babel,
PostCSS, ESLint, etc.? In dedicated files
? Save this as a preset for future projects? No
Resto de configuración
https://cli.vuejs.org/

11. Proyecto iniciado
Si el proyecto fue construido con
Vue CLI utilizaremos el comando:
vue add @vue/typescript

12. Proyecto iniciado
Si el proyecto fue construido con
Vue CLI utilizaremos el comando:
vue add @vue/typescript
Esta acción realiza cambios en los
siguientes archivos:
- Punto de entrada a la aplicación

13. Proyecto iniciado
Si el proyecto fue construido con
Vue CLI utilizaremos el comando:
vue add @vue/typescript
Esta acción realiza cambios en los
siguientes archivos:
- Punto de entrada a la aplicación
- Agrega un tsconfig.json
{
"compilerOptions": {
"target": "esnext",
"module": "esnext",
"strict": true,
"jsx": "preserve",
"importHelpers": true,
"moduleResolution": "node",
"experimentalDecorators": true,
· · ·

14. Proyecto iniciado
Si el proyecto fue construido con
Vue CLI utilizaremos el comando:
vue add @vue/typescript
Esta acción realiza cambios en los
siguientes archivos:
- Punto de entrada a la aplicación
- Agrega un tsconfig.json
{
"compilerOptions": {
"target": "esnext",
"module": "esnext",
"strict": true,
"jsx": "preserve",
"importHelpers": true,
"moduleResolution": "node",
"experimentalDecorators": true,
· · ·
"noImplicitThis": true,
"noImplicitAny": true,

15. Proyecto iniciado
Si el proyecto fue construido con
Vue CLI utilizaremos el comando:
vue add @vue/typescript
Esta acción realiza cambios en los
siguientes archivos:
- Punto de entrada a la aplicación
- Agrega un tsconfig.json
- Declaración de módulos para .vue
declare module '*.vue' {
import Vue from 'vue';
export default Vue;
}

16. Proyecto iniciado
Si el proyecto fue construido con
Vue CLI utilizaremos el comando:
vue add @vue/typescript
Esta acción realiza cambios en los
siguientes archivos:
- Punto de entrada a la aplicación
- Agrega un tsconfig.json
- Declaración de módulos para .vue
- Cambios en App.vue, archivos js, …

17. Agregamos los siguientes paquetes al
proyecto:
typescript
ts-loader
vue-class-component [o]
vue-property-decorator [o]
npm install –D typescript ts-loader
Instalamos paquetes
Proyecto iniciado

18. Creamos un tsconfig.json
Instalamos paquetes
Proyecto iniciado
{
"compilerOptions": {
"lib": ["dom", "es5", "es2015"],
"target": "es5",
"module": "es2015",
"moduleResolution": "node",
"sourceMap": true,
"allowSyntheticDefaultImports": true,
"noImplicitThis": true,
"noImplicitAny": true,
"experimentalDecorators": true }
}

19. Configuración webpack
Creamos un tsconfig.json
Instalamos paquetes
Proyecto iniciado
· · ·
entry: {
app: './src/main.ts',
},
· · ·
resolve: {
extensions: ['.ts', '.js', '.vue'],
· · ·

20. Configuración webpack
Creamos un tsconfig.json
Instalamos paquetes
Proyecto iniciado
module: {
rules: [
· · ·
{
test: /.ts$/,
loader: 'ts-loader’,
options: {
appendTsSuffixTo: [/.vue$/]
},
},
· · ·

21. Configuración webpack
Creamos un tsconfig.json
Instalamos paquetes
Declaración de módulos
Proyecto iniciado
declare module '*.vue’ {
import Vue from 'vue’;
export default Vue;
}

22. <script lang="ts">
import HelloWorld from
'./components/HelloWorld.vue';
export default Vue.extend({
name: 'App’,
components: { HelloWorld }
});
</script>
Configuración webpack
Creamos un tsconfig.json
Instalamos paquetes
Declaración de módulos
Actualizar componentes
Proyecto iniciado

23. Definiendo componentes

24. Vue.extend

25. Vue.extend
Ventajas:
● Es la forma estándar de Vue
● Código más organizado
● Compatible con Vetur (autocompletado en los template)
Contras:
● Declaración de $refs
● Props con tipos complejos

26. +
Vue.extend
● Cuerpo del componente
● Props
● Propiedades del data
● Propiedades computadas
● Ciclos de vida
● Métodos
export default Vue.extend({
props: {
msg: String,
},
data() {
return {
users: [] as MemberEntity[],
};
},
computed: {
counter(): number {
return this.users.length;
},
},
mounted() {
console.log('Extend mounted’);
},
methods: {
selectUser(id: number): void {
console.log(id);
},
},
})

27. Live demo

28. Decorators o Class-Style

29. Decorators
Ventajas:
● Te permite definir tus componentes utilizando una API basada en clases
● Soporte oficial mediante el paquete vue-class-component
● Es preferible utilizar vue-property-decorator (Component, Prop, Mixins, …)

30. Desventajas:
● No es compatible con Vetur
● Libertad total a la hora de declarar tu componente (más difícil de mantener)
● Poca documentación
● Poco apoyo por parte de los IDE, linters, prettier…
● Los bundles generados son más pesados
Decorators

31. +
Decorators
● Cuerpo del componente
● Props
● Propiedades del data
● Propiedades computadas
● Ciclos de vida
● Métodos
<script lang="ts">
import { Component, Vue, Prop } from 'vue-
property-decorator';
@Component
export default class Decorators extends Vue {
@Prop() msg!: string;
users: MemberEntity[] = [];
get counter(): number {
return this.users.length;
}
mounted() {
console.log('Decorators mounted');
}
selectUser(id: number): void {
console.log(id);
}
}
</script>

32. Live demo

33. A tener en cuenta

34. +
A tener en cuenta
● Configurar noImplicitThis: true y noImplicitAny: true (al menos al principio y
poco a poco, ir añadiendo resto de flags de strict)

35. +
A tener en cuenta
● Configurar noImplicitThis: true y noImplicitAny: true
● Puedes aumentar tus tipos para tus plugins
import Vue from 'vue';
declare module 'vue/types/vue' {
interface Vue {
$_console: Function;
}
}
Vue.prototype.$_console = () =>
console.log('%c Soy un simple plugin ', styles);

36. +
A tener en cuenta
● Configurar noImplicitThis: true y noImplicitAny: true
● Puedes aumentar tus tipos para tus plugins
● Indicar qué tipo retorna las computed properties

37. +
A tener en cuenta
● Configurar noImplicitThis: true y noImplicitAny: true
● Puedes aumentar tus tipos para tus plugins
● Indicar qué tipo retorna las computed properties
● Props con tipos complejos o declaradas como Array (Vue.extend)
props: {
numbers: Array as () => {},
complexObject: Object as () => ComplexObjectInterface,
},

38. +
A tener en cuenta
● Configurar noImplicitThis: true y noImplicitAny: true
● Puedes aumentar tus tipos para tus plugins
● Indicar qué tipo retorna las computed properties
● Props con tipos complejos o declaradas como Array (Vue.extend)
● Declaración de $refs o métodos dentro de data (Vue.extend)
export default (Vue as VueConstructor<Vue & {
$refs: {
counter: HTMLElement;
refExtend: InstanceType<typeof RefComponent>,
};
}>).extend({
· · ·

39. +
A tener en cuenta
● Configurar noImplicitThis: true y noImplicitAny: true
● Puedes aumentar tus tipos para tus plugins
● Indicar qué tipo retorna las computed properties
● Props con tipos complejos o declaradas como Array (Vue.extend)
● Declaración de $refs o métodos dentro de data (Vue.extend)
● Data no undefined (Decorators)
baz = undefined; // NO será reactivo
bar = null; // Será reactivo

40. ¡Muchas gracias!
github.com/LissetteIbnz/jsday2018-vue-ts