What does the "as" keyword do?

Question

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?

Answer 1

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.

Answer 2

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.

Answer 3

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;

Answer 4

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.

Answer 5

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

Answer 6

Key Mapping via as

In the provided example of the OP the as keyword is used for Type Assertion. In TypeScript 4.1 and onwards the as keyword can not only be used for Type Assertion but also for Key Mapping. This allows you to re-map the keys of a type. E.g.:

type Person = {
  name: string;
  age: number;
};

type Getters<T> = {
  [K in keyof T as `get${Capitalize<K & string>}`]: () => T[K];
};

type MappedPerson = Getters<Person>;

// type MappedPerson = {
//   getName: () => string;
//   getAge: () => number;
// }

---

Generic & Template Literal Types really shine here. Key Mapping is a very mighty feature because you can also map a key to the type of it's value. For instance, with the help of Conditional Types it's possible to filter object properties by the type of a key's corresponding value . Let's say we want to remove all properties of type number on the Person type:

type WithoutPropertiesOfTypeNumber<T> = {
  [K in keyof T as T[K] extends number ? never : K]: T[K];
};

type PersonWithoutPropertiesOfTypeNumbers =
  WithoutPropertiesOfTypeNumber<Person>;

// type PersonWithoutPropertiesOfTypeNumbers = {
//     name: string;
// }

Answer 7

In TypeScript, the as keyword is used to explicitly type cast a value to a different type. It allows you to tell the TypeScript compiler that you know more about the type of a value than it does, and to treat that value as if it were of a different type.

For example, consider the following code:

let myValue: any = "Hello, world!";
let myLength: number = (<string>myValue).length;

In this code, myValue is of type any, which means that TypeScript doesn't know anything about its type. We can use the as keyword to tell TypeScript that we know myValue is a string, like this:

let myValue: any = "Hello, world!";
let myLength: number = (myValue as string).length;

Both examples achieve the same result, but the second example uses the as keyword to perform the type cast.

Note that when using the as keyword, you are telling TypeScript that you are sure of the type of the value. If you make a mistake and cast a value to the wrong type, it can cause runtime errors. Therefore, it's important to be careful when using the as keyword and make sure that you're casting to the correct type.