typescript type assignment

TypeScript: Mastering Type Assignment and Type Inference

TypeScript introduced static typing, enabling developers to specify the types of variables, function parameters, and return values.

TypeScript, a superset of JavaScript, introduces static typing, enabling developers to specify the types of variables, function parameters, and return values. This capability significantly enhances code quality and developer productivity by catching errors early in the development process. Two fundamental concepts in TypeScript's type system are type assignment and type inference. Understanding these concepts is crucial for leveraging TypeScript's full potential to create robust and error-resistant applications.

Type Assignment

Type assignment in TypeScript is straightforward: it allows developers to explicitly specify the type of a variable, function parameter, or return value. This explicit typing helps catch type-related errors during compilation, long before the code is executed.

Syntax and Usage

Type assignment is done using a colon ( : ) followed by the type. Here are a few examples:

In these examples, userName is explicitly declared as a string , isLoggedIn as a boolean , and userAge as a number . The greet function expects a string parameter and is also expected to return a string .

Type Inference

Type inference allows TypeScript to automatically deduce the types of variables and expressions when they are not explicitly provided. This feature simplifies the code by reducing the verbosity of type annotations, without sacrificing the benefits of static typing.

How Type Inference Works

TypeScript's type inference comes into play in several scenarios, such as variable initialization and default function parameters. Here's an example:

In these cases, TypeScript infers the types based on the initial values. userId is inferred to be a number , isAdmin a boolean , and the multiply function's return type is inferred as number .

Best Practices for Type Assignment and Inference

While TypeScript's type inference is powerful, relying solely on inference can sometimes lead to less readable code, especially in complex scenarios. Here are some best practices:

• Use explicit types for public API boundaries : This includes exported functions, classes, and interfaces. Explicit types improve documentation and make your code easier to understand for other developers.
• Leverage type inference for local variables : For simple, internal code blocks, let TypeScript infer the types of local variables to reduce verbosity.
• Prefer const over let for immutable values : This makes your intention clear and allows TypeScript to infer the type more accurately.

TypeScript's type assignment and type inference are two pillars that support writing clear, error-free code. By combining explicit type annotations with TypeScript's intelligent type inference, developers can enjoy the best of both worlds: the flexibility of JavaScript with the robustness of a statically-typed language. Whether you're a seasoned TypeScript developer or just starting out, mastering these concepts is key to unlocking the full power of TypeScript in your projects.

For those looking to dive deeper into TypeScript and explore its vast capabilities, PullTheCode offers a wealth of resources, tutorials, and best practices. From type assignment and inference to advanced types and utility types, PullTheCode is your go-to destination for elevating your TypeScript skills.

Own your own Software!

Join PullTheCode and start building your own SaaS in minutes on a platform you own!

Advanced TypeScript 4.8 Concepts: Classes and Types

Originally published November 2018. Updated November 2022 . This article describes the features and functionality of TypeScript 4.8.

While TypeScript is very simple to understand when performing basic tasks, having a deeper understanding of how its type system works is critical to unlocking advanced language functionality. Once we know more about how TypeScript really works, we can leverage this knowledge to write cleaner, well-organized code.

If you find yourself having trouble with some of the concepts discussed in this article, try reading through the Definitive Guide to TypeScript first to make sure you’ve got a solid understanding of all the basics.

Behind the class keyword

In TypeScript, the class keyword provides a more familiar syntax for generating constructor functions and performing simple inheritance. It has roughly the same syntax as the ES2015 class syntax, but with a few key distinctions. Most notably, it allows for non-method properties, similar to this Stage 3 proposal . In fact, declaration of each instance method or property that will be used by the class is mandatory, as this will be used to build up a type for the value of this within the class.

But what if we couldn’t use the class keyword for some reason? How would we make an equivalent structure? Is it even possible? To answer these questions, let’s start with a basic example of a TypeScript class:

This archetypical class includes a static method, instance properties, and instance methods. When creating a new instance of this type, we’d call new Point(, ), and when referring to an instance of this type, we’d use the type Point . But how does this work? Aren’t the Point type and the Point constructor the same thing? Actually, no!

In TypeScript, types are overlaid onto JavaScript code through an entirely separate type system, rather than becoming part of the JavaScript code itself. This means that an interface (“type”) in TypeScript can—and often does—use the same identifier name as a variable in JavaScript without introducing a name conflict. (The only time that an identifier in the type system refers to a name within JavaScript is when the typeof operator is used.)

When using the class keyword in TypeScript, you are actually creating two things with the same identifier:

• A TypeScript interface containing all the instance methods and properties of the class; and
• A JavaScript variable with a different (anonymous) constructor function type

In other words, the example class above is effectively just shorthand for this code:

TypeScript also has support for ES6 Class expressions .

Adding type properties to classes

As mentioned above, adding non-method properties to classes in TypeScript is encouraged and required for the type system to understand what is available in the class.

In this example, className , color , and id have been defined as properties that can exist in the class. However, by default, className and id have no value. TypeScript can warn us about this with the --strictPropertyInitialization flag, which will throw an error if a class property is not assigned a value directly on the definition, or within the constructor. The value assigned to color is not actually assigned directly to the prototype . Instead, its value is assigned inside the constructor in the transpiled code, meaning that it is safe to assign non-primitive types directly without any risk of accidentally sharing those values with all instances of the class.

A common problem in complex applications is how to keep related sets of functionality grouped together. We already accomplish this by doing things like organizing code into modules for large sets of functionality, but what about things like types that are only applicable to a single class or interface? For example, what if we had an Animal class that accepted an attributes object:

In this code, we’ve succeeded in defining an anonymous type for the attributes parameter, but this is very brittle. What happens when we subclass Animal and want to add some extra properties? We’d have to write the entire type all over again. Or, what if we want to reference this type in multiple places, like within some code that instantiates an Animal ? We wouldn’t be able to, because it’s an anonymous type assigned to a function parameter.

To solve this problem, we can use an interface to define the constructor arguments and export that alongside the class.

Now, instead of having an anonymous object type dirtying up our code, we have a specific AnimalProperties interface that can be referenced by our code as well as any other code that imports Animal . This means that we can easily subclass our attributes parameter while keeping everything DRY and well-organized:

As mentioned earlier, using this pattern, we can also reference these types from other code by importing the interfaces where they are needed:

As of TypeScript 4.0, class property types can be inferred from their assignments in the constructor.  Take the following example:

Prior to TypeScript 4.0, this would cause sharpTeeth to be typed as any (or as an error if using a strict option). Now, however, TypeScript can infer that sharpTeeth is the same type as fangs , which is a number.  

Note that more complex initialization code, such as using an initialization function, will still require manual typing. In the following example, Typescript will not be able to infer types, and you will have to manually type the class properties.

Access Modifiers

Another welcome addition to classes in TypeScript is access modifiers that allow the developer to declare methods and properties as public , private , protected , and readonly . As of TS 3.8 , ECMAScript private fields are also supported via the # character resulting in a hard private field. Note that access modifiers cannot be used on hard private fields.

If no modifier is provided, then the method or property is assumed to be public which means it can be accessed internally or externally. If it is marked as private then the method or property is only accessible internally within the class. This modifier is only enforceable at compile-time, however. The TypeScript compiler will warn about all inappropriate uses, but it does nothing to stop inappropriate usage at runtime. protected implies that the method or property is accessible only internally within the class or any class that extends it but not externally. Finally, readonly will cause the TypeScript compiler to throw an error if the value of the property is changed after its initial assignment in the class constructor.

Defining class properties in constructors

Class properties can also be defined via class constructors.  Take the sharp teeth example:

Defining and initializing the sharpTeeth property  can be simplified by applying an access modifier to a constructor parameter:

The constructor is now defining the sharpTeeth property as public and initializes it to the value passed into the constructor or 2 by default.  Access to the new property can be further restricted by using protected or private .

Getters and Setters

Class properties can have getters and setters. A getter lets you compute a value to return as the property value, while a setter lets you run arbitrary code when the property is set.

Consider a class that represents a simple two-dimensional vector.

Now say we wanted to give this vector a length property. One option is to add a property that is kept up to date whenever the x or y values change.  We can monitor the x and y values using a setter .

Now, whenever x or y changes, our length is recalculated and ready to be used. Although this works, this is not a very practical solution. Recalculating the vector length whenever a property changes could potentially result in a lot of wasted computations. If we aren’t using the length property in our code, we don’t need to perform this calculation at all!

We can craft a more elegant solution using a getter . Using a getter, we’ll define a new read-only property, length , that is calculated on the fly, only when requested.

This is much nicer! Not only do we have less overall code here, but our length computation is only run when we need it.

Abstract Classes

TypeScript supports the abstract keyword for classes and their methods, properties, and accessors. An abstract class may have methods, properties, and accessors with no implementation, and cannot be constructed. See Abstract classes and methods and Abstract properties and accessors for more information.

Mixins and Compositional Classes

TypeScript 2.2 made some changes to make it easier to implement mixins and/or compositional classes. This was achieved by removing some of the restrictions on classes. For example, it’s possible to extend from a value that constructs an intersection type. They also changed the way that signatures on intersection types get combined.

Symbols, Decorators, and more

Symbols are unique, immutable identifiers that can be used as object keys. They offer the benefit of guaranteeing safety from naming conflicts. A symbol is a primitive value with the type of “symbol” ( typeof Symbol() === 'symbol' ).

