When you start using TypeScript, you’ll quickly notice that you don’t always have to write types everywhere — yet TypeScript somehow knows what type your variable is.
That’s because of type inference.
Sometimes, though, TypeScript might not know enough — and you’ll want to tell it explicitly what type something is. That’s where type assertion comes in.
Let’s explore both concepts with simple examples.
🧩 1. What Is Type Inference?
Type inference means that TypeScript can automatically figure out (or infer) the type of a variable, function, or expression even if you don’t write it explicitly.
Example 1: Variable Inference
let message = "Hello, World!";
You didn’t specify : string, but TypeScript automatically infers that message is a string because you assigned it a string value.
If you later try to change it to a number, TypeScript will complain:
message = 42; // ❌ Error: Type 'number' is not assignable to type 'string'
Example 2: Function Return Type Inference
function add(a: number, b: number) {
return a + b;
}
Here, TypeScript automatically infers that the return type is number, even though you didn’t write : number after the function.
You can still write it if you want to be explicit:
function add(a: number, b: number): number {
return a + b;
}
Both are valid!
⚙️ 2. How TypeScript Infers Types
TypeScript uses context clues to guess types.
For example, it looks at:
- The initial value you assign.
- The return value of a function.
- The operations performed on a variable.
Example 3: Contextual Typing
window.addEventListener("click", (event) => {
console.log(event.clientX); // TypeScript knows event is a MouseEvent
});
Even though you never wrote the type for event, TypeScript inferred it from the "click" event listener — pretty smart!
🧠 3. What Is Type Assertion?
Sometimes, TypeScript doesn’t have enough information to infer the right type.
In those cases, you can tell TypeScript what type something should be using a type assertion.
Think of it as saying:
“Hey TypeScript, trust me — I know this value’s type better than you do.”
Example 4: Using “as” Syntax
let someValue: unknown = "Hello TypeScript!";
let length = (someValue as string).length;
Here, someValue has the type unknown, but you know it’s actually a string.
By writing (someValue as string), you’re asserting (or declaring) that it’s a string, so TypeScript lets you use string methods like .length.
⚡ 4. Alternative “Angle Bracket” Syntax
There’s another way to do type assertion using angle brackets (<>):
let someValue: unknown = "Hello TypeScript!";
let length = (<string>someValue).length;
This works the same as as string, but it’s not recommended in React (JSX) because angle brackets can confuse the JSX syntax.
So, in modern projects, stick to as syntax.
⚖️ 5. Type Assertion vs Type Casting
It’s easy to confuse type assertion with type casting, but they are not the same.
- Type casting actually changes the data at runtime (in languages like C# or Java).
- Type assertion only changes how TypeScript understands the type — it doesn’t change the value when the code runs.
So this code:
let value: any = "42";
let numberValue = value as number;
will not really convert the string "42" into the number 42 at runtime — it just tells TypeScript to treat it as a number.
If you use it incorrectly, you might still get runtime errors.
🚫 6. Common Mistake — Forcing Wrong Assertions
Be careful!
If you assert a wrong type, TypeScript might not stop you, but your program could behave unexpectedly.
Example:
let age: any = "30";
let validAge = (age as number) + 1;
console.log(validAge); // Output: "301" (string concatenation, not math!)
TypeScript didn’t convert it; it just trusted you.
So, assertions don’t validate — they just assume.
✅ 7. Safe Use of Type Assertion
Use type assertions only when you’re sure about the type.
If you’re not sure, it’s better to narrow types safely using typeof, instanceof, or condition checks.
Example:
function printLength(value: string | number) {
if (typeof value === "string") {
console.log(value.length); // Safe, TypeScript knows it's a string
} else {
console.log(value); // It's a number here
}
}
🧭 8. Quick Summary
| Concept | Meaning | Example |
|---|---|---|
| Type Inference | TypeScript automatically figures out the type | let x = "Hello" → inferred as string |
| Type Assertion | You manually tell TypeScript the type | value as string |
| Angle Bracket Syntax | Alternate form of assertion | <string>value |
| Key Rule | Don’t use assertion unless you’re sure about the type | ✅ Safe → as string, ❌ Unsafe → as number on a string |
💡 Final Thoughts
Type inference and type assertion help TypeScript strike a balance between convenience and control.
- Let TypeScript infer types whenever possible — it’s smart enough most of the time.
- Use assertions only when you’re confident about what you’re doing.
Mastering these two concepts will make your code cleaner, safer, and easier to debug, especially when you start using TypeScript with frameworks like React or Next.js.