Multiplication

The * (asterisk) token in TypeScript serves four distinct syntactic and operational roles depending on its lexical context: a binary arithmetic operator, a generator function declarator, an iterable delegation operator, and a module namespace wildcard.

1. Arithmetic Multiplication Operator

As a binary operator, * performs mathematical multiplication. TypeScript’s static type system strictly enforces that both operands must be of type number, bigint, a numeric enum, or any. Mixing number and bigint operands without explicit casting results in a compile-time diagnostic error (specifically TS2365: Operator '*' cannot be applied to types 'number' and 'bigint').

enum Multiplier { Base = 10 }

const leftOperand: number = 5;
const rightOperand: number = Multiplier.Base;

// Syntax visualization
const product: number = leftOperand * rightOperand;
const bigIntProduct: bigint = 5n * 10n;

2. Generator Function Declarator (function*)

When appended to the function keyword, * acts as a declarator that defines a generator function. This alters the function’s evaluation model, causing it to return a Generator object rather than executing immediately. In TypeScript, the resulting object is strictly typed using the built-in Generator<T, TReturn, TNext> or IterableIterator<T> interfaces.

function* generateSequence(): Generator<number, void, unknown> {
  yield 1;
}

// Syntax visualization
function* identifier() { /* function body */ }
const anonymousGenerator = function* () { /* function body */ };

3. Iterable Delegation Operator (yield*)

Used exclusively within the body of a generator function, the yield* expression delegates iteration control to another iterable object. TypeScript’s compiler verifies that the expression following yield* implements the Iterable<T> interface in standard generators. In asynchronous generators (async function*), the compiler also accepts and verifies against the AsyncIterable<T> interface. TypeScript automatically infers the yielded types from the delegated iterable.

function* parentGenerator(): Generator<number> {
  // Syntax visualization
  const iterableExpression = [1, 2, 3];
  yield* iterableExpression;
}

async function* asyncParentGenerator(): AsyncGenerator<number> {
  yield* parentGenerator();
}

4. Module Namespace Wildcard

In ES Module syntax, * functions as a wildcard identifier for namespace imports and exports. Its behavior regarding default exports depends strictly on the declaration syntax:

• Namespace Imports (import * as Alias) and Namespace Re-exports (export * as Alias): The * token aggregates all exported members from the target module into a single namespace object. This includes the default export, which is bound to and accessible via the .default property on the alias.
• Blanket Re-exports (export * from "module"): The * token re-exports all named exports from the target module but strictly excludes the default export.

TypeScript preserves the strict type definitions of all aggregated members. Furthermore, TypeScript supports a type-only namespace import syntax (import type * as Alias), which aggregates exported types while guaranteeing the import is elided from the emitted JavaScript runtime code.

// Ambient module declarations for valid compilation
declare module "math-utils" {
  export const pi: number;
  export default function add(a: number, b: number): number;
}

declare module "math-types" {
  export type Point = { x: number; y: number };
}

// Namespace Import (Includes default export as MathUtils.default)
import * as MathUtils from "math-utils";

// Type-only Namespace Import
import type * as MathTypes from "math-types";

// Blanket Re-export (Excludes default export)
export * from "math-utils";

// Namespace Re-export (Includes default export as MathUtilsReExport.default)
export * as MathUtilsReExport from "math-utils";

Master TypeScript with Deep Grasping Methodology!

Learn More