When used as object keys, you don’t have to worry about name collision:

Strong type information in TS is only available for built-in symbols .

See our ES6 Symbols: Drumroll please! article for more information about Symbols.

Please note that decorators were added to TypeScript early and are only available with the --experimentalDecorators flag because they do not reflect the current state of the TC39 proposal . A decorator is a function that allows shorthand in-line modification of classes, properties, methods, and parameters . A method decorator receives 3 parameters:

• target : the object the method is defined on
• key : the name of the method
• descriptor : the object descriptor for the method

The decorator function can optionally return a property descriptor to install on the target object.

myDecorator would be invoked with the parameter values MyClass.prototype , 'myMethod' , and Object.getOwnPropertyDescriptor(MyClass.prototype, 'myMethod') .

TypeScript also supports computed property names and Unicode escape sequences .

See our TypeScript Decorators article for more information about decorators.

Interface vs. Type

Typescript has both interface and type aliases but they can often be used incorrectly. One of the key differences between the two of these is that an Interface is limited to describing Object structures whereas type can consist of Objects, primitives, union types, etc. 

Another difference here is their intended use. An interface primarily describes how something should be implemented and should be used. A type on the other hand is a definition of a type of data.

One benefit of types is you can use computed properties via the in keyword. This programmatically generates mapped types . You can take this example further and combine it with the use of a generic to define a type that requires the keys of the generic passed in to be specified.

Use a const after a literal to end up with a more precise type.  The value of fruitCodes above cannot be changed but the fields of the object can be changed.

Adding as const after the literal will make the object immutable.

In conclusion

Hopefully, this post has helped to demystify parts of the TypeScript type system and has given you some ideas about how you can exploit its advanced features to improve your own TypeScript application structure. If you have any other questions or want some expert assistance writing TypeScript applications, get in touch to chat with us today!

Is it time to assess if your team should be using TypeScript?

Connect with us for a free technical assessment and ask the experts whether typescript is the right choice for your application., receive our latest insights.

Sign up to receive our latest articles on JavaScript, TypeScript, and all things software development!

Advisory boards aren’t only for executives. Join the LogRocket Content Advisory Board today →

• Product Management
• Solve User-Reported Issues
• Find Issues Faster
• Optimize Conversion and Adoption
• Start Monitoring for Free

Types vs. interfaces in TypeScript

Editor’s Note: This article was updated on 28 June 2023 to include information about primitive types, union types, and function types. Here are some additional TypeScript resources to check out.

We have two options for defining types in TypeScript: types and interfaces. One of the most frequently asked questions about TypeScript is whether we should use interfaces or types.

The answer to this question, like many programming questions, is that it depends. In some cases, one has a clear advantage over the other, but in many cases, they are interchangeable.

In this article, I will discuss the key differences and similarities between types and interfaces and explore when it is appropriate to use each one.

Let’s start with the basics of types and interfaces.

Types and type aliases

type is a keyword in TypeScript that we can use to define the shape of data. The basic types in TypeScript include:

• Advanced types

Each has unique features and purposes, allowing developers to choose the appropriate one for their particular use case.

Type aliases in TypeScript mean “a name for any type.” They provide a way of creating new names for existing types. Type aliases don’t define new types; instead, they provide an alternative name for an existing type. Type aliases can be created using the type keyword, referring to any valid TypeScript type, including primitive types.

In the above example, we create two type aliases: MyNumber and User . We can use MyNumber as shorthand for a number type and use User type aliases to represent the type definition of a user.

When we say “types versus interfaces,” we refer to “type aliases versus interfaces.” For example, you can create the following aliases:

The two type aliases above represent alternative names for the same union type: string | number . While the underlying type is the same, the different names express different intents, which makes the code more readable.

Interfaces in TypeScript

In TypeScript, an interface defines a contract that an object must adhere to. Below is an example:

We can express the same Client contract definition using type annotations:

Differences between types and interfaces

For the above case, we can use either type or interface . But there are some scenarios in which using type instead of interface makes a difference.

Primitive types

Primitive types are inbuilt types in TypeScripts. They include number , string , boolean , null , and undefined types. We can use define a type alias for a primitive type as below:

We often combine primitive type with union type to define a type alias, to make the code more readable:

But, we can’t use an interface to alias a primitive type. The interface can only be used for an object type. Therefore, when we need to define a primitive type alias, we use type .

Union types

Union types allow us to describe values that can be one of several types and create unions of various primitive, literal, or complex types:

Union type can only be defined using type. There is no equivalent to a union type in an interface. But, it is possible to create a new union type from two interfaces, like so:

Function types

In TypeScript, a function type represents a function’s type signature. Using the type alias, we need to specify the parameters and the return type to define a function type:

We can also use an interface to represent the function type:

Both type and interface similarly define function types, except for a subtle syntax difference of interface using : vs. => when using type. Type is preferred in this case because it’s shorter and thus easier to read.

Another reason to use type for defining a function type is its capabilities that the interface lacks. When the function becomes more complex, we can take advantage of the advanced type features such as conditional types, mapped types, etc. Here’s an example:

Here, we define a type RefillHander with conditional type and union type. It provides a unified function signature for EV and ICE handlers in a type-safe manner. We can’t achieve the same with the interface as it doesn’t have the equivalent of conditional and union types.

Declaration merging

Declaration merging is a feature that is exclusive to interfaces. With declaration merging, we can define an interface multiple times, and the TypeScript compiler will automatically merge these definitions into a single interface definition.

In the following example, the two Client interface definitions are merged into one by the TypeScript compiler, and we have two properties when using the Client interface:

Type aliases can’t be merged in the same way. If you try to define the Client type more than once, as in the above example, an error will be thrown:

When used in the right places, declaration merging can be very useful. One common use case for declaration merging is to extend a third-party library’s type definition to fit the needs of a particular project.

If you need to merge declarations, interfaces are the way to go.

Over 200k developers use LogRocket to create better digital experiences

Extends vs. intersection

An interface can extend one or multiple interfaces. Using the extends keyword, a new interface can inherit all the properties and methods of an existing interface while also adding new properties.

For example, we can create a VIPClient interface by extending the Client interface:

To achieve a similar result for types, we need to use an intersection operator:

You can also extend an interface from a type alias with statically known members:

The exception is union types. If you try to extend an interface from a union type, you’ll receive the following error:

This error occurs because the union type is not statically known. The interface definition needs to be statically known at compile time.

Type aliases can extend interfaces using the intersection, as below:

In a nutshell, both interfaces and type aliases can be extended. An interface can extend a statically known type alias, while a type alias can extend an interface using an intersection operator.

Handling conflicts when extending

Another difference between types and interfaces is how conflicts are handled when you try to extend from one with the same property name.

When extending interfaces, the same property key isn’t allowed, as in the example below:

An error is thrown because a conflict is detected.

Type aliases handle conflicts differently. In the case of a type alias extending another type with the same property key, it will automatically merge all properties instead of throwing errors.

In the following example, the intersection operator merges the method signature of the two getPermission declarations, and a typeof operator is used to narrow down the union type parameter so that we can get the return value in a type-safe way:

It is important to note that the type intersection of two properties may produce unexpected results. In the example below, the name property for the extended type Staff becomes never , since it can’t be both string and number at the same time:

In summary, interfaces will detect property or method name conflicts at compile time and generate an error, whereas type intersections will merge the properties or methods without throwing errors. Therefore, if we need to overload functions, type aliases should be used.

Implementing classes using interfaces or type aliases

In TypeScript, we can implement a class using either an interface or a type alias:

As shown above, both interfaces and type aliases can be used to implement a class similarly; the only difference is that we can’t implement a union type.

In the above example, the TypeScript compiler throws an error because a class represents a specific data shape, but a union type can be one of several data types.

Working with tuple types

In TypeScript, the tuple type allows us to express an array with a fixed number of elements, where each element has its data type. It can be useful when you need to work with arrays of data with a fixed structure:

Interfaces don’t have direct support for tuple types. Although we can create some workarounds like in the example below, it is not as concise or readable as using the tuple type:

Advanced type features

TypeScript provides a wide range of advanced type features that can’t be found in interfaces. Some of the unique features in TypeScript include:

• Type inferences: Can infer the type of variables and functions based on their usage. This reduces the amount of code and improves readability
• Conditional types: Allow us to create complex type expressions with conditional behaviors that depend on other types
• Type guards : Used to write sophisticated control flow based on the type of a variable
• Mapped types: Transforms an existing object type into a new type
• Utility types: A set of out-of-the-box utilities that help to manipulate types

TypeScript’s typing system constantly evolves with every new release, making it a complex and powerful toolbox. The impressive typing system is one of the main reasons many developers prefer to use TypeScript.

When to use types vs. interfaces

Type aliases and interfaces are similar but have subtle differences, as shown in the previous section.

While almost all interface features are available in types or have equivalents, one exception is declaration merging. Interfaces should generally be used when declaration merging is necessary, such as extending an existing library or authoring a new one. Additionally, if you prefer the object-oriented inheritance style, using the extends keyword with an interface is often more readable than using the intersection with type aliases.

