Determine the Variable Type by Evaluating the Value of Another Variable

Question

Determine the Variable Type by Evaluating the Value of Another Variable

I am looking to implement the following functionality:

document("post").insert({ ... } /* TYPE SHOULD BE AUTOMATICALLY DETERMINED BY TYPESCRIPT */ );

The document() function returns an object that includes methods like insert. The returned object also has a document property, which is set to the value passed to the document() function. The object is of type DocumentObject, and methods like insert can access the document property using this.document. Everything is functioning correctly, but I want the insert method to accept an argument of a specific type that is determined by the value of this.document.

How can I define parameters with types that change based on the value of another variable? This is the signature of the insert method:

export default async function (this: DocumentObject, record: ???): Promise<...> {...}

The variable this.document (accessible within the function) can have values like post, user, or comment. I have corresponding types for each possible value: Post, User, Comment. This is how this.document is defined:

document: "post" | "comment" | "user" = ...;

My Query Is: How can I use Typescript to map each value to its relevant type, so I can assign that type to the record parameter? Is this achievable in Typescript?

Please Note: This is not a duplicate of Conditional parameter type based on another parameters' value or Conditional type based on the value of another key; They suggested using function overloads. Are there alternative methods to achieve this?

typescript

Answer 1

Answer №1

To start, it is advisable to create a mapping interface that defines the connection between the document property and the acceptable type for the insert argument:

interface DocumentMap {
    post: Post;
    user: User;
    comment: Comment;
}

Subsequently, we can generalize the DocumentObject to be generic using the type K for the document property as follows:

interface DocumentObject<K extends keyof DocumentMap> {
    document: K;
    insert(record: DocumentMap[K]): Promise<any>;
}

Here, K is restricted to keyof DocumentMap, which translates to the union type

"post" | "user" | "comment"

as required. Additionally, the insert() method now accepts a record parameter of the indexed access type DocumentMap[K].

Lastly, your document function is also generic, taking the type K for its argument and yielding a value of type DocumentObject<K>:

declare function document<K extends keyof DocumentMap>(k: K): DocumentObject<K>;

Let's put it to the test:

document("post").insert(post); // valid
document("user").insert(user); // valid
document("comment").insert(comment); // valid
document("user").insert(post); // error

Seems to be working fine. When you call document("user"), you receive a

DocumentObject<"user">

, which equates to

{document: "user", insert(record: User): Promise<any>}

, indicating that the insert() method takes a User input and rejects a Post input.

Link to code snippet for testing

Answer 2

To start, it is advisable to create a mapping interface that defines the connection between the document property and the acceptable type for the insert argument:

interface DocumentMap {
    post: Post;
    user: User;
    comment: Comment;
}

Subsequently, we can generalize the DocumentObject to be generic using the type K for the document property as follows:

interface DocumentObject<K extends keyof DocumentMap> {
    document: K;
    insert(record: DocumentMap[K]): Promise<any>;
}

Here, K is restricted to keyof DocumentMap, which translates to the union type

"post" | "user" | "comment"

as required. Additionally, the insert() method now accepts a record parameter of the indexed access type DocumentMap[K].

Lastly, your document function is also generic, taking the type K for its argument and yielding a value of type DocumentObject<K>:

declare function document<K extends keyof DocumentMap>(k: K): DocumentObject<K>;

Let's put it to the test:

document("post").insert(post); // valid
document("user").insert(user); // valid
document("comment").insert(comment); // valid
document("user").insert(post); // error

Seems to be working fine. When you call document("user"), you receive a

DocumentObject<"user">

, which equates to

{document: "user", insert(record: User): Promise<any>}

, indicating that the insert() method takes a User input and rejects a Post input.

Link to code snippet for testing

Answer 3

Answer №2

If you want to establish a connection between the document key and the specific types, you can define a new type that does this mapping. Utilize generics in your function to link the indexed types.

type PostDocument = {author: string}
type UserDocument = {name: string}
type CommentDocument = {text: string}

type DocumentObject = {
  document: "post" | "user" | "comment"
}

type DocumentTypes = {
  post: PostDocument,
  user: UserDocument,
  comment: CommentDocument
} 

async function insertDocument<D extends DocumentObject, R extends DocumentTypes[D["document"]]> (doc: D, record: R) {
    ...
}

This way, the type of the second parameter is determined by the value of the document field.

insertDocument({document: "post"}, {author: "a"})
insertDocument({document: "user"}, {name: "b"})
insertDocument({document: "comment"}, {text: "c"})
insertDocument({document: "comment"}, {name: "d"}) // TypeError
insertDocument({document: "user"}, {author: "e"}) // TypeError

Answer 4

If you want to establish a connection between the document key and the specific types, you can define a new type that does this mapping. Utilize generics in your function to link the indexed types.

type PostDocument = {author: string}
type UserDocument = {name: string}
type CommentDocument = {text: string}

type DocumentObject = {
  document: "post" | "user" | "comment"
}

type DocumentTypes = {
  post: PostDocument,
  user: UserDocument,
  comment: CommentDocument
} 

async function insertDocument<D extends DocumentObject, R extends DocumentTypes[D["document"]]> (doc: D, record: R) {
    ...
}

This way, the type of the second parameter is determined by the value of the document field.

insertDocument({document: "post"}, {author: "a"})
insertDocument({document: "user"}, {name: "b"})
insertDocument({document: "comment"}, {text: "c"})
insertDocument({document: "comment"}, {name: "d"}) // TypeError
insertDocument({document: "user"}, {author: "e"}) // TypeError

Determine the Variable Type by Evaluating the Value of Another Variable

Answer №1

Answer №2

Similar questions

Why is my custom Vuelidate validator not receiving the value from the component where it is being called?

What methods can I use to locate the circular dependency within my program?

Enhancing many-to-many relationships with additional fields in Objection.js

Is it possible to use a Jasmine spy on a fresh instance?

AngularJS and TypeScript encountered an error when trying to create a module because of a service issue

Utilizing Angular Ionic to Extract and Showcase Information Derived from Other Data

Experimenting with error boundaries by utilizing the React Testing Library and Jest:

Specialized pipe encountering issues with conditional statements that function properly within a function

The local storage gets wiped clean whenever I am using this.router.navigate

What is the recommended method for deleting sequelize.connectionManager.getConnection according to the Sequelize documentation?

Error: The lockfile and package.json file are not synchronized when running npm

Using Typescript for-loop to extract information from a JSON array

The JSX element 'HeaderPublic' does not contain any construction or calling signatures

Display responsive input field based on selected option in ionic2 dropdown menu

Ways of modifying the readonly and required attributes of an HTML element using Angular2 Typescript

Ways to broaden React categories for embracing html attributes as props?

Exploring LocalStorage Monitoring in Vue.js 2

Is it possible to manipulate an Angular #variableName in order to retrieve an ElementRef for an HTML element?

Tips for using conditional rendering with React and TypeScript

Utilizing the axios create method: troubleshooting and best practices