liveBook · Manning

Any type

As explained in Pro Angular 16

The TypeScript any type permits a value to have any type and largely disables static type checking for that value.

The TypeScript `any` type accepts values of any type and effectively disables type checks for that value. Use it when JavaScript’s unrestricted behavior is intentional, not as a substitute for deciding which types are valid. Type annotations disappear during compilation; `any` adds no runtime check. section 3.4.2 section 3.4.5

An unrestricted parameter

A parameter declared as `param: any` accepts both `myFunction(1)` and `myFunction("London")`. If the function requires a number, changing the annotation to `param: number` makes the string call a compile-time error. A `typeof` check, by contrast, checks the value when the function runs. section 3.4.2

Prefer a union when several known types are allowed. `string | undefined | null` permits those values without opening a variable to every type. For a parameter that accepts numbers and strings, `number | string` states the intended range; a `typeof` check can then distinguish the values before using a number-only method. section 3.4.2 section 3.4.5

Listing 3.19. Addressing the ambiguity in the main.ts file in the src folder
function myFunction(param: number | string) {
    if (typeof(param) == "number" || typeof(param) == "string") {
        let result = (param as any) + 100;
        console.log("My result: " + result);
    } else {
        throw ("Expected a number or a string: " + param)
    }
}

myFunction(1);
myFunction("London");

The expression `(param as any) + 100` lets addition proceed after the compiler rejects `+` on a `number | string` value. The resulting behavior is still JavaScript’s: a number produces `101`, while a string produces `London100`. section 3.4.2

Reading an Angular input event

An Angular template can use `(input)="selectedProduct.set($any($event).target.value)"` to read the input element’s value. The template does not allow an `as` type assertion, so `$any($event)` bypasses the type error. Check the property name carefully: a nonexistent property can still fail at runtime. section 13.2.1

The same trade-off applies beyond parameters. An empty array populated with a number, string, and boolean is inferred as `any[]`; `(number | string | boolean)[]` restricts its elements instead. Declaring two differently typed values as `any` can also suppress a compiler warning when comparing them. section 4.3 section 3.4.7

How Pro Angular 16 covers it

How deep it goes
Works through annotations, compiler errors, assertions, and runtime results; stops at observable behavior rather than compiler internals.
Examples
Shows a function accepting numbers and strings, a mixed array, and an input event read through `$any($event)`.
What it assumes
Starts with JavaScript function behavior and introduces TypeScript parameter annotations before contrasting `any` with specific types.
What you can do after
Apply it via TypeScript annotations or Angular `$any`, while choosing unions when values can be restricted.
How it connects
Connects `any` to type annotations, type unions, type assertions, type inference, and Angular event binding.

Also explained in

Compare how 2 books explain any type →

Related concepts

This explainer was generated by Manning's knowledge graph from the text of Pro Angular 16. The section links point to the parts of the book it draws on.