However, many of the features in types are difficult or impossible to achieve with interfaces. For example, TypeScript provides rich features like conditional types, generic types, type guards, advanced types, and more. You can use them to build a well-constrained type system to make your app strongly typed. The interface can’t achieve this.

In many cases, they can be used interchangeably depending on personal preference. But, we should use type aliases in the following use cases:

• To create a new name for a primitive type
• To define a union type, tuple type, function type, or another more complex type
• To overload functions
• To use mapped types, conditional types, type guards, or other advanced type features

Compared with interfaces, types are more expressive. Many advanced type features are unavailable in interfaces, and those features continue to grow as TypeScript evolves. Below is an example of the advanced type feature that the interface can’t achieve.

Using mapped type, template literal types, and keyof operator, we created a type that automatically generates getter methods for any object type.

In addition, many developers prefer to use types because they match the functional programming paradigm well. The rich type expression makes it easier to achieve functional composition, immutability, and other functional programming capabilities in a type-safe manner.

In this article, we discussed type aliases and interfaces and their differences. While there are some scenarios in which one is preferred over the other, in most cases, the choice between them boils down to personal preference. I lean towards using types simply because of the amazing type system. What are your preferences? You are welcome to share your opinions in the comments section below.

LogRocket : Full visibility into your web and mobile apps

LogRocket is a frontend application monitoring solution that lets you replay problems as if they happened in your own browser. Instead of guessing why errors happen or asking users for screenshots and log dumps, LogRocket lets you replay the session to quickly understand what went wrong. It works perfectly with any app, regardless of framework, and has plugins to log additional context from Redux, Vuex, and @ngrx/store.

In addition to logging Redux actions and state, LogRocket records console logs, JavaScript errors, stacktraces, network requests/responses with headers + bodies, browser metadata, and custom logs. It also instruments the DOM to record the HTML and CSS on the page, recreating pixel-perfect videos of even the most complex single-page and mobile apps.

Try it for free .

Share this:

• Click to share on Twitter (Opens in new window)
• Click to share on Reddit (Opens in new window)
• Click to share on LinkedIn (Opens in new window)
• Click to share on Facebook (Opens in new window)
• #typescript

Would you be interested in joining LogRocket's developer community?

Join LogRocket’s Content Advisory Board. You’ll help inform the type of content we create and get access to exclusive meetups, social accreditation, and swag.

Stop guessing about your digital experience with LogRocket

Recent posts:.

Mastering promise cancellation in JavaScript

Explore the new Promise.withResolvers() mechanism to create a JavaScript Promise and cancel it before its completion.

Building Telegram Mini Apps with React

Explore Telegram Mini Apps and the benefits they provide as we build and deploy a fullstack, ecommerce React app on Telegram.

Next.js View Transitions API

User expectations for web applications have evolved. Users expect seamless and smooth experiences when navigating between pages; they want the […]

Svelte adoption guide: Overview, examples, and alternatives

Let’s discuss Svelte’s history and key features, why you might choose it for your next project, and what sets it apart from other frameworks.

11 Replies to "Types vs. interfaces in TypeScript"

This article still leaves me confused. I still feel like I can use whichever.

Same here, not to having to concrete pro and cons. Still feel confused

To me type aliases are more strict, so it makes more sense for me to use that by default – even for objects. The only time I use interfaces is to expose types publicly so that the consumer of your code can extend the types if needed, or when implementing with a class.

In your example of that interface with tupe [string, number] is actually an interface that has one of its members defined as a type (of a tuple) so no confusion here. One difference that you didn’t mention is when object implementing some interface can have more properties than the interface defines, but types limit the shape to exactly what type has defined.

“Interfaces are better when you need to define a new object or method of an object. For example, in React applications, when you need to define the props that a specific component is going to receive, it’s ideal to use interface over types”

There is no argumentation here. “object or method of an object”, while being vague, has nothing to do with a functional React component which is a function.

You’re just making more confusion.

There are so many errors in this!

1. “In TypeScript, we can easily extend and implement interfaces. This is not possible with types though.” What? Classes can implement types. Types can “extend” types using ‘&’.

2. “We cannot create an interface combining two types, because it doesn’t work:” Again, what? If A and B are interfaces, you can create an interface C like this:

