TS Flashcards

Question 1

Q

¿Qué es el tipo unknown y cuándo usarlo en typescript?

Answer

A

¿Qué es?
unknown es un tipo en TypeScript que representa un valor cuyo tipo no se conoce en el momento de la compilación. Es más estricto que any, ya que no se pueden realizar operaciones sobre un valor de tipo unknown sin comprobar su tipo primero.
¿Cuándo usarlo?
Se usa cuando trabajas con valores cuyo tipo puede variar, como:
- Datos recibidos de APIs externas.
- Argumentos de funciones genéricas o dinámicas.
- Cualquier caso donde necesites obligar a comprobar el tipo antes de usar el valor.
Ejemplo:

```typescript
function processValue(value: unknown) {
if (typeof value === “string”) {
console.log(value.toUpperCase()); // Ok, ya sabemos que es string.
} else if (typeof value === “number”) {
console.log(value.toFixed(2)); // Ok, es number.
} else {
console.log(“Tipo no soportado”);
}
}
~~~

Con unknown evitas los riesgos asociados a any, promoviendo un código más seguro.

Question 2

Q

¿Cómo definir una función genérica en TypeScript?

Answer

A

¿Qué es una función genérica?
Una función genérica permite trabajar con múltiples tipos sin perder tipado. Es útil para crear funciones reutilizables y flexibles.
¿Cómo se define?
Usando un parámetro de tipo (como <T>), que actúa como un marcador para el tipo real que se asignará al usar la función.
Ejemplo básico:

```typescript
function identity<T>(value: T): T {
return value;
}</T>

// Uso:
const num = identity<number>(42); // T es número.
const text = identity<string>("Hola"); // T es string.
~~~</string></number>

Ejemplo con arrays:
```typescript
function reverseArray<T>(items: T[]): T[] {
return items.reverse();
}</T>

// Uso:
const reversed = reverseArray<number>([1, 2, 3]); // [3, 2, 1]
~~~</number>

Ventaja:
- Promueve el reuso del código.
- Mantiene la seguridad de tipos en TypeScript.

Question 3

Q

Explica qué es un enum en TypeScript y cómo se usa.

Answer

A

¿Qué es un enum?
Un enum (enumeración) es un tipo especial en TypeScript que permite definir un conjunto de valores con nombre. Sirve para representar un grupo de constantes relacionadas de forma más legible y organizada.
Tipos de enum:
1. Numéricos: Los valores se asignan automáticamente como números incrementales, comenzando desde 0 por defecto.
2. De cadenas: Los valores se asignan manualmente como cadenas.
Ejemplo numérico:
```typescript
enum Direction {
Up, // 0
Down, // 1
Left, // 2
Right // 3
}

const move = Direction.Up;
console.log(move); // 0
~~~

Ejemplo de cadenas:
```typescript
enum Colors {
Red = “RED”,
Green = “GREEN”,
Blue = “BLUE”
}

const favoriteColor = Colors.Red;
console.log(favoriteColor); // “RED”
~~~

¿Cuándo usarlo?
- Cuando necesitas un conjunto fijo de valores con nombres claros.
- Para evitar el uso de valores mágicos (magic numbers) en tu código.
Ventajas:
- Mejora la legibilidad y el mantenimiento del código.
- Proporciona una forma clara de representar opciones limitadas.

Question 4

Q

¿Cuál es la diferencia entre readonly y const en TypeScript?

Answer

A

const:
- Se utiliza para declarar variables cuyo valor no puede cambiar después de su inicialización.
- Se aplica a valores en tiempo de ejecución.
- Ejemplo:
```
typescript
const pi = 3.14;
// pi = 3.15; ❌ Error: No se puede reasignar un const.
```
readonly:
- Se usa para definir propiedades de objetos que no pueden ser modificadas después de ser asignadas.
- Se aplica en tiempo de compilación.
- Ejemplo:
```typescript
class Circle {
readonly radius: number;constructor(radius: number) {
this.radius = radius;
}
}const circle = new Circle(10);
// circle.radius = 20; ❌ Error: No se puede modificar una propiedad readonly.
```
Diferencias clave:
| Característica | const | readonly |
|————————|——————————|—————————–|
| Dónde se usa | Variables | Propiedades de clases o interfaces. |
| Tiempo de restricción | Tiempo de ejecución | Tiempo de compilación. |
| Scope | Bloque (block-scoped) | Dentro de objetos o clases. |
Conclusión:
Usa const para variables que no cambian, y readonly para propiedades inmutables dentro de clases o interfaces.

Question 5

Q

¿Cómo definir un tipo de unión en TypeScript?

Answer

A

¿Qué es un tipo de unión?
Un tipo de unión permite que una variable o propiedad pueda tener más de un tipo. Se usa el operador | (barra vertical) para combinar los tipos.
¿Cómo se define?
Simplemente coloca los tipos permitidos separados por |.
Ejemplo básico:
```typescript
let value: string | number;

