Working with TypeScript has always been a joy for me, especially when it comes to manipulating types.
Type casting (also called type assertion) is one of those powerful features that I use almost daily in my TypeScript projects.
It allows me to tell the compiler that I know better about the type of a variable than what TypeScript can infer.
In this article, I will explain various ways to cast types in TypeScript, along with practical examples that you can apply immediately to your projects. Let’s dive in!
What is Type Casting in TypeScript?
Type casting in TypeScript is a way to override the compiler’s inferred type with a specific type that you, as a developer, know is correct. This is particularly useful when working with DOM elements, third-party libraries, or when converting between different types.
TypeScript provides multiple ways to cast types, and understanding when to use each method can significantly enhance your code quality and developer experience.
Method 1: Using the ‘as’ Keyword in TypeScript
The as keyword is the most common and recommended way to cast types in TypeScript. It’s clean, simple, and works in most scenarios.
// Example: Casting a DOM element
const button = document.getElementById('submit-btn') as HTMLButtonElement;
// Now you can access button-specific properties without TypeScript errors
button.disabled = true;When working on a recent e-commerce project, I needed to handle form submissions. Using the as keyword allowed me to type my DOM elements properly:
function handleSubmit(event: Event) {
event.preventDefault();
const form = event.target as HTMLFormElement;
const emailInput = form.elements.namedItem('email') as HTMLInputElement;
// Now I can safely access the value property
const email = emailInput.value;
// Send data to API...
}The as keyword is especially useful when TypeScript can’t determine the exact type from the context, such as when working with the DOM or JSON data.
Method 2: Using Angle Bracket Syntax in TypeScript
An alternative to the as keyword is the angle bracket syntax. This was the original way to cast in TypeScript, but it’s less commonly used now.
// Example: Casting using angle brackets
const price = <number>JSON.parse('42.99');
// Now price is treated as a number
const tax = price * 0.08;There’s one important limitation: angle bracket syntax doesn’t work in JSX files (like in React) because it conflicts with the JSX syntax. That’s why the as keyword is generally preferred.
Method 3: Double Casting in TypeScript
Sometimes you might need to perform a double cast, especially when dealing with the unknown type or when TypeScript is being particularly strict.
// Example: Double casting from unknown to a specific type
const userData = {} as unknown as UserProfile;When working on a data visualization dashboard, I needed to process API data with an uncertain structure:
interface SalesData {
quarter: string;
revenue: number;
growth: number;
}
// Example fetch function
async function fetchQuarterlySales(): Promise<{ data: any }> {
// Simulate API
return {
data: [
{ quarter: "Q1", revenue: 10000, growth: 5 },
{ quarter: "Q2", revenue: 12000, growth: 8 },
],
};
}
async function processSalesData() {
try {
const apiResponse = await fetchQuarterlySales();
console.log("API Response:", apiResponse);
// Type assertion with runtime validation
if (!Array.isArray(apiResponse.data)) {
throw new Error("API data is not an array");
}
const salesData = apiResponse.data as SalesData[];
console.log("Typed Sales Data:", salesData);
const totalRevenue = salesData.reduce((sum, item) => sum + item.revenue, 0);
console.log("Total Revenue:", totalRevenue);
return totalRevenue;
} catch (error) {
console.error("Error processing sales data:", error);
return 0;
}
}
// Call the function to test
processSalesData();
This approach should be used sparingly, as it bypasses TypeScript’s type checking twice, which could lead to runtime errors if not used carefully.
Method 4: Using Type Guards Before Casting in TypeScript
A safer approach than direct casting is to use type guards to check the type at runtime before casting:
function processValue(value: unknown) {
// Type guard
if (typeof value === 'string') {
// Safe to cast now
const stringValue = value as string;
return stringValue.toUpperCase();
}
return null;
}In a recent project involving user data processing, I used type guards extensively:
interface Customer {
id: string;
name: string;
subscription: {
plan: 'basic' | 'premium';
expiryDate: string;
};
}
function processCustomerData(data: unknown): Customer | null {
console.log("Received data:", data);
if (!data || typeof data !== 'object') {
console.log("Data is not an object or is null.");
return null;
}
const obj = data as any;
if (typeof obj.id !== 'string') {
console.log("Invalid or missing 'id'.");
return null;
}
if (typeof obj.name !== 'string') {
console.log("Invalid or missing 'name'.");
return null;
}
if (!obj.subscription || typeof obj.subscription !== 'object') {
console.log("Missing or invalid 'subscription'.");
return null;
}
if (typeof obj.subscription.plan !== 'string' ||
(obj.subscription.plan !== 'basic' && obj.subscription.plan !== 'premium')) {
console.log("Invalid 'plan' value:", obj.subscription.plan);
return null;
}
if (typeof obj.subscription.expiryDate !== 'string') {
console.log("Invalid or missing 'expiryDate'.");
return null;
}
console.log("Validation successful, returning Customer object.");
return obj as Customer;
}
// Example test case:
const testData = {
id: "123",
name: "Alice",
subscription: {
plan: "premium",
expiryDate: "2025-12-31"
}
};
const customer = processCustomerData(testData);
console.log("Processed Customer:", customer);
This approach combines runtime checks with type casting for maximum safety.
Method 5: Using the satisfies Operator (TypeScript 4.9+) in TypeScript
The satisfies operator, introduced in TypeScript 4.9, allows you to verify that a value matches a type without changing the inferred type:
type ColorMap = {
red: string;
green: string;
blue: string;
};
// Check that the object satisfies ColorMap without changing its inferred type
const colors = {
red: '#FF0000',
green: '#00FF00',
blue: '#0000FF',
yellow: '#FFFF00' // Extra property is fine
} satisfies Partial<ColorMap>;
// TypeScript still knows the exact shape
colors.yellow; // Works fineWhile not exactly type casting, satisfies provides a way to ensure type compatibility without losing type information, which can be better than casting in many scenarios.
Common Mistakes and Best Practices in TypeScript
Mistake 1: Unnecessary Casting
One common mistake I’ve seen developers make (and have made myself) is casting when TypeScript could already infer the correct type:
// Unnecessary cast
const numbers = [1, 2, 3] as number[];
// TypeScript already knows this is number[]
const numbers = [1, 2, 3];Always let TypeScript infer types when possible to avoid redundant code.
Mistake 2: Casting without Validation
Another mistake is casting blindly without runtime validation:
// Dangerous - no validation
const user = JSON.parse(localStorage.getItem('user') || '{}') as User;
// Better approach
const userData = JSON.parse(localStorage.getItem('user') || '{}');
if (isUser(userData)) { // Custom type guard function
const user = userData as User;
// Now safe to use
}Best Practice: Use Casting as a Last Resort
Try to structure your code so that TypeScript can infer types correctly. Use casting only when necessary, such as:
- When working with DOM APIs
- When integrating with libraries that don’t have proper type definitions
- When dealing with data from external sources like APIs
TypeScript Cast vs Type Conversion
It’s important to understand that TypeScript casting is different from JavaScript type conversion:
// TypeScript casting - only affects compile-time type checking
const strValue = 42 as unknown as string;
// strValue is still a number at runtime!
// JavaScript conversion - actually changes the value at runtime
const jsStrValue = String(42);
// jsStrValue is actually a string at runtimeIn a real-world analytics project, I learned this distinction the hard way:
// What I tried (doesn't work as expected)
const visitorCount = apiData.visitors as string;
localStorage.setItem('visitorCount', visitorCount);
// What works (actual conversion)
const visitorCount = String(apiData.visitors);
localStorage.setItem('visitorCount', visitorCount);TypeScript casting only tells the compiler to treat a value as a different type – it doesn’t perform any runtime conversion!
Conclusion
I hope you found this guide helpful. Type casting in TypeScript is a powerful tool that helps us work with values whose types can’t be easily inferred by the compiler.
The as keyword is the most common method, but we also have several other techniques, such as angle brackets, double casting, and using type guards before casting.
Other TypeScript articles you may also like:
- Convert a Number to a String in TypeScript
- Deep Clone an Object in TypeScript
- Exception Handling in TypeScript
I am Bijay Kumar, a Microsoft MVP in SharePoint. Apart from SharePoint, I started working on Python, Machine learning, and artificial intelligence for the last 5 years. During this time I got expertise in various Python libraries also like Tkinter, Pandas, NumPy, Turtle, Django, Matplotlib, Tensorflow, Scipy, Scikit-Learn, etc… for various clients in the United States, Canada, the United Kingdom, Australia, New Zealand, etc. Check out my profile.
