Скачать или смотреть How to Create a Type from a Static Member in TypeScript

Learn how to effectively create a type from a static member in TypeScript, particularly in the context of using the ECSY framework. This guide provides detailed steps and explanations to solve common TypeScript challenges.
---
This video is based on the question https://stackoverflow.com/q/77543761/ asked by the user 'munHunger' ( https://stackoverflow.com/u/3566441/ ) and on the answer https://stackoverflow.com/a/77544045/ provided by the user 'denzquix' ( https://stackoverflow.com/u/22303695/ ) 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: creating a type out of a static member

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.
---
How to Create a Type from a Static Member in TypeScript

When working with TypeScript, especially in environments using frameworks like ECSY, developers often encounter challenges while managing types for static members. One common scenario involves wanting to create a type for a static property without redundancy. In this guide, we will walk through this problem and provide a solution that reduces code duplication while adhering to TypeScript's best practices.

The Problem: Defining the Queries

You might find yourself in a situation where you need to define a system class in ECSY, like so:

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

In this example, the queries object is defined statically in the class, but when you move to the instance level, you are required to redefine the structure of these queries again. This redundancy is not only tedious but also increases the likelihood of inconsistencies in your code.

Understanding the Root Cause

The root cause of this issue is the need for a static property in ECSY, which pulls values into the instance's scope during execution. Since the static queries property exists on the class level and the instance's queries property exists on the object level, TypeScript requires clarity on how to reference these typings correctly.

The Solution: Using typeof

Step 1: Leveraging typeof Keyword

Instead of using keyof PointerSystem.queries to define your instance queries, you should use keyof typeof PointerSystem.queries. This small change makes a significant difference. Here's why:

keyof PointerSystem.queries refers to the type of the, typically, instance properties of the class.

keyof typeof PointerSystem.queries refers specifically to the properties of the static entity, allowing you to accurately capture the shape of the static queries without redefinition.

Step 2: Implementing the Change

Here’s how you can update your type definition to prevent redundancy:

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

This code snippet creates a type for the queries instance using the static properties defined in PointerSystem.queries. As a result, you achieve the following benefits:

Less Redundant Code: You are no longer duplicating property definitions for queries at both the static and instance levels.

Ease of Maintenance: Any changes made to the static queries property will automatically reflect in your instance type, reducing the chance for human error.

Conclusion

By understanding how to correctly reference static members in TypeScript, you can create more maintainable and efficient code, particularly when dealing with frameworks like ECSY. The key takeaway is to utilize the typeof operator to reference static properties correctly and define your instance types without redundancy.

If you have any further questions or need clarification on more TypeScript topics, feel free to ask! Happy coding!