Скачать или смотреть Using Inferred Types in TypeScript: A Simple Guide to Variable Definition

Explore how to use `key in keyof typeof x` in TypeScript to easily define variables with inferred types outside of classes.
---
This video is based on the question https://stackoverflow.com/q/65831663/ asked by the user 'Shachar Har-Shuv' ( https://stackoverflow.com/u/6878454/ ) and on the answer https://stackoverflow.com/a/65831720/ provided by the user 'Etheryte' ( https://stackoverflow.com/u/1470607/ ) at 'Stack Overflow' website. Thanks to these great users and Stackexchange community for their contributions.

Visit these links for original content and any more details, such as alternate solutions, latest updates/developments on topic, comments, revision history etc. For example, the original title of the Question was: TypeScript: How to use a variable inferred type to define another variable with the same type, outside of a class

Also, Content (except music) licensed under CC BY-SA https://meta.stackexchange.com/help/l...
The original Question post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license, and the original Answer post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license.

If anything seems off to you, please feel free to write me at vlogize [AT] gmail [DOT] com.
---
Understanding TypeScript's Inferred Types

TypeScript is a powerful superset of JavaScript that adds optional static typing to the language. One of the features that developers love is type inference, which allows TypeScript to automatically deduce the type of a variable. However, it can sometimes be challenging to leverage this directly in certain scenarios, particularly when defining variables outside a class.

In this guide, we’ll explore a situation where you have an inferred type from one variable but wish to create another variable that uses the same inferred type without explicitly defining the type.

The Problem Statement

Consider the following variable defined with an inferred type:

[[See Video to Reveal this Text or Code Snippet]]

This variable, x, has the inferred type of:

[[See Video to Reveal this Text or Code Snippet]]

Now, you want to create another variable y that utilizes this type in some fashion, specifically in an object where the properties correspond to keys of x, but the values should be of type boolean:

[[See Video to Reveal this Text or Code Snippet]]

The challenge arises when attempting to do this outside of a class, as you might have noticed that it works within a class context but becomes cumbersome to implement elsewhere.

Class-Based Approach

When working inside a class, you can easily define a variable like this:

[[See Video to Reveal this Text or Code Snippet]]

While this works, it seems needless to wrap your logic inside a class structure just to achieve type safety, especially if you only want to use this outside of any class context.

The Solution: Using typeof x

Fortunately, there’s a way to simplify this without relying on a class. By using typeof along with your original variable, you can extract the type dynamically:

Here’s the code that achieves this:

[[See Video to Reveal this Text or Code Snippet]]

Breaking Down the Solution

Using typeof: The key to this solution is typeof. By using typeof x, TypeScript knows to refer to the type of x, which is the inferred type.

Dynamic Key Mapping:

The construct {[key in keyof typeof x]: boolean} effectively maps over each key in x and indicates that each of these keys should have a value of type boolean in y.

Simplicity: This approach is simpler and avoids the redundancy of creating unnecessary classes, making your code cleaner and more maintainable.

Conclusion

Using inferred types in TypeScript enables you to write clean and efficient code. By leveraging typeof and keyof, you can create dynamically typed variables outside the context of a class without unnecessary complexity.

TypeScript's capabilities facilitate both flexibility and type safety which can significantly enhance your development experience. The next time you encounter a similar problem, remember this handy technique!

Feel free to share this guide with your fellow developers who might find it useful! Happy coding!