value = “Hola”; // ✅ Correcto.
value = 42; // ✅ Correcto.
value = true; // ❌ Error: ‘boolean’ no está en la unión.
~~~

Ejemplo en una función:
```typescript
function printId(id: string | number): void {
if (typeof id === “string”) {
console.log(ID en texto: ${id.toUpperCase()});
} else {
console.log(ID numérico: ${id.toFixed(2)});
}
}
~~~
Ejemplo con alias de tipos:
```typescript
type ResponseStatus = “success” | “error” | “loading”;

function handleResponse(status: ResponseStatus): void {
console.log(Estado: ${status});
}

handleResponse(“success”); // ✅
handleResponse(“failed”); // ❌ Error: ‘failed’ no está permitido.
~~~

¿Cuándo usarlo?
- Cuando un valor puede tener múltiples formas (como una función que acepta diferentes tipos de parámetros).
- Para restringir las opciones a un conjunto de tipos predefinidos.
Ventaja:
Los tipos de unión mejoran la flexibilidad del código sin sacrificar la seguridad de tipos.

Question 6

Q

¿Qué es el operador keyof y cómo se utiliza en TypeScript?

Answer

A

¿Qué es keyof?
Es un operador de TypeScript que obtiene un tipo literal que representa las claves (o propiedades) de un tipo de objeto. Es útil para trabajar con objetos de manera dinámica y tipada.
¿Cómo se utiliza?
Se usa con un tipo de objeto para generar un tipo compuesto por las claves de ese objeto.
Ejemplo básico:
```typescript
type Person = {
name: string;
age: number;
};

type PersonKeys = keyof Person;
// El tipo ‘PersonKeys’ es “name” | “age”

let key: PersonKeys;
key = “name”; // ✅ Correcto
key = “age”; // ✅ Correcto
key = “address”; // ❌ Error: “address” no es una clave de ‘Person’
~~~

Ejemplo en funciones genéricas:
```typescript
function getProperty<T, K extends keyof T>(obj: T, key: K): T[K] {
return obj[key];
}

const person: Person = { name: “Juan”, age: 30 };

const name = getProperty(person, “name”); // ✅ Devuelve el valor “Juan”
const age = getProperty(person, “age”); // ✅ Devuelve el valor 30
~~~

¿Cuándo usar keyof?
- Para garantizar que solo se accedan propiedades válidas de un objeto.
- En funciones genéricas que dependen de las claves de un tipo.
- Al crear tipos dinámicos basados en las propiedades de otro tipo.
Ventaja:
Mejora la seguridad de tipos al trabajar con objetos, evitando errores comunes como el acceso a claves inexistentes.

Question 7

Q

Explica el concepto de la utilidad Partial en TypeScript.

Answer

A

