{"id":113030,"date":"2023-04-22T09:00:48","date_gmt":"2023-04-22T03:30:48","guid":{"rendered":"https:\/\/data-flair.training\/blogs\/?p=113030"},"modified":"2023-04-22T10:22:29","modified_gmt":"2023-04-22T04:52:29","slug":"typescript-generics","status":"publish","type":"post","link":"https:\/\/data-flair.training\/blogs\/typescript-generics\/","title":{"rendered":"TypeScript Generics"},"content":{"rendered":"

A superset of JavaScript called TypeScript gives the language static typing. With TypeScript, developers can write code with fewer bugs and better maintainability. TypeScript generics take this further, allowing for even greater code reusability and flexibility. In this article, we’ll cover the basics of TypeScript generics, including generic constraints, generic interfaces, and generic classes.<\/p>\n

What Are Generics?<\/h3>\n

Generics are a way to write code that can work with various types. For example, let\u2019s say you have a function that returns the first element of an array:<\/p>\n

function DataFlair_firstElement(arr: any[]): any {\r\n return arr[0];\r\n}\r\n<\/pre>\n
This function works fine, but it\u2019s not very type-safe. It takes an array of any type and returns an element of any type. We can improve this function using generics:<\/p>\n
function DataFlair_firstElement<T>(arr: T[]): T {\r\n return arr[0];\r\n}\r\n<\/pre>\n
The <T> syntax declares a type parameter. When we call this function, we can specify the type of the array:<\/p>\n
const numArray = [1, 2, 3];\r\nconst firstNum = DataFlair_firstElement(numArray); \r\n\r\n\r\nconst strArray = ['a', 'b', 'c'];\r\nconst firstStr = DataFlair_firstElement(strArray);\r\n<\/pre>\n
Using generics, we’ve made our function type-safe and reusable with different arrays.<\/p>\n
TypeScript Generic Constraints<\/h3>\n
Sometimes we want to restrict the types that can be used with generics. For example, let\u2019s say we have a function that adds two numbers:<\/p>\n
function DataFlair_add(a: number, b: number): number {\r\n return a + b;\r\n}\r\n<\/pre>\n
We can make this function generic to work with other numeric types:<\/p>\n
function DataFlair_add<T extends number>(a: T, b: T): T {\r\n return a + b;\r\n}\r\n<\/pre>\n
The <T extends number> syntax is a generic constraint. It restricts the type parameter to be a subtype of the number type.<\/p>\n
Now we can call this function with different numeric types:<\/p>\n
const numSum = DataFlair_add(1, 2); \/\/ numSum is type number\r\n\r\nconst bigIntSum = DataFlair_add(100n, 200n); \/\/ bigIntSum is type bigint\r\n<\/pre>\n
However, if we try to call this function with a non-numeric type, we\u2019ll get a compile-time error:<\/p>\n
const strSum = DataFlairadd('a', 'b');\r\n<\/pre>\n
TypeScript Generic Interfaces<\/h3>\n
Interfaces in TypeScript are a way to define a contract for an object. We can make interfaces generic to work with different types of objects.<\/p>\n
For example, let\u2019s say we have an interface for a point in 2D space:<\/p>\n
interface DataFlair_Point {\r\n x: number;\r\n y: number;\r\n}\r\n<\/pre>\n
We can make this interface generic to work with different types of coordinates:<\/p>\n
interface DataFlair_Point<T> {\r\n x: T;\r\n y: T;\r\n}\r\n<\/pre>\n
Now we can create points with different types of coordinates:<\/p>\n
const intPoint: DataFlair_Point<number> = { x: 1, y: 2 };\r\n\r\nconst strPoint: DataFlair_Point<string> = { x: 'a', y: 'b' };\r\n<\/pre>\n
TypeScript Generic Classes<\/h3>\n
Classes in TypeScript are a way to define a blueprint for an object. We can make classes generic to work with different types of objects.<\/p>\n
For example, let\u2019s say we have a class for a DataFlair_stack:<\/p>\n
class DataFlair_Stack<T> {\r\n private elements: T[] = [];\r\n\r\n\r\n push(element: T) {\r\n   this.elements.push(element);\r\n }\r\n\r\n\r\n pop(): T {\r\n   return this.elements.pop();\r\n }\r\n}\r\n<\/pre>\n
The <T> syntax declares a type parameter for the DataFlair_stack. We can create a stack with different types of elements:<\/p>\n
const numStack = new DataFlair_Stack<number>();\r\nnumStack.push(1);\r\nnumStack.push(2);\r\nconst num1 = numStack.pop(); \/\/ num1 is type number\r\nconst num2 = numStack.pop(); \/\/ num2 is type number\r\n\r\n\r\nconst strStack = new DataFlair_Stack<string>();\r\nstrStack.push('a');\r\nstrStack.push('b');\r\nconst str1 = strStack.pop(); \/\/ str1 is type string\r\nconst str2 = strStack.pop(); \/\/ str2 is type string\r\n<\/pre>\n
By making the stack class generic, we\u2019ve made it reusable with different types of elements.<\/p>\n
Type aliases in TypeScript<\/h3>\n
Type aliases in TypeScript are a feature that allows you to create a new name for a type. They can be used to simplify complex types, improve code readability and maintainability, and make type definitions more reusable.<\/p>\n
Type aliases are created using the type keyword, followed by a name and an equal sign, followed by the type that the alias will represent. For example, the following code creates a type alias DataFlair_Person for an object type with name and age properties:<\/p>\n
type DataFlair_Person = {\r\n name: string;\r\n age: number;\r\n};\r\n<\/pre>\n
Once the type alias is defined, it can be used anywhere a type is expected. For example, you could use it to define a function parameter like this:<\/p>\n
function greet(person: DataFlair_Person) {\r\n console.log(`Hello, ${person.name}!`);\r\n}\r\n<\/pre>\n
You can also create type aliases for more complex types, including union, intersection, and function types. Type aliases can also be generic, allowing you to create reusable type definitions that can be used with different types.<\/p>\n
Overall, type aliases are a powerful tool that can help improve code readability and maintainability in TypeScript projects.<\/p>\n
Extend Keyword in TypeScript<\/h3>\n
In TypeScript, you can use the extends keyword to create generic types that extend or inherit from other types. This allows you to define more specific types that include additional properties or methods while still maintaining the original type’s structure.<\/p>\n
Here’s an example of using extends in generics:<\/p>\n
interface DataFlair_Shape {\r\n area: number;\r\n}\r\n\r\ninterface Square extends DataFlair_Shape {\r\n sideLength: number;\r\n}\r\n\r\nfunction calculateArea<T extends DataFlair_Shape>(shape: T): number {\r\n return shape.area;\r\n}\r\n\r\nconst square: Square = { area: 16, sideLength: 4 };\r\nconst area = calculateArea(square); \/\/ returns 16\r\n<\/pre>\n
Output<\/strong> –<\/p>\n
16<\/p>\n
This example defines an interface DataFlair_Shape that includes a single property area. We then define another interface Square that extends DataFlair_Shape and adds a property sideLength.<\/p>\n
We then define a function calculateArea that takes a generic type T that extends DataFlair_Shape and returns its area property.<\/p>\n
Finally, we create an instance of Square and pass it to calculateArea, which correctly returns its area property.<\/p>\n
Using extends in generics allows you to create more specific types that inherit properties and methods from more generic types. This can help improve code organization, reduce duplication, and increase type safety in TypeScript projects.<\/p>\n
Prerequisites<\/h3>\n
Before using generics in TypeScript, it’s important to understand basic TypeScript syntax, including interfaces, classes, and functions. You should also be familiar with TypeScript’s type system, including basic types like string, number, boolean, and any, and more advanced types like union and intersection types.<\/p>\n
Once you have a good foundation in TypeScript, you can learn about generics. Generics allow you to create reusable code that can work with various data types. They’re particularly useful for creating functions and classes that work with arrays or collections of data.<\/p>\n
To use generics in TypeScript, you need to define a generic type parameter. You can use this placeholder type throughout your code to represent any data type. You define the generic type parameter using angle brackets (<>) and a single uppercase letter, like T.<\/p>\n
Here’s an example of a generic function that takes an array of values of any type and returns the first value in the array:<\/p>\n
function DataFlair_first<T>(array: T[]): T | undefined {\r\n return array[0];\r\n}\r\n<\/pre>\n
In this example, we define a generic type parameter T, which we use to represent the data type in the array. We then use the [] syntax to indicate that the function takes an array of values of type T. The function returns the first value in the array, which has the same type as the array elements (T).<\/p>\n
Prerequisites for using generics in TypeScript include a strong understanding of basic TypeScript syntax and the ability to create and work with interfaces, classes, and functions. Once you have these skills, you can learn about generics and how to use them to create reusable, type-safe code.<\/p>\n
Creating Conditional Types with Generics<\/h3>\n
In TypeScript, conditional types allow you to define types that depend on a condition or a set of conditions. Conditional types are created using the extends keyword and can be used to create more specific types based on the properties or values of other types.<\/p>\n
Here’s an example of a conditional type that creates a more specific type based on the properties of another type:<\/p>\n
type DataFlair_HasName<T> = T extends { name: string } ? true : false;\r\n\r\ninterface Person {\r\n name: string;\r\n age: number;\r\n}\r\n\r\nconst personHasName: DataFlair_HasName<Person> = true;\r\n<\/pre>\n
In this example, we define a type DataFlair_HasName that takes a generic type parameter T. We then use the extends keyword to create a condition that checks if T has a property name of the type string. If the condition is true, the type resolves to true; otherwise, it resolves to false.<\/p>\n
We then define an interface Person with a name property of type string and an age property of type number. We create a variable personHasName that is of type DataFlair_HasName<Person>. Since Person has a name property, personHasName is of type true.<\/p>\n
Using conditional types with generics can be a powerful tool in TypeScript, allowing you to create more specific types based on the properties or values of other types. This can help improve type safety and code readability in TypeScript projects.<\/p>\n
Advantage of Generics in TypeScript<\/h3>\n
Generics in TypeScript has several advantages that make them a powerful tool for creating reusable, type-safe code:<\/p>\n
1. Reusability:<\/strong> Generics allow you to create code that can work with a variety of different data types. This makes your code more reusable and reduces the need for duplication.<\/p>\n
2. Type safety:<\/strong> By using generics, you can ensure that your code is type-safe. This means that you can catch type errors at compile time rather than at runtime, saving you time and improving your code’s overall quality.<\/p>\n
3. Code readability:<\/strong> Generics can make your code more readable by clearly indicating the data types your code is working with. This can help make your code easier to understand and maintain.<\/p>\n
4. Flexibility:<\/strong> Generics can create a wide range of data structures and algorithms, from simple functions that work with arrays to complex class hierarchies that handle complex data types.<\/p>\n
Overall, the advantages of generics in TypeScript make them an essential tool for creating robust, scalable, and maintainable code. Whether you’re working on a small project or a large enterprise application, generics can help you write better code that is easier to read, maintain, and debug.<\/p>\n
Conclusion<\/h3>\n
TypeScript generic is a powerful tool for writing reusable and flexible code. They allow us to write functions, interfaces, and classes that work with various types. We can use generic constraints to restrict the types used with generics and generic interfaces. and classes. It is to define contracts and blueprints for objects of different types.<\/p>\n
Using TypeScript generics, we can write type-safe code that is easier to maintain and extend. If you still need to use generics in your TypeScript code, try them and see how they can improve your code reusability and flexibility.<\/p>\n","protected":false},"excerpt":{"rendered":"
A superset of JavaScript called TypeScript gives the language static typing. With TypeScript, developers can write code with fewer bugs and better maintainability. TypeScript generics take this further, allowing for even greater code reusability...<\/p>\n","protected":false},"author":581,"featured_media":113151,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[27319],"tags":[27368],"class_list":["post-113030","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-typescript-tutorials","tag-typescript-generics"],"yoast_head":"\nTypeScript Generics - DataFlair<\/title>\n<meta name=\"description\" content=\"TypeScript generics is a powerful tool for writing reusable and flexible code. They allow to write functions, interfaces, and classes.\" \/>\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\/typescript-generics\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"TypeScript Generics - DataFlair\" \/>\n<meta property=\"og:description\" content=\"TypeScript generics is a powerful tool for writing reusable and flexible code. They allow to write functions, interfaces, and classes.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/data-flair.training\/blogs\/typescript-generics\/\" \/>\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-22T03:30:48+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-04-22T04:52:29+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2023\/03\/typescript-generics.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":"TypeScript Generics - DataFlair","description":"TypeScript generics is a powerful tool for writing reusable and flexible code. They allow to write functions, interfaces, and classes.","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\/typescript-generics\/","og_locale":"en_US","og_type":"article","og_title":"TypeScript Generics - DataFlair","og_description":"TypeScript generics is a powerful tool for writing reusable and flexible code. They allow to write functions, interfaces, and classes.","og_url":"https:\/\/data-flair.training\/blogs\/typescript-generics\/","og_site_name":"DataFlair","article_publisher":"https:\/\/www.facebook.com\/DataFlairWS\/","article_published_time":"2023-04-22T03:30:48+00:00","article_modified_time":"2023-04-22T04:52:29+00:00","og_image":[{"width":1200,"height":628,"url":"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2023\/03\/typescript-generics.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\/typescript-generics\/#article","isPartOf":{"@id":"https:\/\/data-flair.training\/blogs\/typescript-generics\/"},"author":{"name":"DataFlair Team","@id":"https:\/\/data-flair.training\/blogs\/#\/schema\/person\/c187795dc82ab948373cca526df7c445"},"headline":"TypeScript Generics","datePublished":"2023-04-22T03:30:48+00:00","dateModified":"2023-04-22T04:52:29+00:00","mainEntityOfPage":{"@id":"https:\/\/data-flair.training\/blogs\/typescript-generics\/"},"wordCount":1485,"commentCount":0,"publisher":{"@id":"https:\/\/data-flair.training\/blogs\/#organization"},"image":{"@id":"https:\/\/data-flair.training\/blogs\/typescript-generics\/#primaryimage"},"thumbnailUrl":"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2023\/03\/typescript-generics.webp","keywords":["TypeScript Generics"],"articleSection":["TypeScript Tutorials"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/data-flair.training\/blogs\/typescript-generics\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/data-flair.training\/blogs\/typescript-generics\/","url":"https:\/\/data-flair.training\/blogs\/typescript-generics\/","name":"TypeScript Generics - DataFlair","isPartOf":{"@id":"https:\/\/data-flair.training\/blogs\/#website"},"primaryImageOfPage":{"@id":"https:\/\/data-flair.training\/blogs\/typescript-generics\/#primaryimage"},"image":{"@id":"https:\/\/data-flair.training\/blogs\/typescript-generics\/#primaryimage"},"thumbnailUrl":"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2023\/03\/typescript-generics.webp","datePublished":"2023-04-22T03:30:48+00:00","dateModified":"2023-04-22T04:52:29+00:00","description":"TypeScript generics is a powerful tool for writing reusable and flexible code. They allow to write functions, interfaces, and classes.","breadcrumb":{"@id":"https:\/\/data-flair.training\/blogs\/typescript-generics\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/data-flair.training\/blogs\/typescript-generics\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/data-flair.training\/blogs\/typescript-generics\/#primaryimage","url":"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2023\/03\/typescript-generics.webp","contentUrl":"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2023\/03\/typescript-generics.webp","width":1200,"height":628,"caption":"typescript generics"},{"@type":"BreadcrumbList","@id":"https:\/\/data-flair.training\/blogs\/typescript-generics\/#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":"TypeScript Generics"}]},{"@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\/113030","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=113030"}],"version-history":[{"count":5,"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/posts\/113030\/revisions"}],"predecessor-version":[{"id":113152,"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/posts\/113030\/revisions\/113152"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/media\/113151"}],"wp:attachment":[{"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/media?parent=113030"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/categories?post=113030"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/tags?post=113030"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}