TypeScript Academy · Lección

Llamadas y acceso a elementos opcionales

Utilice ?.() y ?.[] para realizar llamadas a métodos y acceder a índices de forma segura.

Lección 4 de 413 pasos

Llamadas y acceso a elementos opcionales es una lección gratuita de TypeScript Academy en CoddyKit. Esta es la lección 4 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de TypeScript Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de TypeScript Academy incluye 4 lecciones en total.

Más allá del acceso a propiedades

El encadenamiento opcional no se limita a obj?.prop. Tiene otras dos formas: llamadas opcionales con ?.() y acceso opcional a elementos con ?.[index]. Ambas hacen cortocircuito cuando el valor es null o undefined, igual que el acceso a propiedades.

type Obj = { greet?: () => string };
const o: Obj = {};
console.log(o.greet?.()); // undefined, no crash

Llamadas opcionales a métodos

Use obj.method?.() para llamar a un método solo si existe. Si method es null o undefined, la llamada se omite y la expresión produce undefined.

type Logger = { log?: (m: string) => void };
const silent: Logger = {};
silent.log?.('hello'); // skipped, no error
console.log('continued safely');

Dónde colocar el ?.

El ?. va justo antes de los paréntesis de llamada. obj.method?.() comprueba method, no obj. Para proteger también obj, escriba obj?.method?.().

type Api = { send?: (x: number) => number };
const api: Api | null = null;
console.log(api?.send?.(5)); // undefined; guards both api and send

Invocar callbacks opcionales

Un uso muy habitual es invocar un parámetro callback opcional. En lugar de hacer una comprobación con if, escriba callback?.() para llamarlo solo cuando se haya proporcionado.

function run(onDone?: () => void): void {
  console.log('working...');
  onDone?.(); // call only if passed
}
run();
run(() => console.log('finished'));

Acceso opcional a elementos

Para arrays o firmas de índice que podrían ser null o undefined, use arr?.[index]. Si arr es null o undefined, el acceso hace cortocircuito; de lo contrario, lee el elemento con normalidad.

const list: string[] | undefined = undefined;
console.log(list?.[0]); // undefined, no crash

Acceso a elementos con claves dinámicas

El acceso opcional a elementos también funciona con la notación de corchetes para claves dinámicas o calculadas en un objeto que podría ser null o undefined.

type Dict = { [key: string]: number };
const data: Dict | null = { a: 1, b: 2 };
const key = 'a';
console.log(data?.[key]); // 1

Combinar el acceso a elementos y las llamadas

Puede combinar las formas libremente. Acceda a un array opcional y, después, llame opcionalmente a un método del elemento; cada ?. protege su propio paso.

type Handlers = Array<{ fire?: () => string }>;
const hs: Handlers | undefined = [{ fire: () => 'boom' }];
console.log(hs?.[0]?.fire?.());

Encadenamiento opcional con resultados de funciones

Puede encadenar operaciones a partir de cualquier valor que devuelva una función. Si la función devuelve null o undefined, las llamadas o accesos posteriores hacen cortocircuito de forma segura.

function getHandler(): (() => string) | undefined {
  return undefined;
}
console.log(getHandler()?.()); // undefined

El tipo del resultado incluye undefined

Al igual que ocurre con las cadenas de propiedades, las llamadas opcionales y el acceso a elementos añaden undefined al tipo del resultado. Combínelos con ?? para proporcionar un valor predeterminado y eliminar undefined.

type Obj = { compute?: () => number };
const o: Obj = {};
const value = o.compute?.() ?? 0;
console.log(value);

Proteger controladores de eventos

En el código de interfaz de usuario y de eventos, las llamadas opcionales permiten invocar de forma elegante controladores que quizá no estén definidos. No hace falta una comprobación de existencia detallada ni se produce un error si falta el controlador.

type Props = { onClick?: (id: number) => void };
function click(p: Props, id: number): void {
  p.onClick?.(id); // safe if onClick is missing
}
click({ onClick: (id) => console.log('clicked', id) }, 7);
click({}, 8);

Ejemplo de un despachador de plugins

Al combinarlo todo, podemos crear un despachador que invoque opcionalmente un hook de plugin con nombre desde un registro posiblemente disperso y use un valor predeterminado cuando nada lo gestione.

type Hooks = { [name: string]: (() => string) | undefined };
const hooks: Hooks = { save: () => 'saved' };
function fire(name: string): string {
  return hooks[name]?.() ?? 'no handler';
}
console.log(fire('save'), fire('delete'));

Comprobación rápida

Compruebe su comprensión de las llamadas opcionales y el acceso a elementos.

Responde en la lección interactiva

Repaso: llamadas y accesos opcionales

Ha aprendido las otras formas del encadenamiento opcional:

obj.method?.() llama a un método solo si existe.
arr?.[index] lee de forma segura un elemento de un contenedor que podría ser null o undefined.
Todas las formas hacen cortocircuito y producen undefined cuando el operando es null o undefined.
Combínelas con ?? para proporcionar un valor predeterminado.

Siguiente curso: fundamentos de readonly e inmutabilidad.

type Cfg = { init?: () => void };
const c: Cfg = {};
c.init?.();
console.log('ran safely');

Gratis para empezar

Aprende TypeScript con un tutor de IA — gratis

Escribe y ejecuta código real en tu navegador, obtén ayuda instantánea de un tutor de IA disponible 24/7 y continúa donde lo dejaste en la web o en la aplicación.

Cursos: 101
Lecciones: 352

Empezar a aprender gratis Ver el curso completo

Preguntas frecuentes

¿La lección «Llamadas y acceso a elementos opcionales» es gratis?

Sí — el texto completo de «Llamadas y acceso a elementos opcionales» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de TypeScript Academy, actualiza a CoddyKit PRO. El curso de TypeScript Academy incluye 4 lecciones en total.

¿Qué aprenderé en «Llamadas y acceso a elementos opcionales»?

Utilice ?.() y ?.[] para realizar llamadas a métodos y acceder a índices de forma segura. Practicas TypeScript Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.

¿Necesito experiencia previa para empezar TypeScript Academy?

No se requiere experiencia previa. TypeScript Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 4 de 4.

¿Cuánto tiempo toma la lección «Llamadas y acceso a elementos opcionales»?

La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.

¿Puedo escribir y ejecutar código en esta lección de TypeScript Academy?

Sí. Cada lección de TypeScript Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.

Todas las lecciones de este curso

Encadenamiento opcional con ?.
Coalescencia nula con ??
Combinación de ?. y ??
Llamadas y acceso a elementos opcionales

← Volver a TypeScript Academy