¿Qué es Partial?
Partial es una utilidad integrada en TypeScript que convierte todas las propiedades de un tipo en opcionales.
¿Cómo se define?
Usa la sintaxis Partial<T>, donde T es el tipo original.
Ejemplo básico:
```typescript
type User = {
id: number;
name: string;
email: string;
};

const updateUser = (id: number, userUpdates: Partial<User>): void => {
// userUpdates puede incluir cualquiera de las propiedades de User de forma opcional
console.log(id, userUpdates);
};</User>

// Uso:
updateUser(1, { name: “Juan” }); // ✅ Sólo se actualiza ‘name’
updateUser(2, { email: “test@example.com” }); // ✅ Sólo se actualiza ‘email’
~~~

¿Qué hace Partial?
Convierte:

typescript
type User = {
  id: number;
  name: string;
  email: string;
};

En:

typescript
type Partial<User> = {
  id?: number;
  name?: string;
  email?: string;
};

¿Cuándo usarlo?
- Cuando necesitas trabajar con objetos parcialmente definidos, como actualizaciones o configuraciones.
- En formularios donde no todos los campos son obligatorios.
Ventaja:
- Evita tener que declarar manualmente cada propiedad como opcional.
- Promueve la reutilización y claridad del código.

Question 8

Q

¿Cómo funcionan los “Mapped Types” en TypeScript?

Answer

A

¿Qué son los “Mapped Types”?
Los Mapped Types son una forma de transformar o crear nuevos tipos a partir de los existentes, aplicando modificaciones a sus propiedades. Usan la sintaxis in para iterar sobre las claves de un tipo.

¿Cómo se definen?
La estructura básica es:

typescript
type NuevoTipo = { [Key in TipoExistente]: Modificación };

Ejemplo básico:
Convertir todas las propiedades de un tipo en opcionales:
```typescript
type Person = {
name: string;
age: number;
};type OptionalPerson = {
[Key in keyof Person]?: Person[Key];
};// Resultado equivalente a:
// type OptionalPerson = {
// name?: string;
// age?: number;
// };
```
Ejemplo práctico:
Crear un tipo con todas las propiedades como readonly:
```typescript
type Readonly<T> = {
[Key in keyof T]: T[Key];
};</T>type ReadonlyPerson = Readonly<Person>;</Person>const person: ReadonlyPerson = { name: “Juan”, age: 30 };
// person.name = “Pedro”; ❌ Error: no se puede modificar una propiedad readonly.
```
Utilidades predefinidas con Mapped Types:
TypeScript incluye varias utilidades basadas en este concepto:
- Partial<T>: Hace las propiedades opcionales.
- Readonly<T>: Hace las propiedades inmutables.
- Required<T>: Hace las propiedades obligatorias.
- Record<K, T>: Crea un objeto con claves de tipo K y valores de tipo T.
¿Cuándo usarlo?
- Para crear tipos reutilizables y dinámicos.
- Al trabajar con APIs o estructuras de datos que requieren transformación de tipos.
Ventaja:
Los Mapped Types proporcionan flexibilidad y escalabilidad, permitiendo crear tipos complejos de manera declarativa y tipada.

Question 9

Q

¿Qué es el strictNullChecks y cómo afecta el código en TypeScript?

Answer

A

El strictNullChecks es una opción del compilador de TypeScript que forma parte del modo estricto. Cuando está activado, obliga al desarrollador a manejar explícitamente valores null y undefined.

Principales efectos:
1. Restricción de tipos:
Los valores null y undefined no se consideran automáticamente como parte de todos los tipos, a menos que se especifiquen explícitamente.

typescript
   let nombre: string = null; // ❌ Error con strictNullChecks
   let nombre: string | null = null; // ✅ Correcto

Prevención de errores en tiempo de ejecución:
Obliga a manejar los posibles valores nulos o indefinidos, lo que ayuda a evitar errores relacionados con referencias a propiedades de objetos inexistentes.
Uso de operadores seguros:
Fomenta el uso de operadores como ! (non-null assertion) y ?. (optional chaining) para tratar posibles valores null o undefined.
```
typescript
usuario?.direccion?.ciudad; // Acceso seguro a propiedades anidadas
```

En resumen, el strictNullChecks mejora la seguridad y confiabilidad del código al prevenir errores comunes relacionados con valores nulos o indefinidos.

Question 10

Q

¿Cómo extender una interfaz en TypeScript?

Answer

A

En TypeScript, puedes extender una interfaz utilizando la palabra clave extends. Esto permite crear una nueva interfaz que hereda las propiedades de otra, agregando o sobrescribiendo propiedades según sea necesario.

Ejemplo básico:

```typescript
interface Persona {
nombre: string;
edad: number;
}

