TypeScript & as & Type Assertion

TypeScript

as

Type Assertion

Advanced Types

Type Guards and Differentiating Types

TypeScript & as & Type Assertion

Type Assertion (as)

That is not vanilla JavaScript, it is TypeScript. As any means 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.

"use strict";

/**
 *
 * @author xgqfrms
 * @license MIT
 * @copyright xgqfrms
 * @created 2020-09-11
 * @modified
 *
 * @description TypeScript Type Assertion
 * @augments
 * @example
 * @link
 *
 */

const log = console.log;

/* <input type="text" data-uid="html-input-type-assertion"> */

const dom = document.querySelector(`[data-uid="html-input-type-assertion"]`);

const inputDOM1: HTMLInputElement = dom as HTMLInputElement;
// const inputDOM1: HTMLInputElement = document.querySelector(`[data-uid="html-input-type-assertion"]`) as HTMLInputElement;

inputDOM1.value;

const inputDOM2: HTMLInputElement = <HTMLInputElement>dom;
// const inputDOM2: HTMLInputElement = <HTMLInputElement>document.querySelector(`[data-uid="html-input-type-assertion"]`);

inputDOM2.value;


const input = document.querySelector(`[data-uid="html-input-type-assertion"]`);

input.value;

/*

const input: Element | null
Object is possibly 'null'.ts(2531)

*/

input?.value;

/*

any
Property 'value' does not exist on type 'Element'.ts(2339)
*/

input?.nodeValue;
// (property) Node.nodeValue: string | null | undefined


      

// TypeScript

function validateToken(token: string) {
  return token;
}

const token = 'kjadj' as string | undefined;

validateToken(token);

      

​​https://www.typescriptlang.org/docs/handbook/basic-types.html#type-assertions​​

as-syntax

let someValue: unknown = "this is a string";

let strLength: number = (someValue as string).length;
      

“angle-bracket” syntax:

let someValue: unknown = "this is a string";

let strLength: number = (<string>someValue).length;

      

demos

​​https://www.typescriptlang.org/docs/handbook/advanced-types.html#type-guards-and-type-assertions​​

​​https://basarat.gitbook.io/typescript/type-system/type-assertion​​

var foo = {};
foo.bar = 123; // Error: property 'bar' does not exist on `{}`
foo.bas = 'hello'; // Error: property 'bas' does not exist on `{}`

      

interface Foo {
    bar: number;
    bas: string;
}
var foo = {} as Foo;
foo.bar = 123;
foo.bas = 'hello';

      

​​https://www.typescriptlang.org/docs/handbook/advanced-types.html#type-guards-and-differentiating-types​​

let pet = getSmallPet();
let fishPet = pet as Fish;
let birdPet = pet as Bird;

if (fishPet.swim) {
  fishPet.swim();
} else if (birdPet.fly) {
  birdPet.fly();
}

      

refs

​​https://linguinecode.com/post/how-to-solve-typescript-possibly-undefined-value​​

​​https://stackoverflow.com/questions/55781559/what-does-the-as-keyword-do​​

​​

​​

​