Narrowing a known value
A value is typed as unknown, but prior application logic establishes a narrower type.
TypeScript · Const
as
The as operator is a compile-time type assertion that tells TypeScript to treat an expression as a chosen type. It performs no runtime conversion or validation.
How it works
The as operator tells TypeScript to treat an expression as a specified type for static checking. It does not validate, convert, or restructure the value, and it disappears from emitted JavaScript.
Syntax
expression as TypeKey points
aschanges the compiler’s view of a value; it is not a cast that transforms the value.- The operator appears after the expression:
expression as TargetType. - Angle-bracket assertions and
asassertions have the same type-system meaning outside JSX. - Use an assertion when the programmer knows more about a value’s type than the compiler can infer.
- TypeScript documents both postfix
assyntax and prefix angle-bracket syntax.
Common mistakes
- An assertion cannot perform runtime validation or conversion; an incorrect assumption remains possible at runtime.
- Use
asrather than angle-bracket assertions in JSX or TSX files. - Direct assertions between unrelated types may be rejected; use an appropriate intermediate assertion only when the conversion is justified.
Example: Asserting an unknown value
const input: unknown = "TypeScript";
const length = (input as string).length;
console.log(length);The assertion lets the compiler treat the unknown value as a string so its length can be accessed.
When to use it
Describing an external value
DOM APIs or external boundaries provide a broad type while the program knows the expected element shape.
Guiding static checking
A generic or inferred expression needs to be viewed as a compatible, more specific type.
Interview questions
QWhat does the as operator do?
as is a compile-time type assertion. It changes how TypeScript checks an expression but emits no runtime check or data conversion.
Follow-up: What happens if the assertion is wrong? The generated JavaScript still uses the original value, so runtime behavior can fail unless separate validation exists.
QHow does as compare with angle-bracket assertions?
The as syntax and angle-bracket syntax express equivalent assertions. The as form is required in JSX because angle brackets conflict with JSX syntax.
Follow-up: How would you write an assertion in TSX? Use an expression such as value as HTMLElement, not <HTMLElement>value.
QWhen does TypeScript reject a type assertion?
TypeScript permits an assertion when the source and target types have a sufficiently specific or general relationship. This prevents obviously impossible conversions such as asserting a string directly as a number.
Follow-up: What can be done when the compatibility rule is too conservative? An intermediate assertion through unknown or any can express the intended conversion, though it removes useful safety.
Related
type annotationsunknownanyJSXangle-bracket syntax