interface Empleado extends Persona {
salario: number;
puesto: string;
}

const empleado: Empleado = {
nombre: “Juan”,
edad: 30,
salario: 50000,
puesto: “Desarrollador”,
};
~~~

Detalles importantes:
1. Herencia múltiple:
Una interfaz puede extender múltiples interfaces separándolas con comas.
```typescript
interface Direccion {
ciudad: string;
pais: string;
}

interface EmpleadoCompleto extends Persona, Direccion {
salario: number;
}

const empleadoCompleto: EmpleadoCompleto = {
nombre: “Ana”,
edad: 28,
ciudad: “Madrid”,
pais: “España”,
salario: 45000,
};
```

Sobrescritura de propiedades:
Si se extiende una interfaz y se declara una propiedad con el mismo nombre, el compilador utilizará la definición más reciente.

En resumen, extender interfaces permite reutilizar definiciones de tipos y organizar mejor las estructuras de datos en TypeScript.

Question 11

Q

¿Qué son las “utility types” en TypeScript y cuáles son los más comunes?

Answer

A

Los utility types son tipos genéricos incorporados en TypeScript que facilitan las transformaciones comunes de tipos. Los más utilizados son:

**Partial<T>**: Convierte todas las propiedades de un tipo en opcionales.
Ejemplo: `Partial<User>` → `{ name?: string, age?: number }`</User></T>
**Required<T>**: Convierte todas las propiedades en requeridas.
Ejemplo: `Required<User>` → `{ name: string, age: number }`</User></T>
Pick<T, K>: Crea un tipo seleccionando solo ciertas propiedades.
Ejemplo: Pick<User, 'name'> → { name: string }
Omit<T, K>: Crea un tipo excluyendo ciertas propiedades.
Ejemplo: Omit<User, 'age'> → { name: string }
Record<K, T>: Crea un tipo con un conjunto de propiedades de tipo T.
Ejemplo: Record<string, number> → { [key: string]: number }
**Readonly<T>**: Convierte todas las propiedades en solo lectura.
Ejemplo: `Readonly<User>` → `{ readonly name: string }`</User></T>

Question 12

Q

¿Cuál es la diferencia entre interface y abstract class en TypeScript?

Answer

A

Interfaces
- Son contratos puramente abstractos que definen la forma de un objeto
- No tienen implementación
- Permiten múltiple herencia (una clase puede implementar varias interfaces)
- No tienen constructor
- Sin código en tiempo de ejecución (solo existen en tiempo de compilación)
- Uso ideal: Definir contratos entre partes de código

```typescript
interface Animal {
name: string;
makeSound(): void;
}
~~~

Abstract Classes
- Son clases base que pueden tener implementación parcial
- Pueden tener métodos implementados y abstractos
- Solo permiten herencia simple
- Pueden tener constructor
- Existen en tiempo de ejecución
- Uso ideal: Compartir código base entre clases relacionadas

```typescript
abstract class Animal {
constructor(protected name: string) {}

abstract makeSound(): void;

move(): void {
console.log(${this.name} se está moviendo);
}
}
~~~

Regla práctica:
- Usa interfaces cuando necesites definir un contrato puro
- Usa abstract classes cuando necesites compartir funcionalidad base entre clases relacionadas

¿Te gustaría que modifique algo de la tarjeta o que agregue más ejemplos?

Question 13

Q

¿Cómo se implementa la sobrecarga de funciones en TypeScript?

Answer

A

La sobrecarga de funciones en TypeScript se implementa definiendo múltiples firmas de función seguidas de una única implementación.

Sintaxis