interface C extends A, B {

This is a very misleading post.

I, personally, tend towards `type` when defining Prop types.

The things you get with `interface` (namely `implements`, and the ability to extend through redeclaration) aren’t really useful in the context of Prop definitions, but the things you get with `type` are (namely unions, intersections, and aliases specifically).

They’re mostly the same in this context, but occasionally you’ll end-up NEEDING to use type so you define PropsWithChildren using the react library type React.PropsWithChildren and since I prefer consistency, I’ll just use type for all PropTypes.

You say, “Interfaces are better when you need to define a new object or method of an object.”, and then straight away in the next box you use a type to define an object. “` type Person = { name: string, age: number }; “` So which one is it? The article doesn’t seem to adhere to its own advice which is confusing.

Great Thanks

Thank you! Great article explaining complex things in a simple way.

Great stuff man, thanks a lot Differences between types aliases and interfaces are not easy to understand, and sometimes we don’t know which one to use, that helped me to figure it out better

Leave a Reply Cancel reply

0:02 We've got a tricky problem here. We're using an interface user as a way to represent the user within our system. We've got a function down here called getUserId, which takes in a user and returns its ID.

0:17 Now, this getUserId (defaultUser) is failing. It's failing because this defaultUser is not meeting this user contract. If I were to change it...I would say id, 1, firstName, Matt, lastName, Pocock, isAdmin, true, then it's going to pass.

0:43 I don't want the error to be down here. I ideally want the error to be at this line or around here, because I want to make sure that my defaultUser is matching that user contract. Your job is to go through the TypeScript docs and work out how you would do this.

Assigning Types to Variables self.__wrap_balancer=(t,e,n)=>{n=n||document.querySelector(`[data-br="${t}"]`);let o=n.parentElement,r=E=>n.style.maxWidth=E+"px";n.style.maxWidth="";let i=o.clientWidth,s=o.clientHeight,c=i/2,u=i,d;if(i){for(;c+1

Here we have an interface that represents a user within our system:

There's a function called getUserId that takes in a user, and returns its id.

Our test is currently failing, becaus

TypeScript tutorial

Typescript exercises.

You can test your TypeScript skills with W3Schools' Exercises.

We have gathered a variety of TypeScript exercises (with answers) for each chapter.

Try to solve an exercise by filling in the missing parts of a code. If you're stuck, hit the "Show Answer" button to see what you've done wrong.

Count Your Score

You will get 1 point for each correct answer. Your score and total score will always be displayed.

Start TypeScript Exercises

Start TypeScript Exercises ❯

If you don't know TypeScript, we suggest that you read our TypeScript Tutorial from scratch.

COLOR PICKER

Contact Sales

If you want to use W3Schools services as an educational institution, team or enterprise, send us an e-mail: [email protected]

Report Error

If you want to report an error, or if you want to make a suggestion, send us an e-mail: [email protected]

Top Tutorials

Top references, top examples, get certified.

no-unsafe-assignment

Disallow assigning a value with type any to variables and properties.

Extending "plugin:@typescript-eslint/ recommended-type-checked " in an ESLint configuration enables this rule.

This rule requires type information to run.

The any type in TypeScript is a dangerous "escape hatch" from the type system. Using any disables many type checking rules and is generally best used only as a last resort or when prototyping code.

Despite your best intentions, the any type can sometimes leak into your codebase. Assigning an any typed value to a variable can be hard to pick up on, particularly if it leaks in from an external library.

This rule disallows assigning any to a variable, and assigning any[] to an array destructuring.

This rule also compares generic type argument types to ensure you don't pass an unsafe any in a generic position to a receiver that's expecting a specific type. For example, it will error if you assign Set<any> to a variable declared as Set<string> .

Try this rule in the playground ↗

• ❌ Incorrect

There are cases where the rule allows assignment of any to unknown .

Example of any to unknown assignment that are allowed:

This rule is not configurable.

When Not To Use It ​

If your codebase has many existing any s or areas of unsafe code, it may be difficult to enable this rule. It may be easier to skip the no-unsafe-* rules pending increasing type safety in unsafe areas of your project. You might consider using ESLint disable comments for those specific situations instead of completely disabling this rule.

Related To ​

• no-explicit-any
• no-unsafe-argument
• no-unsafe-call
• no-unsafe-member-access
• no-unsafe-return

Resources ​

• Rule source
• Test source
• When Not To Use It

A Comprehensive Guide to Understanding TypeScript Record Type

Share this article

Introduction

Basic usage of record type, practical use cases of record type, iterating over record types, advanced usage and utility types with record.

TypeScript’s Record type simplifies managing object structures with consistent value types. This guide covers the essentials of Record , including its definition, syntax, and how it differs from other types like tuples. We’ll learn how to define and use Record in practical scenarios such as enforcing exhaustive case handling and mapping enums. Additionally, we’ll explore advanced uses by combining Record with utility types like Partial , Pick , and Readonly .

The Record type is a utility type that allows us to create an object type with specified keys and a uniform value type. This type is particularly useful for defining mappings and ensuring that all values in an object conform to a single type.

Definition of Record Type

The official definition from the TypeScript documentation is:

• Keys represent the set of keys in the record, which can be a union of string literals or a type derived from a union.
• Type is the type of the values associated with those keys.

For example, Record<string, number> defines an object where every key is a string and every value is a number. This type ensures that all properties of the object have the same value type, but the keys can be varied.

Comparison Between a Record and a Tuple

Both Record and tuples are used to handle collections of data, but they serve different purposes. Even as they store multiple values, they differ in structure and usage. A Record has named properties with a fixed type, whereas a tuple is an ordered list of elements identified by their position. Here’s a simple comparison:

• Record . Creates an object type where all values have the same type, but the keys can be flexible. This is useful for mapping keys to values and ensuring that all keys adhere to a specific type.
• Tuple . Defines an array with a fixed number of elements, where each element can have a different type. Tuples are used when we need a fixed-size collection with specific types for each position.

For example, consider the following.

Here’s a Record type, which maps string keys to number values:

A tuple type represents an array with a string (name) and a number (age) in a fixed position:

The Record type provides a simple and efficient way to map keys to values. It’s particularly useful when we need to define objects with specific key–value pairs where the keys are of a particular type, and the values are of another type.

Here are some basic ways to use the Record type to define and create structured data.

Defining a Record

To define a Record , we specify the types for the keys and values. The example below defines an object where each key is a string, and each value is also a string. This could be used for a generic map of user data:

Creating a Record Type Example

Some websites have various subdomains. Let’s assume each of these subdomains requires some level of admin access and create a Record type for storing different admin roles and their corresponding access levels. Here, UserRoles and UserStatus are Record types where the keys are specific string literals ( admin , blogAdmin , docsAdmin , active , inactive , suspended ), and the values are strings that describe each role and status.

First, we define a Record type UserRoles with specific admin roles as keys and their descriptions as values. The UserRoles type ensures that any object of this type will have keys admin , blogAdmin , and docsAdmin , with string values describing each role. The roles object adheres to this type by providing descriptions for each admin role:

Next, we define a Record type UserStatus with specific statuses as keys and their descriptions as values. The UserStatus type ensures that any object of this type will have keys active , inactive , and suspended , with string values describing each status. The userStatus object adheres to this type by providing descriptions for each status:

By creating Record types in this way, we ensure that the admin roles and user statuses are well defined and consistent throughout the application.

In this section, we’ll review several practical use cases of the Record type to demonstrate its versatility and effectiveness in different scenarios.

Use Case 1: Enforcing Exhaustive Case Handling

Using Record to define a mapping between case values and messages allows us to handle each possible case explicitly. This ensures that all cases are covered and that any missing cases will result in compile-time errors.

In the example below, statusMessages is a Record where the keys are specific Status values ( 'pending' , 'completed' , 'failed' ), and each key maps to a corresponding message. The getStatusMessage function uses this record to return the appropriate message based on the status parameter. This approach guarantees that all statuses are handled correctly and consistently.

Use Case 2: Enforcing Type Checking in Applications Using Generics

Generics in TypeScript allow for flexible and reusable code. When combined with Record , generics can help enforce type checking and ensure that objects conform to specific structures.

By using generics with Record , we can create functions or utilities that generate objects with a specific set of keys and a consistent value type. This approach enhances type safety and reusability in our codebase.

In the example below, the createRecord function takes an array of keys and a value, and it returns a Record where each key maps to the provided value. This function uses generics ( K for keys and T for value type) to ensure that the resulting Record has the correct structure.

Use Case 3: Mapping Enums to Data

Using Record to map enums to data allows us to create a lookup table where each enum value is associated with specific information. This is particularly useful for scenarios like configuring settings based on enum values.

In this example, colorHex is a Record that maps each Color enum value to its corresponding hexadecimal color code. This approach provides a clear and type-safe way to handle color-related data based on enum values.

Use Case 4: Creating Lookup Tables

A lookup table using Record helps in mapping keys (such as identifiers, names) to specific values (such as descriptions, codes). This can be useful for various applications, including configurations, translations, and many other things.

Here, countryCode is a Record that maps country codes to their respective country names, population, capitals and continents. This lookup table allows for quick and type-safe retrieval of country names and populations based on country codes.

Iterating over Record types is important for accessing and manipulating the data within data structures. Let’s create a sample data and show various methods on how we can iterate over the TypeScript Record types.

Sample Data:

Using forEach . To use forEach with a Record , convert it to an array of key-value pairs:

Using for...in . The for...in loop iterates over the keys of a Record :

Using Object.keys() . Object.keys() returns an array of the Record ’s keys:

Using Object.values() . Object.values() returns an array of the Record ’s values:

The Record type can be combined with other utility types to achieve greater flexibility and type safety. This section exposes advanced usage patterns, demonstrating how Record can work with utility types like Pick , Readonly , and Partial .

Combining Record with Pick for Selective Type Mapping

The Pick utility type allows us to create a new type by selecting specific properties from an existing type. This is useful when we want to work with only a subset of properties from a larger type.

Here, we created a new type SelectedProductInfo by picking only the name and price properties from the ProductInfo interface, and then using Record to map different products to this new type:

Combining Record with Readonly for Immutable Properties

The Readonly utility type ensures that properties can’t be modified after they’re set. This is useful for creating immutable data structures.

The ReadonlyProductInfo type in the example below makes all properties of ProductInfo immutable, ensuring that the details of each product can’t be changed once they’re defined:

Combining Record with Partial for Optional Properties

The Partial utility type makes all properties of a type optional. This is useful for scenarios where not all properties might be known or required at the same time.

Here, the PartialProductInfo type allows us to create products with some or none of the properties defined in ProductInfo , providing flexibility in how product information is specified:

Combining Record with Record for Nested Mapping

Another advanced usage involves combining Record types to create nested mappings, which can be particularly useful for managing complex data structures.

In this example, storeInventory uses nested Record types to map departments to their respective products and details, demonstrating how Record can be combined for more complex data management:

The Record type is a versatile tool for managing and structuring object types as it allows us to define clear mappings between keys and values, ensuring type safety and consistency in our code.

For more detailed information, refer to the TypeScript documentation and review other additional resources like Total TypeScript and TypeScript Tutorial to deepen your understanding of TypeScript’s Record type system.

Emmanuel is a passionate software developer who finds joy in both writing and problem-solving.

Was this page helpful?

Object Types

In JavaScript, the fundamental way that we group and pass around data is through objects. In TypeScript, we represent those through object types .

As we’ve seen, they can be anonymous:

or they can be named by using either an interface:

or a type alias:

In all three examples above, we’ve written functions that take objects that contain the property name (which must be a string ) and age (which must be a number ).

Quick Reference

We have cheat-sheets available for both type and interface , if you want a quick look at the important every-day syntax at a glance.

Property Modifiers

Each property in an object type can specify a couple of things: the type, whether the property is optional, and whether the property can be written to.

Optional Properties

Much of the time, we’ll find ourselves dealing with objects that might have a property set. In those cases, we can mark those properties as optional by adding a question mark ( ? ) to the end of their names.

In this example, both xPos and yPos are considered optional. We can choose to provide either of them, so every call above to paintShape is valid. All optionality really says is that if the property is set, it better have a specific type.

We can also read from those properties - but when we do under strictNullChecks , TypeScript will tell us they’re potentially undefined .

In JavaScript, even if the property has never been set, we can still access it - it’s just going to give us the value undefined . We can just handle undefined specially by checking for it.

Note that this pattern of setting defaults for unspecified values is so common that JavaScript has syntax to support it.

Here we used a destructuring pattern for paintShape ’s parameter, and provided default values for xPos and yPos . Now xPos and yPos are both definitely present within the body of paintShape , but optional for any callers to paintShape .

Note that there is currently no way to place type annotations within destructuring patterns. This is because the following syntax already means something different in JavaScript. ts function draw ({ shape : Shape , xPos : number = 100 /*...*/ }) { render ( shape ); Cannot find name 'shape'. Did you mean 'Shape'? 2552 Cannot find name 'shape'. Did you mean 'Shape'? render ( xPos ); Cannot find name 'xPos'. 2304 Cannot find name 'xPos'. } Try In an object destructuring pattern, shape: Shape means “grab the property shape and redefine it locally as a variable named Shape .” Likewise xPos: number creates a variable named number whose value is based on the parameter’s xPos .

readonly Properties

Properties can also be marked as readonly for TypeScript. While it won’t change any behavior at runtime, a property marked as readonly can’t be written to during type-checking.

Using the readonly modifier doesn’t necessarily imply that a value is totally immutable - or in other words, that its internal contents can’t be changed. It just means the property itself can’t be re-written to.

It’s important to manage expectations of what readonly implies. It’s useful to signal intent during development time for TypeScript on how an object should be used. TypeScript doesn’t factor in whether properties on two types are readonly when checking whether those types are compatible, so readonly properties can also change via aliasing.

Using mapping modifiers , you can remove readonly attributes.

Index Signatures

Sometimes you don’t know all the names of a type’s properties ahead of time, but you do know the shape of the values.

In those cases you can use an index signature to describe the types of possible values, for example:

Above, we have a StringArray interface which has an index signature. This index signature states that when a StringArray is indexed with a number , it will return a string .

Only some types are allowed for index signature properties: string , number , symbol , template string patterns, and union types consisting only of these.

It is possible to support multiple types of indexers. Note that when using both `number` and `string` indexers, the type returned from a numeric indexer must be a subtype of the type returned from the string indexer. This is because when indexing with a number , JavaScript will actually convert that to a string before indexing into an object. That means that indexing with 100 (a number ) is the same thing as indexing with "100" (a string ), so the two need to be consistent.

While string index signatures are a powerful way to describe the “dictionary” pattern, they also enforce that all properties match their return type. This is because a string index declares that obj.property is also available as obj["property"] . In the following example, name ’s type does not match the string index’s type, and the type checker gives an error:

However, properties of different types are acceptable if the index signature is a union of the property types:

Finally, you can make index signatures readonly in order to prevent assignment to their indices:

You can’t set myArray[2] because the index signature is readonly .

Excess Property Checks

Where and how an object is assigned a type can make a difference in the type system. One of the key examples of this is in excess property checking, which validates the object more thoroughly when it is created and assigned to an object type during creation.

Notice the given argument to createSquare is spelled colour instead of color . In plain JavaScript, this sort of thing fails silently.

You could argue that this program is correctly typed, since the width properties are compatible, there’s no color property present, and the extra colour property is insignificant.

However, TypeScript takes the stance that there’s probably a bug in this code. Object literals get special treatment and undergo excess property checking when assigning them to other variables, or passing them as arguments. If an object literal has any properties that the “target type” doesn’t have, you’ll get an error:

Getting around these checks is actually really simple. The easiest method is to just use a type assertion:

However, a better approach might be to add a string index signature if you’re sure that the object can have some extra properties that are used in some special way. If SquareConfig can have color and width properties with the above types, but could also have any number of other properties, then we could define it like so:

Here we’re saying that SquareConfig can have any number of properties, and as long as they aren’t color or width , their types don’t matter.

One final way to get around these checks, which might be a bit surprising, is to assign the object to another variable: Since assigning squareOptions won’t undergo excess property checks, the compiler won’t give you an error:

The above workaround will work as long as you have a common property between squareOptions and SquareConfig . In this example, it was the property width . It will however, fail if the variable does not have any common object property. For example:

Keep in mind that for simple code like above, you probably shouldn’t be trying to “get around” these checks. For more complex object literals that have methods and hold state, you might need to keep these techniques in mind, but a majority of excess property errors are actually bugs.

That means if you’re running into excess property checking problems for something like option bags, you might need to revise some of your type declarations. In this instance, if it’s okay to pass an object with both a color or colour property to createSquare , you should fix up the definition of SquareConfig to reflect that.

Extending Types

It’s pretty common to have types that might be more specific versions of other types. For example, we might have a BasicAddress type that describes the fields necessary for sending letters and packages in the U.S.

In some situations that’s enough, but addresses often have a unit number associated with them if the building at an address has multiple units. We can then describe an AddressWithUnit .

This does the job, but the downside here is that we had to repeat all the other fields from BasicAddress when our changes were purely additive. Instead, we can extend the original BasicAddress type and just add the new fields that are unique to AddressWithUnit .

The extends keyword on an interface allows us to effectively copy members from other named types, and add whatever new members we want. This can be useful for cutting down the amount of type declaration boilerplate we have to write, and for signaling intent that several different declarations of the same property might be related. For example, AddressWithUnit didn’t need to repeat the street property, and because street originates from BasicAddress , a reader will know that those two types are related in some way.

interface s can also extend from multiple types.

Intersection Types

interface s allowed us to build up new types from other types by extending them. TypeScript provides another construct called intersection types that is mainly used to combine existing object types.

An intersection type is defined using the & operator.

Here, we’ve intersected Colorful and Circle to produce a new type that has all the members of Colorful and Circle .

Interfaces vs. Intersections

We just looked at two ways to combine types which are similar, but are actually subtly different. With interfaces, we could use an extends clause to extend from other types, and we were able to do something similar with intersections and name the result with a type alias. The principal difference between the two is how conflicts are handled, and that difference is typically one of the main reasons why you’d pick one over the other between an interface and a type alias of an intersection type.

If interfaces are defined with the same name, TypeScript will attempt to merge them if the properties are compatible. If the properties are not compatible (i.e., they have the same property name but different types), TypeScript will raise an error.

In the case of intersection types, properties with different types will be merged automatically. When the type is used later, TypeScript will expect the property to satisfy both types simultaneously, which may produce unexpected results.

For example, the following code will throw an error because the properties are incompatible:

In contrast, the following code will compile, but it results in a never type:

In this case, Staff would require the name property to be both a string and a number, which results in property being of type never .

Generic Object Types

Let’s imagine a Box type that can contain any value - string s, number s, Giraffe s, whatever.

Right now, the contents property is typed as any , which works, but can lead to accidents down the line.

We could instead use unknown , but that would mean that in cases where we already know the type of contents , we’d need to do precautionary checks, or use error-prone type assertions.

One type safe approach would be to instead scaffold out different Box types for every type of contents .

But that means we’ll have to create different functions, or overloads of functions, to operate on these types.

That’s a lot of boilerplate. Moreover, we might later need to introduce new types and overloads. This is frustrating, since our box types and overloads are all effectively the same.

Instead, we can make a generic Box type which declares a type parameter .

You might read this as “A Box of Type is something whose contents have type Type ”. Later on, when we refer to Box , we have to give a type argument in place of Type .

Think of Box as a template for a real type, where Type is a placeholder that will get replaced with some other type. When TypeScript sees Box<string> , it will replace every instance of Type in Box<Type> with string , and end up working with something like { contents: string } . In other words, Box<string> and our earlier StringBox work identically.

Box is reusable in that Type can be substituted with anything. That means that when we need a box for a new type, we don’t need to declare a new Box type at all (though we certainly could if we wanted to).

This also means that we can avoid overloads entirely by instead using generic functions .

It is worth noting that type aliases can also be generic. We could have defined our new Box<Type> interface, which was:

by using a type alias instead:

Since type aliases, unlike interfaces, can describe more than just object types, we can also use them to write other kinds of generic helper types.

We’ll circle back to type aliases in just a little bit.

The Array Type

Generic object types are often some sort of container type that work independently of the type of elements they contain. It’s ideal for data structures to work this way so that they’re re-usable across different data types.

It turns out we’ve been working with a type just like that throughout this handbook: the Array type. Whenever we write out types like number[] or string[] , that’s really just a shorthand for Array<number> and Array<string> .

Much like the Box type above, Array itself is a generic type.

Modern JavaScript also provides other data structures which are generic, like Map<K, V> , Set<T> , and Promise<T> . All this really means is that because of how Map , Set , and Promise behave, they can work with any sets of types.

The ReadonlyArray Type

The ReadonlyArray is a special type that describes arrays that shouldn’t be changed.

Much like the readonly modifier for properties, it’s mainly a tool we can use for intent. When we see a function that returns ReadonlyArray s, it tells us we’re not meant to change the contents at all, and when we see a function that consumes ReadonlyArray s, it tells us that we can pass any array into that function without worrying that it will change its contents.

Unlike Array , there isn’t a ReadonlyArray constructor that we can use.

Instead, we can assign regular Array s to ReadonlyArray s.

Just as TypeScript provides a shorthand syntax for Array<Type> with Type[] , it also provides a shorthand syntax for ReadonlyArray<Type> with readonly Type[] .

One last thing to note is that unlike the readonly property modifier, assignability isn’t bidirectional between regular Array s and ReadonlyArray s.

Tuple Types

A tuple type is another sort of Array type that knows exactly how many elements it contains, and exactly which types it contains at specific positions.

Here, StringNumberPair is a tuple type of string and number . Like ReadonlyArray , it has no representation at runtime, but is significant to TypeScript. To the type system, StringNumberPair describes arrays whose 0 index contains a string and whose 1 index contains a number .

If we try to index past the number of elements, we’ll get an error.

We can also destructure tuples using JavaScript’s array destructuring.

Tuple types are useful in heavily convention-based APIs, where each element’s meaning is “obvious”. This gives us flexibility in whatever we want to name our variables when we destructure them. In the above example, we were able to name elements 0 and 1 to whatever we wanted. However, since not every user holds the same view of what’s obvious, it may be worth reconsidering whether using objects with descriptive property names may be better for your API.

Other than those length checks, simple tuple types like these are equivalent to types which are versions of Array s that declare properties for specific indexes, and that declare length with a numeric literal type.

Another thing you may be interested in is that tuples can have optional properties by writing out a question mark ( ? after an element’s type). Optional tuple elements can only come at the end, and also affect the type of length .

Tuples can also have rest elements, which have to be an array/tuple type.

• StringNumberBooleans describes a tuple whose first two elements are string and number respectively, but which may have any number of boolean s following.
• StringBooleansNumber describes a tuple whose first element is string and then any number of boolean s and ending with a number .
• BooleansStringNumber describes a tuple whose starting elements are any number of boolean s and ending with a string then a number .

A tuple with a rest element has no set “length” - it only has a set of well-known elements in different positions.

Why might optional and rest elements be useful? Well, it allows TypeScript to correspond tuples with parameter lists. Tuples types can be used in rest parameters and arguments , so that the following:

is basically equivalent to:

This is handy when you want to take a variable number of arguments with a rest parameter, and you need a minimum number of elements, but you don’t want to introduce intermediate variables.

readonly Tuple Types

One final note about tuple types - tuple types have readonly variants, and can be specified by sticking a readonly modifier in front of them - just like with array shorthand syntax.

As you might expect, writing to any property of a readonly tuple isn’t allowed in TypeScript.

Tuples tend to be created and left un-modified in most code, so annotating types as readonly tuples when possible is a good default. This is also important given that array literals with const assertions will be inferred with readonly tuple types.

Here, distanceFromOrigin never modifies its elements, but expects a mutable tuple. Since point ’s type was inferred as readonly [3, 4] , it won’t be compatible with [number, number] since that type can’t guarantee point ’s elements won’t be mutated.

More on Functions

Learn about how Functions work in TypeScript.

Creating Types from Types

An overview of the ways in which you can create more types from existing types.

The TypeScript docs are an open source project. Help us improve these pages by sending a Pull Request ❤

Last updated: Sep 02, 2024  

Download Interview guide PDF

Typescript interview questions, download pdf.

TypeScript is an open-source language developed by Anders Hejlsberg at Microsoft. It’s a statically typed superset of JavaScript that compiles to plain JavaScript. It runs on any browser, host, and operating system. That means all valid JavaScript code is also TypeScript code. It offers advanced features such as IntelliSense, code completion, safe refactorings, etc.

Why TypeScript?

As JavaScript projects grow in size, they become difficult to maintain. There are a few reasons for this. First, JavaScript was never designed to build large-scale applications. Its original purpose was to provide small scripting functionality for a web page. Until recently, it didn’t provide tools and constructs for structuring large projects, such as classes, modules, and interfaces. Also, JavaScript is dynamically typed. It doesn’t support features such as IntelliSense. 

TypeScript files use a .ts extension, in contrast to the .js extension used by the JavaScript files. Since TypeScript is a superset of JavaScript, all valid JavaScript code is a valid TypeScript code, and renaming a .js file to .ts won’t change anything. Here is an example of a standard TypeScript program that adds two numbers and returns the result. Notice how the arguments and the return types are annotated with their type.

When you compile a TypeScript file using the tsc command, the Typescript compiler generates vanilla JavaScript that gets executed. For example, this is what the compiler will produce for the above snippet of code.

TypeScript adds optional static typing and language features such as classes and modules. It’s important to know that all these advanced features add zero cost to JavaScript. A typeScript is purely a compile-time tool. Once you compile, you are left with plain, idiomatic JavaScript. TypeScript is a language for application scale JavaScript development.

Typescript Interview Questions for Freshers

1. what are the primitive types in typescript.

TypeScript has three primitive types that are frequently used: string, number, and boolean. These correspond to the similarly named types in JavaScript. 

• string : represents text values such as “javascript”, “typescript”, etc.
• number : represents numeric values like 1, 2, 32, 43, etc.
• boolean: represents a variable that can have either a ‘true’ or ‘false’ value.

2. Explain how the arrays work in TypeScript.

We use arrays to store values of the same type. Arrays are ordered and indexed collections of values. The indexing starts at 0, i.e., the first element has index 0, the second has index 1, and so on.

Here is the syntax to declare and initialize an array in TypeScript.

You can also create an array using the short-hand syntax as follows:

TypeScript provides an alternate syntax to specify the Array type.

3. What is any type, and when to use it?

There are times when you want to store a value in a variable but don’t know the type of that variable in advance. For example, the value is coming from an API call or the user input. The ‘any’ type allows you to assign a value of any type to the variable of type any.

Here is an example that demonstrates the usage of any type.

TypeScript assumes a variable is of type any when you don’t explicitly provide the type, and the compiler cannot infer the type from the surrounding context. 

4. What is void, and when to use the void type?

The void indicates the absence of type on a variable. It acts as the opposite type to any. It is especially useful in functions that don’t return a value.

If a variable is of type void, you can only assign the null or undefined values to that variable. 

5. What is an unknown type, and when to use it in TypeScript?

The unknown type is the type-safe counterpart of any type. You can assign anything to the unknown, but the unknown isn’t assignable to anything but itself and any, without performing a type assertion of a control-flow-based narrowing. You cannot perform any operations on a variable of an unknown type without first asserting or narrowing it to a more specific type.

Consider the following example. We create the foo variable of unknown type and assign a string value to it. If we try to assign that unknown variable to a string variable bar, the compiler gives an error.

You can narrow down a variable of an unknown type to something specific by doing typeof checks or comparison checks or using type guards. For example, we can get rid of the above error by

• Software Dev
• Data Science

6. What are the different keywords to declare variables in TypeScript?

var: Declares a function-scoped or global variable. You can optionally set its value during the declaration. Its behavior and scoping rules are similar to the var keyword in JavaScript. For example,

let: Declares a block-scoped local variable. Similar to var, you can optionally set the value of a variable during the declaration. For example,

const: Declares a block-scoped constant value that cannot be changed after it’s initialized.  For example,

7. Explain the arrow function syntax in TypeScript.

Arrow functions provide a short and convenient syntax to declare functions. They are also called lambdas in other programming languages.

Consider a regular function that adds two numbers and returns a number.

Using arrow functions syntax, the same function can be defined as:

You can further simplify the syntax by getting rid of the brackets and the return statement. This is allowed when the function body consists of only one statement. For example, if we remove the temporary sum variable, we can rewrite the above function as:

Arrow functions are often used to create anonymous callback functions in TypeScript. Consider the example below that loops over and filters an array of numbers and returns an array containing multiples of five. The filter function takes an arrow function.

8. Provide the syntax of a function with the type annotations.

Functions are blocks of code to perform a specific code. Functions can optionally take one or more arguments, process them, and optionally return a value.

Here’s the TypeScript syntax to create and call a function.

9. How to create objects in TypeScript?

Objects are dictionary-like collections of keys and values. The keys have to be unique. They are similar to arrays and are also sometimes called associative arrays. However, an array uses numbers to index the values, whereas an object allows you to use any other type as the key.

In TypeScript, an Object type refers to any value with properties. It can be defined by simply listing the properties and their types. For example,

10. How to specify optional properties in TypeScript?

An object type can have zero or more optional properties by adding a ‘?’ after the property name. 

In the example above, because the property ‘z’ is marked as optional, the compiler won’t complain if we don’t provide it during the initialization.

11. Explain the concept of null and its use in TypeScript.

In programming, a null value indicates an absence of value. A null variable doesn’t point to any object. Hence you cannot access any properties on the variable or call a method on it.

In TypeScript, the null value is indicated by the ‘null’ keyword. You can check if a value is null as follows:

12. What is undefined in TypeScript?

When a variable is declared without initialization, it’s assigned the undefined value. It’s not very useful on its own. A variable is undefined if it’s declared, but no value has been assigned to it. In contrast, null is assigned to a variable, and it represents no value. 

13. Explain the purpose of the never type in TypeScript.

As the name suggests, the never type represents the type of values that never occur. For example, a function that never returns a value or that always throws an exception can mark its return type as never.

You might wonder why we need a ‘never’ type when we already have ‘void’. Though both types look similar, they represent two very different concepts.

A function that doesn't return a value implicitly returns the value undefined in JavaScript. Hence, even though we are saying it’s not returning anything, it’s returning ‘undefined’. We usually ignore the return value in these cases. Such a function is inferred to have a void return type in TypeScript.

In contrast, a function that has a never return type never returns. It doesn't return undefined, either. There are 2 cases where functions should return never type:

• In an unending loop e.g a while(true){} type loop.
• A function that throws an error e.g function foo(){throw new Exception('Error message')}

14. Explain how enums work in TypeScript?

Enums allow us to create named constants. It is a simple way to give more friendly names to numeric constant values. An enum is defined by the keyword enum, followed by its name and the members.

Consider the following example that defines an enum Team with four values in it.

By default, the enums start the numbering at 0. You can override the default numbering by explicitly assigning the values to its members.

TypeScript also lets you create enums with string values as follows:

15. What is the typeof operator? How is it used in TypeScript?

Similar to JavaScript, the typeof operator in TypeScript returns the type of the operand as a string.

In TypeScript, you can use the typeof operator in a type context to refer to the type of a property or a variable.

16. What are the rest parameters and arguments in TypeScript?

A rest parameter allows a function to accept an indefinite number of arguments as an array. It is denoted by the ‘…’ syntax and indicates that the function can accept one or more arguments.

In contrast, the rest arguments allow a function caller to provide a variable number of arguments from an array. Consider the following example.

17. What is parameter destructuring?

Parameter destructing allows a function to unpack the object provided as an argument into one or more local variables.

18. Explain the TypeScript class syntax.

TypeScript fully supports classes. The TypeScript syntax for class declaration is similar to that of JavaScript, with the added type support for the member declarations.

Here is a simple class that defines an Employee type.

You can create an instance (or object) of a class by using the new keyword. 

19. Provide the syntax for optional parameters in TypeScript.

A function can mark one or more of its parameters as optional by suffixing its name with ‘?’. In the example below, the parameter greeting is marked optional.

20. What is the purpose of the tsconfig.json file?

A tsconfig.json file in a directory marks that directory as the root of a TypeScript project. It provides the compiler options to compile the project.

Here is a sample tsconfig.json file:

Typescript Interview Questions for Experienced

1. how to enforce strict null checks in typescript.

Null pointers are one of the most common sources of unexpected runtime errors in programming. TypeScript helps you avoid them to a large degree by enforcing strict null checks.

You can enforce strict null checks in two ways:

• providing the --strictNullChecks flag to the TypeScript (tsc) compiler
• setting the strictNullChecks property to true in the tsconfig.json configuration file.

When the flag is false, TypeScript ignores null and undefined values in the code. When it is true, null and undefined have their distinct types. The compiler throws a type error if you try to use them where a concrete value is expected.

2. Does TypeScript support static classes? If not, why?

TypeScript doesn’t support static classes, unlike the popular object-oriented programming languages like C# and Java.

These languages need static classes because all code, i.e., data and functions, need to be inside a class and cannot exist independently. Static classes provide a way to allow these functions without associating them with any objects.

In TypeScript, you can create any data and functions as simple objects without creating a containing class. Hence TypeScript doesn’t need static classes. A singleton class is just a simple object in TypeScript. 

3. What are type assertions in TypeScript?

Sometimes, you as a programmer might know more about the type of a variable than TypeScript can infer. Usually, this happens when you know the type of an object is more specific than its current type. In such cases, you can tell the TypeScript compiler not to infer the type of the variable by using type assertions.

TypeScript provides two forms to assert the types.

• <> syntax:

Type assertions are similar to typecasting in other programming languages such as C# or Java. However, unlike those languages, there’s no runtime penalty of boxing and unboxing variables to fit the types. Type assertions simply let the TypeScript compiler know the type of the variable.  

4. Explain how tuple destructuring works in TypeScript.

You can destructure tuple elements by using the assignment operator (=). The destructuring variables get the types of the corresponding tuple elements.  

After destructuring, you can’t assign a value of a different type to the destructured variable. For example,

5. Explain the tuple types in TypeScript.

Tuples are a special type in TypeScript. They are similar to arrays with a fixed number of elements with a known type. However, the types need not be the same.

Since TypeScript 3.0, a tuple can specify one or more optional types using the ? as shown below.

6. What are type aliases? How do you create one?

Type aliases give a new, meaningful name for a type. They don’t create new types but create new names that refer to that type.

For example, you can alias a union type to avoid typing all the types everywhere that value is being used.

7. What are intersection types?

Intersection types let you combine the members of two or more types by using the ‘&’ operator. This allows you to combine existing types to get a single type with all the features you need.

The following example creates a new type Supervisor that has the members of types Employee and Manager.

8. What are union types in TypeScript?

A union type is a special construct in TypeScript that indicates that a value can be one of several types. A vertical bar (|) separates these types.

Consider the following example where the variable value belongs to a union type consisting of strings and numbers. The value is initialized to string “Foo”. Because it can only be a string or a number, we can change it to a number later, and the TypeScript compiler doesn’t complain. 

However, if we try to set the value to a type not included in the union types, we get the following error. 

Union types allow you to create new types out of existing types. This removes a lot of boilerplate code as you don’t have to create new classes and type hierarchies.  

9. What are anonymous functions? Provide their syntax in TypeScript.

An anonymous function is a function without a name. Anonymous functions are typically used as callback functions, i.e., they are passed around to other functions, only to be invoked by the other function at a later point in time. For example,

10. What are abstract classes? When should you use one?

Abstract classes are similar to interfaces in that they specify a contract for the objects, and you cannot instantiate them directly. However, unlike interfaces, an abstract class may provide implementation details for one or more of its members.

An abstract class marks one or more of its members as abstract. Any classes that extend an abstract class have to provide an implementation for the abstract members of the superclass.

Here is an example of an abstract class Writer with two member functions. The write() method is marked as abstract, whereas the greet() method has an implementation. Both the FictionWriter and RomanceWriter classes that extend from Writer have to provide their specific implementation for the write method.

11. How to make object properties immutable in TypeScript? (hint: readonly)

You can mark object properties as immutable by using the readonly keyword before the property name. For example:

When you mark a property as readonly, it can only be set when you initialize the object. Once the object is created, you cannot change it. 

12. What is a type declaration file?

A typical TypeScript project references other third-party TypeScript libraries such as JQuery to perform routine tasks. Having type information for the library code helps you in coding by providing detailed information about the types, method signatures, etc., and provides IntelliSense.

A type declaration file is a text file ending with a .d.ts extension providing a way to declare the existence of some types or values without actually providing implementations for those values. It contains the type declarations but doesn’t have any source code. It doesn’t produce a .js file after compilation. 

13. What are triple-slash directives?

Triple-slash directives are single-line comments that contain a single XML tag. TypeScript uses this XML tag as a compiler directive.

You can only place a triple-slash directive at the top of the containing file. Only single or multi-line comments can come before a triple-slash directive. TypeScript treats them as regular comments if it occurs in the middle of a code block, after a statement.

The primary use of triple-slash directives is to include other files in the compilation process. For example, the following directive instructs the compiler to include a file specified by the path in the containing TypeScript file.

/// <reference path="..." />

Triple-slash directives also order the output when using --out or --outFile. The output files are produced to the output file location in the same order as the input files.

14. Explain the purpose of the ‘in’ operator.

The in operator is used to find if a property is in the specified object. It returns true if the property belongs to the object. Otherwise, it returns false.

15. What are the ‘implements’ clauses in TypeScript?

An implements clause is used to check that a class satisfies the contract specified by an interface. If a class implements an interface and doesn’t implement that interface, the TypeScript compiler issues an error.

A class can implement more than one interface. In this case, the class has to specify all the contracts of those interfaces.

16. What are string literal types?

In TypeScript, you can refer to specific strings and numbers as types.

String literal types on their own are not that useful. However, you can combine them into unions. This allows you to specify all the string values that a variable can take, in turn acting like enums. This can be useful for function parameters.

String literal types can help us spell-check the string values. 

17. What are template literal types?

Template literal types are similar to the string literal types. You can combine them with concrete, literal types to produce a new string literal type. Template literal types allow us to use the string literal types as building blocks to create new string literal types.

Template literal types can also expand into multiple strings via unions. It helps us create the set of every possible string literal that each union member can represent.

18. Explain the concept of inheritance in TypeScript.

Inheritance allows a class to extend another class and reuse and modify the behavior defined in the other class. The class which inherits another class is called the derived class, and the class getting inherited is called the base class.

In TypeScript, a class can only extend one class. TypeScript uses the keyword ‘extends’ to specify the relationship between the base class and the derived classes.

In the above example, because the class Square extends functionality from Rectangle, we can create an instance of square and call both the area() and volume() methods.

19. What are conditional types? How do you create them?

A conditional type allows you to dynamically select one of two possible types based on a condition. The condition is expressed as a type relationship test.

Here, if type C extends B, the value of the above type is TypeX. Otherwise, it is TypeY.

20. What is the Function type in TypeScript?

Function is a global type in TypeScript. It has properties like bind, call, and apply, along with the other properties present on all function values.

You can always call a value of the Function type, and it returns a value of ‘any’ type. 

21. List some of the utility types provided by TypeScript and explain their usage.

TypeScript provides various utility types that make common type transformations easy. These utility types are available globally. Here are some of the essential utility types included in TypeScript.

22. Explain the various ways to control member visibility in TypeScript.

TypeScript provides three keywords to control the visibility of class members, such as properties or methods.

• public: You can access a public member anywhere outside the class. All class members are public by default. 
• protected: A protected member is visible only to the subclasses of the class containing that member. Outside code that doesn’t extend the container class can’t access a protected member. 
• private: A private member is only visible inside the class. No outside code can access the private members of a class.

23. Explain the different variants of the for loop in TypeScript.

TypeScript provides the following three ways to loop over collections.

• ‘forEach’ function
• ‘for..of’ statement

24. Explain the symbol type in TypeScript.

Symbols were introduced in ES6 and are supported by TypeScript. Similar to numbers and strings, symbols are primitive types. You can use Symbols to create unique properties for objects.

You can create symbol values by calling the Symbol() constructor, optionally providing a string key.

A key characteristic of symbols is that they are unique and immutable.

25. Explain how optional chaining works in TypeScript.

Optional chaining allows you to access properties and call methods on them in a chain-like fashion. You can do this using the ‘?.’ operator.

TypeScript immediately stops running some expression if it runs into a ‘null’ or ‘undefined’ value and returns ‘undefined’ for the entire expression chain.

Using optional chaining, the following expression

can be expressed as:

26. Provide the TypeScript syntax to create function overloads.

Function overloading allows us to define multiple functions with the same name, as long as their number of parameters or the types of parameters are different.

The following example defines two overloads for the function buildDate. The first overload takes a number as a parameter, whereas the second takes three numbers as parameters. These are called overload signatures.

The body of the function also called an implementation signature, follows the overload signatures. You can’t call this signature directly, as it’s not visible from the outside. It should be compatible with the overload signatures.

27. What is meant by type inference?

TypeScript can infer the type of a variable when you don’t provide an explicit type. This is known as type inference. This is usually done when the variables or parameters are initialized during the declaration.

For example, TypeScript knows that the variable foo is a string, even though we don’t mention string as a type.

28. What is meant by contextual typing?

When the TypeScript compiler uses the location (or context) of a variable to infer its type, it’s called contextual typing.

In the following example, TypeScript uses the Window.onmousedown function type information to infer the type of the function expression on the right-hand side of the assignment. This allows it to infer the type of the e parameter, which does have a button property but not a property named foo.

29. What is the purpose of noImplicitAny?

Usually, when we don’t provide any type on a variable, TypeScript assumes ‘any’ type. For example, TypeScript compiles the following code, assuming the parameter ‘ s’ is of any type. It works as long as the caller passes a string.

However, the code breaks down as soon as we pass a number or other type than a string that doesn’t have a split() method on it. For example,

noImplicitAny is a compiler option that you set in the tsconfig.json file. It forces the TypeScript compiler to raise an error whenever it infers a variable is of any type. This prevents us from accidentally causing similar errors.

30. What is an interface?

An interface defines a contract by specifying the type of data an object can have and its operations. In TypeScript, you can specify an object’s shape by creating an interface and using it as its type. It’s also called “duck typing”.

In TypeScript, you can create and use an interface as follows:

Interfaces are an effective way to specify contracts within your code as well as outside your code.  

1. Conclusion

TypeScript has been increasing in popularity for the last few years, and many large organizations and popular frameworks have adopted TypeScript to manage their large JavaScript codebases. It’s a valuable skill to have as a developer.

In this article, we explored the questions that a developer might get asked in an interview. We have provided simple code examples to cement the concepts further. Finally, you can use the multiple-choice questions at the end of the article to test your understanding of the various topics in TypeScript. 

• TypeScript Documentation
• Angular Interview Questions and Answers
• JavaScript Interview Questions
• Difference between Typescript and Javascript

TypeScript MCQ Questions

The TypeScript was created by

Which of the following files controls the TypeScript configuration?

To compile a TypeScript file, you use the following command:

TypeScript is the superset of the following programming language.

Which of the following type values are immutable and unique?

TypeScript is not a

When you compile TypeScript code, the compiler produces:

Which of the following types is not a utility type in TypeScript?

A function is said to be overloaded when:

Which of the following is not a primitive type in TypeScript?

• Privacy Policy

• Practice Questions
• Programming
• System Design
• Fast Track Courses
• Online Interviewbit Compilers
• Online C Compiler
• Online C++ Compiler
• Online Java Compiler
• Online Javascript Compiler
• Online Python Compiler
• Interview Preparation
• Java Interview Questions
• Sql Interview Questions
• Python Interview Questions
• Javascript Interview Questions
• Angular Interview Questions
• Networking Interview Questions
• Selenium Interview Questions
• Data Structure Interview Questions
• Data Science Interview Questions
• System Design Interview Questions
• Hr Interview Questions
• Html Interview Questions
• C Interview Questions
• Amazon Interview Questions
• Facebook Interview Questions
• Google Interview Questions
• Tcs Interview Questions
• Accenture Interview Questions
• Infosys Interview Questions
• Capgemini Interview Questions
• Wipro Interview Questions
• Cognizant Interview Questions
• Deloitte Interview Questions
• Zoho Interview Questions
• Hcl Interview Questions
• Highest Paying Jobs In India
• Exciting C Projects Ideas With Source Code
• Top Java 8 Features
• Angular Vs React
• 10 Best Data Structures And Algorithms Books
• Best Full Stack Developer Courses
• Best Data Science Courses
• Python Commands List
• Data Scientist Salary
• Maximum Subarray Sum Kadane’s Algorithm
• Python Cheat Sheet
• C++ Cheat Sheet
• Javascript Cheat Sheet
• Git Cheat Sheet
• Java Cheat Sheet
• Data Structure Mcq
• C Programming Mcq
• Javascript Mcq

1 Million +

• Stack Overflow for Teams Where developers & technologists share private knowledge with coworkers
• Advertising & Talent Reach devs & technologists worldwide about your product, service or employer brand
• OverflowAI GenAI features for Teams
• OverflowAPI Train & fine-tune LLMs
• Labs The future of collective knowledge sharing
• About the company Visit the blog

Collectives™ on Stack Overflow

Find centralized, trusted content and collaborate around the technologies you use most.

Q&A for work

Connect and share knowledge within a single location that is structured and easy to search.

Get early access and see previews of new features.

How to properly assign type to class method in TypeScript?

During construction of this post, I solved my problem, however I still think, that there might be different approach and I would like to know it..

I have a class, where I need to have two methods of the same input and neither of these methods has return value. They just have slightly different bodies.

Since I may add some changes into these methods, I would like to have them typed on one place (opposite to typing each of them individually). It would also look cleaner.

Below I created simplified example code to simulate my problem..

I have checked documentation on typing functions, but I did not find these problems to be reproduced on methods.

Method "meow1" and "meow5" are working ones. But I still expect, that there must be different approach (without assignment operator use).

How to rewrite "meow4" without assignment operator?

Is it possible to leave empty parentheses, if type describes function properly? ("meow3" and "meow6")

This is what I found in documentation:

And this is what I attempted:

Thanks for any tips or clues..

• typescript-typings

• Soooo what exactly is your question? What are we supposed to answer? It is unclear what you are asking. –  mochaccino Commented Feb 27, 2023 at 19:11
• 1 It sounds like you want interfaces? tsplay.dev/WP12kw –  mochaccino Commented Feb 27, 2023 at 19:13
• I might have complicated the issue a little.. Thanks for replying, it is mostly, what I wanted. I wanted just something, that will check, if both of my methods still have the same input, so that it will force me to update both of them, if I will be editing them. –  Martin Melichar Commented Feb 27, 2023 at 20:48

It looks like you want to reduce boilerplate. This is only possible when defining objects and it involves moving the boilerplate elsewhere:

Using satisfies with Implement lets TS detect other methods like run and at the same infer the type of the arguments x as string .

If you need a class, implementing an interface will only force you to type the methods according to the interface, which is OK: it prevents mistakes when the interface changes, but it does not remove boilerplate.

In meow5 , you also neglected that you could remove the type annotation on the parameter

• Seems like, this is what I needed, thanks a lot. I was just afraid, that defining method with assignment operator might have some unwanted effects and it was not allowing me to type my method without it (assignment operator).. as you described "meow5".. –  Martin Melichar Commented Feb 27, 2023 at 20:59
• However are not interfaced meant for mostly public methods? Since my methods should be rather private. It is puzzling me a little. –  Martin Melichar Commented Feb 27, 2023 at 21:03
• You are correct, interfaces are public by design. If you want to force you to keep your private methods in sync with an "interface" you can use an abstract class, although you won't be able to reuse MeowMethodType and you will need to make the methods protected instead of private (which is not necessarily a big deal). Here is an example: tsplay.dev/mbE2oN I personally find that simply sharing MeowMethodType like the following is way simpler tsplay.dev/mAJ04W this is clearly what I would reach for first, then maybe if the need arises I would use something more verbose. –  geoffrey Commented Feb 27, 2023 at 21:48
• Yea, thank you, I also ended up using it with assignment as you show in your second link. May I just ask last thing.. would meow1 () {} and meow2 = () => {} be exactly the same? I just know, that meow3 = function () {} differs in this . I am not exactly sure, where to find such subtle knowledge. –  Martin Melichar Commented Feb 28, 2023 at 22:57
• I just tested it and meow1 does not appear as a property of class, while meow2 does. Will it not cause some "unforseen" issues? –  Martin Melichar Commented Feb 28, 2023 at 23:03

Your Answer

Reminder: Answers generated by artificial intelligence tools are not allowed on Stack Overflow. Learn more

Sign up or log in

Post as a guest.

Required, but never shown

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy .

Not the answer you're looking for? Browse other questions tagged typescript class methods typescript-typings or ask your own question .

• The Overflow Blog
• At scale, anything that could fail definitely will
• Featured on Meta
• Announcing a change to the data-dump process
• Bringing clarity to status tag usage on meta sites
• What does a new user need in a homepage experience on Stack Overflow?
• Feedback requested: How do you use tag hover descriptions for curating and do...
• Staging Ground Reviewer Motivation

Hot Network Questions

• what is Oracle view exu8con used for
• What is the significance of the phrase " in the name of the Lord " as in Psalm 124:8?
• How to find the x-coordinate of the point circled(non-differentiable points) in this trigonometric function graph?
• Why do the opposite of skillful virtues result in remorse?
• How to reconcile the effect of my time magic spell with my timeline
• Homeomorphism between topological subspaces
• A story where SETI finds a signal but it's just a boring philosophical treatise
• Why doesn’t dust interfere with the adhesion of geckos’ feet?
• Fill the grid with numbers to make all four equations true
• Does it make sense for the governments of my world to genetically engineer soldiers?
• Why is the stall speed of an aircraft a specific speed?
• how to find non responsive binaries using `ps`
• Whats the safest way to store a password in database?
• Alternative to a single high spec'd diode
• Why is the wiper fluid hose on the Mk7 Golf covered in cloth tape?
• How would you slow the speed of a rogue solar system?
• When trying to find the quartiles for discrete data, do we round to the nearest whole number?
• Are all citizens of Saudi Arabia "considered Muslims by the state"?
• When did graduate student teaching assistants become common in universities?
• Light switch that is flush or recessed (next to fridge door)
• If I am to use midi keyboard only, do I still need audio interface?
• Does an airplane fly less or more efficiently after a mid-flight engine failure?
• How should I secure ceiling drywall with no edge backing?
• Why is notation in logic so different from algebra?