HTML tutorial
CSS3 tutorial
Bootstrap tutorial
JavaScript tutorial
JQuery tutorial
AngularJS tutorial
React tutorial
NodeJS tutorial
PHP tutorial
Python tutorial
Python3 tutorial
Django tutorial
Linux tutorial
Docker tutorial
Ruby tutorial
Java tutorial
C tutorial
C ++ tutorial
Perl tutorial
JSP tutorial
Lua tutorial
Scala tutorial
Go tutorial
ASP.NET tutorial
C # tutorial
There are times when working with types where it's necessary to override the type of a variable, such as when incorrect types are provided by a library
A straightforward way to cast a variable is using the as
keyword,
which will directly change the type of the given variable.
let x: unknown = 'hello';
console.log((x as string).length);
Casting doesn't actually change the type of the data within the variable,
for example the following code with not work as expected since the variable x
is still holds a number.
let x: unknown = 4;
console.log((x as string).length); // prints undefined since numbers don't have a length
TypeScript will still attempt to typecheck casts to prevent casts that don't seem correct,
for example the following will throw a type error since TypeScript knows casting a string to a number doesn't makes sense
without converting the data:
console.log((4 as string).length); // Error: Conversion of type 'number' to type 'string' may be a mistake because neither type sufficiently overlaps with the other. If this was intentional, convert the expression to 'unknown' first.
The Force casting section below covers how to override this.
Using <> works the same as casting with as
.
let x: unknown = 'hello';
console.log((<string>x).length);
This type of casting will not work with TSX, such as when working on React files.
To override type errors that TypeScript may throw when casting, first cast to unknown
, then to the target type.
let x = 'hello';
console.log(((x as unknown) as number).length); // x is not actually a number so this will return undefined