```typescript
// Firmas de la función (sobrecargas)
function add(a: number, b: number): number;
function add(a: string, b: string): string;

// Implementación (debe ser compatible con todas las firmas)
function add(a: number | string, b: number | string): number | string {
if (typeof a === ‘number’ && typeof b === ‘number’) {
return a + b;
}
return String(a) + String(b);
}
~~~

Puntos clave
- Las firmas definen los tipos de entrada y salida permitidos
- La implementación debe manejar todos los casos declarados
- La implementación debe usar tipos más generales que cubran todas las firmas
- TypeScript verificará en tiempo de compilación que los tipos coincidan

Ejemplo con métodos de clase

```typescript
class Calculator {
multiply(a: number, b: number): number;
multiply(a: number, b: number, c: number): number;
multiply(…args: number[]): number {
return args.reduce((acc, val) => acc * val, 1);
}
}
~~~

Question 14

Q

¿Qué es un “tuple” y cómo se define en TypeScript?

Answer

A

Una tuple es un tipo de array con:
- Número fijo de elementos
- Tipos específicos para cada posición
- Orden definido de los tipos

Sintaxis básica

```typescript
// Definición de tuple
let coordenada: [number, number] = [10, 20];

// Tuple con diferentes tipos
let usuario: [string, number, boolean] = [“Juan”, 25, true];
~~~

Características especiales

Elementos opcionales

```typescript
// El ? marca un elemento opcional
type Respuesta = [number, string?];
let valida: Respuesta = [200];
let conMensaje: Respuesta = [200, “OK”];
~~~

Rest elements

```typescript
// Permite elementos adicionales del mismo tipo
type StringNumberBools = [string, number, …boolean[]];
let valores: StringNumberBools = [“hola”, 42, true, false, true];
~~~

Readonly tuples

```typescript
// Tuple inmutable
const punto: readonly [number, number] = [5, 10];
// punto[0] = 1; // Error!
~~~

Uso común
- Retorno de múltiples valores de una función
- Coordenadas/puntos en sistemas
- Pares clave-valor
- Estructuras de datos fijas

Question 15

Q

¿Cómo se manejan los decoradores en clases de TypeScript?

Answer

A

Los decoradores son funciones especiales que permiten modificar o extender clases, métodos, propiedades o parámetros en tiempo de ejecución.

Tipos principales de decoradores

Decoradores de Clase

```typescript
// Definición del decorador
function Logger(target: Function) {
console.log(Clase creada: ${target.name});
}

// Uso del decorador
@Logger
class Persona {
constructor(public nombre: string) {}
}
~~~

Decoradores de Método

```typescript
function Log(target: any, propertyKey: string, descriptor: PropertyDescriptor) {
const metodoOriginal = descriptor.value;

descriptor.value = function(…args: any[]) {
console.log(Llamando a ${propertyKey});
return metodoOriginal.apply(this, args);
};
}

class Ejemplo {
@Log
saludar() {
console.log(“¡Hola!”);
}
}
~~~

Decoradores de Propiedad

```typescript
function ValidateLength(min: number) {
return function(target: any, propertyKey: string) {
let value: string;

const getter = () => value;
const setter = (newValue: string) => {
  if (newValue.length < min) {
    throw new Error(`La longitud debe ser ≥ ${min}`);
  }
  value = newValue;
};

Object.defineProperty(target, propertyKey, {
  get: getter,
  set: setter
});   }; }

class Usuario {
@ValidateLength(3)
nombre: string;
}
~~~

Puntos importantes
- Requieren habilitar experimentalDecorators en tsconfig.json
- Se ejecutan en orden de arriba hacia abajo
- Pueden recibir parámetros usando factories
- Pueden modificar la definición de la clase/método/propiedad
- Son una característica experimental de JavaScript/TypeScript

Question 16

Q

¿Qué es un Module Augmentation en TypeScript?

Answer

A

Module Augmentation es una característica que permite extender módulos existentes con nuevas declaraciones. Permite agregar nuevos miembros a interfaces y módulos sin modificar su código fuente original.

Sintaxis básica

```typescript
// Módulo original
declare module “some-module” {
export interface User {
name: string;
}
}

// Augmentación del módulo
declare module “some-module” {
interface User {
age: number; // Añade nueva propiedad
}
}
~~~

