angle bracket syntax

Learn the <type> syntax and its limits.

Angle bracket syntax

Another way to assert types in TypeScript is angle bracket syntax: <type>value. It does the same thing as as. However, in .tsx files it conflicts with JSX syntax and cannot be used; as is preferred there.

let value: any = 42;
const num = <number>value;

Comparing as and angle bracket

as and <type> are functionally equivalent; both assert types at compile time. However, as can be safely used in all file types, while <type> is only suitable in .ts files. That is why modern code generally uses as.

Exercise Multiply number with as

The deger variable is of type any with value 42. Since angle brackets don't work in .tsx files, use as syntax here to assert it as number, assign to sayi, and print sayi * 2 with console.log.

Show example solution

const deger: any = 42;
const sayi = deger as number;
console.log(sayi * 2);

Test yourself

In which files does angle bracket syntax cause issues?
- In .ts and .tsx files
- In .tsx files, conflicts with JSX
- Does not work in any file type
- Only in .js files
Show answer

In .tsx files, conflicts with JSX — Angle bracket works in .ts files but cannot be used in .tsx files because it conflicts with JSX tags.

Assert number with angle bracket

const deger: any = 42;
const sayi = <____>deger;
console.log(sayi + 8);

Show answer

const deger: any = 42;
const sayi = <number>deger;
console.log(sayi + 8);

Angle bracket concepts

<number>

Angle bracket assertion
.tsx

Angle bracket problematic
.ts

Angle bracket works
as

Universal alternative

Next lesson: Type assertion vs casting

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies