One of the essential features of TypeScript is typecasting, which allows developers to convert one data type to another. Whether converting a string to a number, an object to a particular class, or an interface to another, type casting can be used in a variety of situations. This article will provide an overview of typecasting in TypeScript, including its syntax, types of casting, and examples of how to use it.<\/p>\n
Type Casting in TypeScript is performed using the “as” keyword. The “as” keyword is followed by the target data type enclosed in angle brackets. Here is an example of how to perform typecasting in TypeScript:<\/p>\n
let DataFlair_myVariable: any = '123';\r\nlet DataFlair_myNumber: number = DataFlair_myVariable as number;\r\nconsole.log(typeof DataFlair_myNumber); \/\/ \"number\"\r\n<\/pre>\nIn the above example, we first declared a variable “DataFlair_myVariable” of type “any” and assigned it a string value “123”. We then typecasted “DataFlair_myVariable” using the “as” keyword. We specified the target data type as “number.” The result of the type casting is assigned to “DataFlair_myNumber” variable, which now has a data type of “number.” We then printed the type of “DataFlair_myNumber” using the “typeof” operator, which returns “number.”<\/p>\n
Types of Type Casting<\/h3>\n
TypeScript provides two types of type casting: explicit type casting and implicit type casting.<\/p>\n
Explicit Type Casting<\/h4>\n
Explicit type casting is when a developer specifies the target data type using the “as” keyword. It is useful when a developer wants to convert a value to a specific data type. Here is an example of how to perform explicit typecasting in TypeScript:<\/p>\n
let DataFlair_myVariable: any = '123';\r\nlet DataFlair_myNumber: number = DataFlair_myVariable as number;\r\nconsole.log(typeof DataFlair_myNumber); \/\/ \"number\"\r\n<\/pre>\nIn the above example, we explicitly cast “DataFlair_myVariable” to a “number” data type using the “as” keyword.<\/p>\n
Implicit Type Casting<\/h4>\n
Implicit type casting is when TypeScript automatically converts one data type to another without the developer’s explicit instructions. It is useful when a developer wants to avoid type errors and improve code readability. Here is an example of how to perform implicit typecasting in TypeScript:<\/p>\n
let DataFlair_myNumber: number = 123;\r\nlet DataFlair_myString: string =\r\n 'The value of myNumber is ' + DataFlair_myNumber;\r\nconsole.log(typeof DataFlair_myString); \/\/ \"string\"\r\n<\/pre>\nIn the above example, we implicitly cast “DataFlair_myNumber” to a “string” data type by concatenating it with another string value.<\/p>\n
Type Assertion<\/h3>\n
Type assertion is another way to perform typecasting in TypeScript. It is similar to explicit type casting but uses a different syntax. Type assertion can be performed in angle bracket syntax and “as” syntax.<\/p>\n
Angle Bracket Syntax<\/h4>\n
Angle bracket syntax is an older way of performing type assertion in TypeScript. It involves enclosing the value to be cast in angle brackets followed by the target data type. Here is an example of how to perform type assertion using angle bracket syntax:<\/p>\n
let DataFlair_myVariable: any = '123';\r\nlet DataFlair_myNumber: number = <number>DataFlair_myVariable;\r\nconsole.log(typeof DataFlair_myNumber); \/\/ \"number\"\r\n<\/pre>\nIn the above example, we used angle bracket syntax to perform type assertion on “DataFlair_myVariable” and cast it to a “number” data type.<\/p>\n
“As” Syntax<\/h4>\n
“As” syntax is a newer way of performing type assertion in TypeScript. It involves using the “as” keyword followed by the target data type. Here is an example of how to perform type assertion using “as” syntax:<\/p>\n
let DataFlair_myVariable: any = '123';\r\nlet DataFlair_myNumber: number = DataFlair_myVariable as number;\r\nconsole.log(typeof DataFlair_myNumber); \/\/ \"number\"\r\n<\/pre>\nIn the above example, we used “as” syntax to perform type assertion on “DataFlair_myVariable” and cast it to a “number” data type.<\/p>\n
Type Casting with Interfaces<\/h3>\n
Type casting can also be used with interfaces in TypeScript. Interfaces are used to specify an object’s structure. Type casting can be used to convert an object to a specific interface. Here is an example of how to use type casting with interfaces in TypeScript:<\/p>\n
interface DataFlair_Person {\r\n name: string;\r\n age: number;\r\n}\r\n\r\n\r\nlet myPerson: DataFlair_Person = { name: 'John', age: 25 };\r\nlet myObject: object = myPerson;\r\nlet myPersonAgain: DataFlair_Person = myObject as DataFlair_Person;\r\nconsole.log(myPersonAgain.name); \/\/ \"John\"\r\nconsole.log(myPersonAgain.age); \/\/ 25<\/pre>\nIn the above example, we defined an interface called “DataFlair_Person” that has two properties: “name” and “age.” We then declared an object “myPerson” that conforms to the “DataFlair_Person” interface. Then assigned “myPerson” to a variable “myObject” of type “object.” We then performed type casting on “myObject” and converted it to the “DataFlair_Person” interface using the “as” keyword. The result of the type casting is assigned to “myPersonAgain” variable, which now has a data type of “DataFlair_Person.” We then printed the “name” and “age” properties of “myPersonAgain” object.<\/p>\n
Type Casting with Classes<\/h3>\n
Type casting can also be used with classes in TypeScript. Classes are used to create objects with methods and properties. Type casting can be used to convert an object to a specific class. Here is an example of how to use type casting with classes in TypeScript:<\/p>\n
class DatFlair_Animal {\r\n name: string;\r\n constructor(name: string) {\r\n this.name = name;\r\n }\r\n}\r\n\r\n\r\nclass Dog extends DatFlair_Animal {\r\n breed: string;\r\n constructor(name: string, breed: string) {\r\n super(name);\r\n this.breed = breed;\r\n }\r\n}\r\n\r\n\r\nlet myAnimal: DatFlair_Animal = new DatFlair_Animal('Leo');\r\nlet myDog: Dog = myAnimal as Dog;\r\nconsole.log(myDog.name); \/\/ \"Leo\"\r\nconsole.log(myDog.breed); \/\/ undefined\r\n<\/pre>\nThe above example defined two classes: “DataFlair_Animal” and “Dog.” “Dog” class extends “DataFlair_Animal” class and adds a “breed” property. We then declared a “DataFlair_Animal” object “myAnimal” and assigned it to a variable of type “DataFlair_Animal.” We then performed type casting on “myAnimal” and converted it to “Dog” class using the “as” keyword. The result of the type casting is assigned to “myDog” variable, which now has a data type of “Dog.” We then printed the “name” and “breed” properties of “myDog” object. Since “myAnimal” object is not an instance of “Dog” class, the “breed” property is undefined.<\/p>\n
Why is type casting in typescript needed?<\/h3>\n
Type casting in TypeScript is needed when we want to treat an expression as a different type than what TypeScript has inferred it to be. This can happen when working with complex data types or when using external libraries that don’t have type definitions.<\/p>\n
For example, suppose we have an object with several properties, but we only need to use one of those properties:<\/p>\n
const DataFlair_person = { name: 'Alice', age: 30 };\r\nconsole.log(DataFlair_person.name);<\/pre>\nOutput<\/strong> –<\/p>\n
Alice<\/div>\nIn the above example, TypeScript infers the type of DataFlair_person to be an object with two properties: name of type string and age of type number. When we try to access the name property, TypeScript knows it exists and has a string type, so typecasting is unnecessary.<\/p>\n
However, if we were to use a library that doesn’t have type definitions, we might need to use type casting to treat the library’s output as a specific type:<\/p>\n
const result = someLibraryFunction();\r\nconst data = result as DataFlair_MyDataType;\r\n<\/pre>\nIn the above example, someLibraryFunction returns data of an unknown type, but we know it should conform to the DataFlair_MyDataType interface. By using type casting with the as keyword, we can treat the result as the desired type and ensure that TypeScript checks that the properties and methods we access are correct.<\/p>\n
Type casting can also be useful when working with union types or when dealing with generic types. It can help ensure the code is type-safe and prevent errors at compile time.<\/p>\n
Overall, typecasting in TypeScript is a powerful tool that can help ensure that the code is correct and type-safe. It is especially useful when working with external libraries or complex data types.<\/p>\n
Type Casting a number type to a string using \u2019unknown\u2019<\/h3>\n
TypeScript provides the unknown type to represent values of any type. When type casting a number type to a string using unknown, we first cast the number to be unknown and then to string. This ensures that TypeScript checks the type at runtime and prevents type-related errors.<\/p>\n
For example, suppose we have a variable num of type number, and we want to cast it to a string:<\/p>\n
let DataFlair_num: number = 42;\r\nlet DataFlair_str: string = DataFlair_num as unknown as string;\r\n<\/pre>\nIn the above example, we first cast DataFlair_num to be unknown using as unknown, then we cast it to string using as a string. This tells TypeScript to treat DataFlair_num as unknown, allowing it to perform runtime type checking and then treat the resulting value as a string.<\/p>\n
It is important to note that type casting with unknown can be less type-safe than casting with other types. This is because the unknown has no properties or methods that can be accessed without performing a type check.<\/p>\n
Overall, type casting a number type to a string using unknown can be useful in certain situations where type safety is a concern. However, using it carefully and only when necessary is important to prevent potential runtime errors.<\/p>\n
Casting with \u2018as\u2019<\/h3>\n
In TypeScript, the as keyword can be used for typecasting. It allows developers to explicitly convert a variable of one type to another, which can be useful when working with complex data types or when using external libraries that don’t have type definitions.<\/p>\n
For example, suppose we have a variable str of type string, but we need to treat it as a number:<\/p>\n
const DataFlair_str: string = '42';\r\nconst DataFlair_num: number = DataFlair_str as number;\r\n<\/pre>\nIn the above example, we use the as keyword to cast DataFlair_str to a number. This tells TypeScript to treat DataFlair_str like a number, allowing us to perform mathematical operations or pass it to functions that expect a number argument.<\/p>\n
Type casting with as can also be useful when working with union types, where a value could be of multiple types:<\/p>\n
type DataFlair_MyType = string | number;\r\n\r\n\r\nfunction myFunction(input: DataFlair_MyType): void {\r\n const DataFlair_str: string = input as string;\r\n console.log(DataFlair_str.length);\r\n}\r\n<\/pre>\nIn the above example, we define a type called DataFlair_MyType which could be a string or a number. In the myFunction function, we use the as keyword to cast input to a string, allowing us to access its length property. This ensures that TypeScript checks that the properties and methods we access are correct.<\/p>\n
Overall, type casting, as in TypeScript can be a powerful tool to help ensure the code is correct and type-safe. It is especially useful when working with external libraries or complex data types. However, using it carefully and only when necessary is important to prevent potential runtime errors.<\/p>\n
Conclusion<\/h3>\n
Type casting is a powerful feature in TypeScript that allows developers to convert one data type to another. Whether converting a string to a number, an object to a particular class, or an interface to another, type casting can be used in a variety of situations.TypeScript provides two types of type casting: explicit type casting and implicit type casting. Type casting can also be used with interfaces and classes in TypeScript. With the help of typecasting, developers can write type-safe and maintainable code.<\/p>\n","protected":false},"excerpt":{"rendered":"
One of the essential features of TypeScript is typecasting, which allows developers to convert one data type to another. Whether converting a string to a number, an object to a particular class, or an...<\/p>\n","protected":false},"author":581,"featured_media":113082,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[27319],"tags":[27363],"class_list":["post-112923","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-typescript-tutorials","tag-type-casting-in-typescript"],"yoast_head":"\n
Type Casting in TypeScript - DataFlair<\/title>\n<meta name=\"description\" content=\"Type casting is a powerful feature in TypeScript that allows developers to convert one data type to another. Learn more about it.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/data-flair.training\/blogs\/type-casting-in-typescript\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Type Casting in TypeScript - DataFlair\" \/>\n<meta property=\"og:description\" content=\"Type casting is a powerful feature in TypeScript that allows developers to convert one data type to another. Learn more about it.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/data-flair.training\/blogs\/type-casting-in-typescript\/\" \/>\n<meta property=\"og:site_name\" content=\"DataFlair\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/DataFlairWS\/\" \/>\n<meta property=\"article:published_time\" content=\"2023-04-20T03:30:28+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-04-20T05:23:55+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2023\/03\/typescript-casting.webp\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"628\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/webp\" \/>\n<meta name=\"author\" content=\"DataFlair Team\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@DataFlairWS\" \/>\n<meta name=\"twitter:site\" content=\"@DataFlairWS\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"DataFlair Team\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"8 minutes\" \/>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Type Casting in TypeScript - DataFlair","description":"Type casting is a powerful feature in TypeScript that allows developers to convert one data type to another. Learn more about it.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/data-flair.training\/blogs\/type-casting-in-typescript\/","og_locale":"en_US","og_type":"article","og_title":"Type Casting in TypeScript - DataFlair","og_description":"Type casting is a powerful feature in TypeScript that allows developers to convert one data type to another. Learn more about it.","og_url":"https:\/\/data-flair.training\/blogs\/type-casting-in-typescript\/","og_site_name":"DataFlair","article_publisher":"https:\/\/www.facebook.com\/DataFlairWS\/","article_published_time":"2023-04-20T03:30:28+00:00","article_modified_time":"2023-04-20T05:23:55+00:00","og_image":[{"width":1200,"height":628,"url":"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2023\/03\/typescript-casting.webp","type":"image\/webp"}],"author":"DataFlair Team","twitter_card":"summary_large_image","twitter_creator":"@DataFlairWS","twitter_site":"@DataFlairWS","twitter_misc":{"Written by":"DataFlair Team","Est. reading time":"8 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/data-flair.training\/blogs\/type-casting-in-typescript\/#article","isPartOf":{"@id":"https:\/\/data-flair.training\/blogs\/type-casting-in-typescript\/"},"author":{"name":"DataFlair Team","@id":"https:\/\/data-flair.training\/blogs\/#\/schema\/person\/c187795dc82ab948373cca526df7c445"},"headline":"Type Casting in TypeScript","datePublished":"2023-04-20T03:30:28+00:00","dateModified":"2023-04-20T05:23:55+00:00","mainEntityOfPage":{"@id":"https:\/\/data-flair.training\/blogs\/type-casting-in-typescript\/"},"wordCount":1590,"commentCount":0,"publisher":{"@id":"https:\/\/data-flair.training\/blogs\/#organization"},"image":{"@id":"https:\/\/data-flair.training\/blogs\/type-casting-in-typescript\/#primaryimage"},"thumbnailUrl":"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2023\/03\/typescript-casting.webp","keywords":["Type Casting in TypeScript"],"articleSection":["TypeScript Tutorials"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/data-flair.training\/blogs\/type-casting-in-typescript\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/data-flair.training\/blogs\/type-casting-in-typescript\/","url":"https:\/\/data-flair.training\/blogs\/type-casting-in-typescript\/","name":"Type Casting in TypeScript - DataFlair","isPartOf":{"@id":"https:\/\/data-flair.training\/blogs\/#website"},"primaryImageOfPage":{"@id":"https:\/\/data-flair.training\/blogs\/type-casting-in-typescript\/#primaryimage"},"image":{"@id":"https:\/\/data-flair.training\/blogs\/type-casting-in-typescript\/#primaryimage"},"thumbnailUrl":"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2023\/03\/typescript-casting.webp","datePublished":"2023-04-20T03:30:28+00:00","dateModified":"2023-04-20T05:23:55+00:00","description":"Type casting is a powerful feature in TypeScript that allows developers to convert one data type to another. Learn more about it.","breadcrumb":{"@id":"https:\/\/data-flair.training\/blogs\/type-casting-in-typescript\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/data-flair.training\/blogs\/type-casting-in-typescript\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/data-flair.training\/blogs\/type-casting-in-typescript\/#primaryimage","url":"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2023\/03\/typescript-casting.webp","contentUrl":"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2023\/03\/typescript-casting.webp","width":1200,"height":628,"caption":"typescript casting"},{"@type":"BreadcrumbList","@id":"https:\/\/data-flair.training\/blogs\/type-casting-in-typescript\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Blog Home","item":"https:\/\/data-flair.training\/blogs\/"},{"@type":"ListItem","position":2,"name":"TypeScript Tutorials","item":"https:\/\/data-flair.training\/blogs\/category\/typescript-tutorials\/"},{"@type":"ListItem","position":3,"name":"Type Casting in TypeScript"}]},{"@type":"WebSite","@id":"https:\/\/data-flair.training\/blogs\/#website","url":"https:\/\/data-flair.training\/blogs\/","name":"DataFlair","description":"Learn Today. Lead Tomorrow.","publisher":{"@id":"https:\/\/data-flair.training\/blogs\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/data-flair.training\/blogs\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/data-flair.training\/blogs\/#organization","name":"DataFlair","url":"https:\/\/data-flair.training\/blogs\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/data-flair.training\/blogs\/#\/schema\/logo\/image\/","url":"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2016\/07\/Data-Flair.png","contentUrl":"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2016\/07\/Data-Flair.png","width":106,"height":48,"caption":"DataFlair"},"image":{"@id":"https:\/\/data-flair.training\/blogs\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/DataFlairWS\/","https:\/\/x.com\/DataFlairWS","https:\/\/www.linkedin.com\/company\/dataflair-web-services-pvt-ltd\/","https:\/\/www.youtube.com\/user\/DataFlairWS"]},{"@type":"Person","@id":"https:\/\/data-flair.training\/blogs\/#\/schema\/person\/c187795dc82ab948373cca526df7c445","name":"DataFlair Team","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/2302ebc438084d2f1f993edc1996a0aae01332e81f3227cba8df0c48ec010ca4?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/2302ebc438084d2f1f993edc1996a0aae01332e81f3227cba8df0c48ec010ca4?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/2302ebc438084d2f1f993edc1996a0aae01332e81f3227cba8df0c48ec010ca4?s=96&d=mm&r=g","caption":"DataFlair Team"},"description":"DataFlair Team provides high-impact content on programming, Java, Python, C++, DSA, AI, ML, data Science, Android, Flutter, MERN, Web Development, and technology. We make complex concepts easy to grasp, helping learners of all levels succeed in their tech careers.","url":"https:\/\/data-flair.training\/blogs\/author\/dfteam6\/"}]}},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/posts\/112923","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/users\/581"}],"replies":[{"embeddable":true,"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/comments?post=112923"}],"version-history":[{"count":4,"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/posts\/112923\/revisions"}],"predecessor-version":[{"id":113083,"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/posts\/112923\/revisions\/113083"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/media\/113082"}],"wp:attachment":[{"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/media?parent=112923"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/categories?post=112923"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/tags?post=112923"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}