Casos de uso comunes

Extender módulos de terceros

```typescript
// Extender módulo de Express
declare module “express-serve-static-core” {
interface Request {
user: {
id: string;
roles: string[];
}
}
}
~~~

Extender módulos globales

```typescript
// Extender String global
declare global {
interface String {
toMyFormat(): string;
}
}
~~~

Limitaciones importantes
- Solo puedes agregar nuevas declaraciones
- No puedes eliminar o reemplazar declaraciones existentes
- Solo funciona con módulos que tienen al menos una exportación
- Debe estar en un módulo (archivo con import/export)

Mejor práctica
```typescript
// archivo: types.d.ts
import * as React from ‘react’;

declare module ‘react’ {
interface ComponentProps {
theme?: ‘light’ | ‘dark’;
}
}
~~~

Question 17

Q

¿Cómo usar type assertion y cuándo evitarlo en TypeScript?

Answer

A

Sintaxis de Type Assertion
Hay dos formas de escribir type assertions:

```typescript
// Usando el operador ‘as’
let valor: any = “Hola”;
let longitud: number = (valor as string).length;

// Usando sintaxis angle-bracket (menos común)
let longitud2: number = (<string>valor).length;
~~~</string>

Casos de uso apropiados

Cuando tienes más información que el compilador

```typescript
const elemento = document.getElementById(‘miInput’) as HTMLInputElement;
~~~

En conversiones de tipos compatibles

```typescript
interface Gato {
nombre: string;
maullar(): void;
}

const animal = {} as Gato; // Durante la creación del objeto
~~~

Cuándo evitar type assertion

No usar para conversiones imposibles

```typescript
// ❌ MAL: Conversión imposible
const num = 42 as string; // Error

// ✅ BIEN: Usar conversión explícita
const numStr = num.toString();
~~~

No usar para evadir el sistema de tipos

```typescript
// ❌ MAL: Evadir comprobaciones de tipo
const usuario = {
nombre: “Juan”
} as { nombre: string, edad: number };

// ✅ BIEN: Definir interface y cumplir con el tipo
interface Usuario {
nombre: string;
edad: number;
}
const usuario: Usuario = {
nombre: “Juan”,
edad: 25
};
~~~

Alternativas más seguras
- Usar type guards (instanceof, typeof)
- Usar genéricos
- Definir interfaces completas
- Usar el operador in para verificar propiedades

```typescript
// Mejor que type assertion
if (valor instanceof Date) {
// TypeScript sabe que valor es Date
}
~~~

Question 18

Q

¿Cuál es la diferencia entre “narrowing” y “widening” en TypeScript?

Answer

A

Type Narrowing
Es el proceso de reducir el tipo de una variable a un tipo más específico.

```typescript
// Ejemplo de Narrowing
function procesar(valor: string | number) {
if (typeof valor === “string”) {
// TypeScript sabe que aquí valor es string
console.log(valor.toUpperCase());
} else {
// TypeScript sabe que aquí valor es number
console.log(valor.toFixed(2));
}
}
~~~

Formas comunes de Narrowing

```typescript
// 1. Type Guards
function esString(x: any): x is string {
return typeof x === “string”;
}

// 2. instanceof
if (error instanceof Error) { /…/ }

// 3. in operator
if (“length” in objeto) { /…/ }
~~~

Type Widening
Es el proceso de expandir el tipo de una variable a uno más general.

```typescript
// Ejemplo de Widening
let x = “hello”; // tipo: “hello”
let y: string = x; // tipo: string

// Widening en literales
const constante = “hola”; // tipo: “hola”
let variable = “hola”; // tipo: string
~~~

Casos de Widening

