What does the "as" keyword do?


Typescript Problem Overview

if (process.env.NODE_ENV !== 'production') {
    (WithUser as any).displayName = wrapDisplayName(Component, 'withUser');

I'm not even sure if as is a keyword, but anyway, what does it do in JavaScript?

Typescript Solutions

Solution 1 - Typescript

That is not vanilla JavaScript, it is TypeScript. as any tells the compiler to consider the typed object as a plain untyped JavaScript object.

The as keyword is a Type Assertion in TypeScript which tells the compiler to consider the object as another type than the type the compiler infers the object to be.

Solution 2 - Typescript

It's TypeScript, not vanilla JS, but for the as itself: It's called Type Assertion, you are just telling the compiler to treat something as a type:

var a = 'TEST STRING'
var b = a as string; //Means the compiler will assume it's a string

It's equivalent to this:

var a = 'TEST STRING'
var b = <string> a; 

However it might be confusing when working with JSX (JS with html tags) , so in those cases the as syntax is preferred.

Solution 3 - Typescript

This is a Typescript operator, it's not available in ECMAScript 2015 (latest release of Javascript)

As the answers above indicated, the 'as' operator is a form of Type Assertion

To take a short example, say you have two types: First & Second. You're writing a method, and the method doesn't exactly know which type your object will be of. It could be of type First or Second.

So, you declare your variable without a strict type. Once your method is aware of the type your variable should take on, you can return it 'as that type'.

That seemed a little vague and ambiguous, but the 'as' operator actually performs the exact same function as another (more familiar) pattern:

These two snippets of code do the exact same thing

    let accountCode = '123';
    let castedAccountCode = <number>accountCode;

Using as keyword:

    let accountCode = '123';
    let castedAccountCode = accountCode as number;

Solution 4 - Typescript

This kind of type assertion is useless, as

function foo (a: string, b: string): number {
    return (a as number) + (b as number)

simply transpiles to

function foo(a, b) {
    return a + b;

I first expected it to be something like

function foo(a, b) {
    if (typeof a != 'string') throw ...
    if (typeof b != 'string') throw ...
    return Number(a) + Number(b)

but no. TS gives users a wrong sense of security.

Solution 5 - Typescript

as above answers pointed the word as in the code of the original question is a keyword in TypeScript, however as a supplement, as is contextual keyword in JavaScript - when the code runs into the syntax rule ImportClause


All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionHenok TesfayeView Question on Stackoverflow
Solution 1 - TypescriptAdrian BrandView Answer on Stackoverflow
Solution 2 - TypescriptP. BudielView Answer on Stackoverflow
Solution 3 - TypescriptLybelle KatbeyView Answer on Stackoverflow
Solution 4 - TypescriptVincent TscherterView Answer on Stackoverflow
Solution 5 - Typescripthsy0View Answer on Stackoverflow