```typescript
// Widening en null
let a = null; // tipo: any
let b: string | null = null; // tipo: string | null

// Widening en objetos
const punto = { x: 4 }; // tipo: { x: number }
punto.x = 5; // Permitido
~~~

Diferencias clave
- Narrowing: Hace los tipos más específicos (más seguros)
- Widening: Hace los tipos más generales (más flexibles)
- Narrowing es explícito (requiere verificaciones)
- Widening suele ser implícito (inferencia de tipos)

¿Te gustaría ver más ejemplos o profundizar en algún aspecto específico?

Question 19

Q

¿Qué es una declaración de espacio de nombres (namespace) en typescript?

Answer

A

Un espacio de nombres (namespace) en TypeScript es un contenedor lógico utilizado para organizar y agrupar código, como funciones, interfaces, clases o variables, bajo un único nombre global. Ayuda a evitar colisiones de nombres en aplicaciones grandes.

Sintaxis básica:

```typescript
namespace Utilidades {
export function saludar(nombre: string): string {
return Hola, ${nombre};
}
}

// Usar el namespace
console.log(Utilidades.saludar(“Juan”)); // “Hola, Juan”
~~~

Características clave:
1. Exportación de miembros:
Los elementos dentro de un espacio de nombres deben ser marcados con export para que sean accesibles desde fuera.
```typescript
namespace Matemáticas {
export const PI = 3.14;

 export function areaCirculo(radio: number): number {
   return PI * radio * radio;
 }    }

console.log(Matemáticas.areaCirculo(5)); // 78.5
```

Anidación de namespaces:
Los espacios de nombres pueden anidarse para organizar mejor el código.
```typescript
namespace Empresa {
export namespace Departamento {
export function nombreDepto(): string {
return “Tecnología”;
}
}
}console.log(Empresa.Departamento.nombreDepto()); // “Tecnología”
```
Compilación:
Los namespaces suelen usarse en proyectos donde el código se incluye directamente en el navegador o en scripts con múltiples archivos.

Nota:
Aunque los namespaces son útiles, TypeScript fomenta el uso de módulos ES6 (import/export) para organizar el código moderno, ya que ofrecen más ventajas en aplicaciones modulares.

Question 20

Q

¿Cómo integras TypeScript con un proyecto de Vue 3?

Answer

A

Integrar TypeScript en un proyecto de Vue 3 es sencillo, ya que Vue 3 tiene soporte nativo para TypeScript. A continuación, se describe el proceso paso a paso:

Crear un proyecto Vue 3 con soporte para TypeScript
Usa el comando de Vue CLI o Vite:
#### Con Vue CLI:
```
bash
vue create mi-proyecto
```
- Selecciona la opción Manually select features.
- Marca la opción TypeScript en el asistente de configuración.

Con Vite:
```bash
npm create vite@latest mi-proyecto –template vue-ts
~~~

Configurar TypeScript en el proyecto
Si ya tienes un proyecto existente, sigue estos pasos:
- Instala las dependencias necesarias:

bash
  npm install --save-dev typescript @types/node vue-tsc

- Crea un archivo tsconfig.json:

json
  {
 "compilerOptions": {
   "target": "ESNext",
   "module": "ESNext",
   "strict": true,
   "jsx": "preserve",
   "moduleResolution": "node",
   "esModuleInterop": true,
   "skipLibCheck": true,
   "forceConsistentCasingInFileNames": true
 },
 "include": ["src/**/*"],
 "exclude": ["node_modules"]
  }

Usar sintaxis TypeScript en componentes
- Cambia la extensión de los componentes de .vue a .vue o .tsx si es necesario.
- Declara los tipos en <script> utilizando lang="ts":
```vue
```
import { defineComponent } from 'vue';
```

export default defineComponent({
name: ‘MiComponente’,
props: {
mensaje: {
type: String,
required: true,
},
},
setup(props) {
const saludo: string = Hola, ${props.mensaje};
return { saludo };
},
});
</script>
~~~

Configurar comprobación de tipos
Para verificar los tipos de TypeScript durante el desarrollo o la compilación, usa vue-tsc:
```bash
npx vue-tsc –noEmit
~~~

Agregar tipos globales (opcional)
Si necesitas declarar tipos globales:
- Crea un archivo src/shims-vue.d.ts:

typescript
  declare module '*.vue' {
 import { DefineComponent } from 'vue';
 const component: DefineComponent<{}, {}, any>;
 export default component;
  }