Mixing
Ensure Type A extends Type B that has a field which is the value of another object
I would like to ensure that type A has a field of a generic type but the name of that field is defined by the value of a field from another object.
E.g. the function:
interface IndexedContext<K extends string, T> {
context: T;
key: K;
}
type TypeB<P, K, T> = {
// this field should be named after IndexedContext[key]
P[K] = T;
}
const Consumer =
<T extends object, K>(context: IndexedContext<K, T>) => <C extends ComponentType<TypeA>, TypeA extends TypeB: C => {
.....
};
TypeA (props) should have a field which is the value of the field key in IndexedKey? So that when I use this decorator on a react component and pass a ReactContext to it I can make sure that the props have a field which is the same as the key.
@Consumer({context: MyContext, key: 'myKey'})
class MyClass extends Component<MyProps> {}
interface MyProps {
// compiler should fail if this key is missing.
myKey: // Type of value of MyContext
}
reactjs typescript
asked Nov 19 '18 at 13:46
rsmidt
132
add a comment |
I would like to ensure that type A has a field of a generic type but the name of that field is defined by the value of a field from another object.
E.g. the function:
interface IndexedContext<K extends string, T> {
context: T;
key: K;
}
type TypeB<P, K, T> = {
// this field should be named after IndexedContext[key]
P[K] = T;
}
const Consumer =
<T extends object, K>(context: IndexedContext<K, T>) => <C extends ComponentType<TypeA>, TypeA extends TypeB: C => {
.....
};
TypeA (props) should have a field which is the value of the field key in IndexedKey? So that when I use this decorator on a react component and pass a ReactContext to it I can make sure that the props have a field which is the same as the key.
@Consumer({context: MyContext, key: 'myKey'})
class MyClass extends Component<MyProps> {}
interface MyProps {
// compiler should fail if this key is missing.
myKey: // Type of value of MyContext
}
reactjs typescript
asked Nov 19 '18 at 13:46
rsmidt
132
add a comment |
I would like to ensure that type A has a field of a generic type but the name of that field is defined by the value of a field from another object.
E.g. the function:
interface IndexedContext<K extends string, T> {
context: T;
key: K;
}
type TypeB<P, K, T> = {
// this field should be named after IndexedContext[key]
P[K] = T;
}
const Consumer =
<T extends object, K>(context: IndexedContext<K, T>) => <C extends ComponentType<TypeA>, TypeA extends TypeB: C => {
.....
};
TypeA (props) should have a field which is the value of the field key in IndexedKey? So that when I use this decorator on a react component and pass a ReactContext to it I can make sure that the props have a field which is the same as the key.
@Consumer({context: MyContext, key: 'myKey'})
class MyClass extends Component<MyProps> {}
interface MyProps {
// compiler should fail if this key is missing.
myKey: // Type of value of MyContext
}
reactjs typescript
asked Nov 19 '18 at 13:46
rsmidt
132
I would like to ensure that type A has a field of a generic type but the name of that field is defined by the value of a field from another object.
E.g. the function:
interface IndexedContext<K extends string, T> {
context: T;
key: K;
}
type TypeB<P, K, T> = {
// this field should be named after IndexedContext[key]
P[K] = T;
}
const Consumer =
<T extends object, K>(context: IndexedContext<K, T>) => <C extends ComponentType<TypeA>, TypeA extends TypeB: C => {
.....
};
TypeA (props) should have a field which is the value of the field key in IndexedKey? So that when I use this decorator on a react component and pass a ReactContext to it I can make sure that the props have a field which is the same as the key.
@Consumer({context: MyContext, key: 'myKey'})
class MyClass extends Component<MyProps> {}
interface MyProps {
// compiler should fail if this key is missing.
myKey: // Type of value of MyContext
}
reactjs typescript
reactjs typescript
asked Nov 19 '18 at 13:46
rsmidt
132
asked Nov 19 '18 at 13:46
rsmidt
132
asked Nov 19 '18 at 13:46
rsmidt
132
asked Nov 19 '18 at 13:46
rsmidt
132
asked Nov 19 '18 at 13:46
rsmidt
132
132
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
You don't need to define any extra mapped types (such as TypeB sould be in your example), you can use Record to get a mapped type from a string literal and a field type.
You also need to capture the instance type not the constructor. If you write {context: MyContext, key: 'myKey'}, context will be the class MyContext, and so T will be inferred to typeof MyContext not MyContext. To get the instance type you could type context as new (...a:any) => T.
Putting it all together:
interface IndexedContext<K extends string, T> {
context: Type<T>;
key: K;
}
type Type<T> = new (...a: any) => T
const Consumer =
<T extends object, K extends string>(context: IndexedContext<K, T>) => <C extends ComponentType<Record<K, T>>>(cls: C) => {
};
class MyContext { }
@Consumer({ context: MyContext, key: 'myKey' })
class MyClass extends Component<MyProps> { }
interface MyProps {
// compiler WILL fail if this key is missing.
myKey: MyContext// Type of value of MyContext
}
Note context will have to be assigned a class for this to work, you will not be able to directly use interfaces or primitives.
answered Nov 19 '18 at 14:12
Titian Cernicova-Dragomir
57.2k33452
Thanks! That worked pretty nice. I actually did not need the type Type because the React Context already has the 'type' attached I'm looking for. Now it's working perfectly fine!
– rsmidt
Nov 22 '18 at 7:06
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53375999%2fensure-type-a-extends-type-b-that-has-a-field-which-is-the-value-of-another-obje%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
You don't need to define any extra mapped types (such as TypeB sould be in your example), you can use Record to get a mapped type from a string literal and a field type.
You also need to capture the instance type not the constructor. If you write {context: MyContext, key: 'myKey'}, context will be the class MyContext, and so T will be inferred to typeof MyContext not MyContext. To get the instance type you could type context as new (...a:any) => T.
Putting it all together:
interface IndexedContext<K extends string, T> {
context: Type<T>;
key: K;
}
type Type<T> = new (...a: any) => T
const Consumer =
<T extends object, K extends string>(context: IndexedContext<K, T>) => <C extends ComponentType<Record<K, T>>>(cls: C) => {
};
class MyContext { }
@Consumer({ context: MyContext, key: 'myKey' })
class MyClass extends Component<MyProps> { }
interface MyProps {
// compiler WILL fail if this key is missing.
myKey: MyContext// Type of value of MyContext
}
Note context will have to be assigned a class for this to work, you will not be able to directly use interfaces or primitives.
answered Nov 19 '18 at 14:12
Titian Cernicova-Dragomir
57.2k33452
Thanks! That worked pretty nice. I actually did not need the type Type because the React Context already has the 'type' attached I'm looking for. Now it's working perfectly fine!
– rsmidt
Nov 22 '18 at 7:06
add a comment |
You don't need to define any extra mapped types (such as TypeB sould be in your example), you can use Record to get a mapped type from a string literal and a field type.
You also need to capture the instance type not the constructor. If you write {context: MyContext, key: 'myKey'}, context will be the class MyContext, and so T will be inferred to typeof MyContext not MyContext. To get the instance type you could type context as new (...a:any) => T.
Putting it all together:
interface IndexedContext<K extends string, T> {
context: Type<T>;
key: K;
}
type Type<T> = new (...a: any) => T
const Consumer =
<T extends object, K extends string>(context: IndexedContext<K, T>) => <C extends ComponentType<Record<K, T>>>(cls: C) => {
};
class MyContext { }
@Consumer({ context: MyContext, key: 'myKey' })
class MyClass extends Component<MyProps> { }
interface MyProps {
// compiler WILL fail if this key is missing.
myKey: MyContext// Type of value of MyContext
}
Note context will have to be assigned a class for this to work, you will not be able to directly use interfaces or primitives.
answered Nov 19 '18 at 14:12
Titian Cernicova-Dragomir
57.2k33452
Thanks! That worked pretty nice. I actually did not need the type Type because the React Context already has the 'type' attached I'm looking for. Now it's working perfectly fine!
– rsmidt
Nov 22 '18 at 7:06
add a comment |
You don't need to define any extra mapped types (such as TypeB sould be in your example), you can use Record to get a mapped type from a string literal and a field type.
You also need to capture the instance type not the constructor. If you write {context: MyContext, key: 'myKey'}, context will be the class MyContext, and so T will be inferred to typeof MyContext not MyContext. To get the instance type you could type context as new (...a:any) => T.
Putting it all together:
interface IndexedContext<K extends string, T> {
context: Type<T>;
key: K;
}
type Type<T> = new (...a: any) => T
const Consumer =
<T extends object, K extends string>(context: IndexedContext<K, T>) => <C extends ComponentType<Record<K, T>>>(cls: C) => {
};
class MyContext { }
@Consumer({ context: MyContext, key: 'myKey' })
class MyClass extends Component<MyProps> { }
interface MyProps {
// compiler WILL fail if this key is missing.
myKey: MyContext// Type of value of MyContext
}
Note context will have to be assigned a class for this to work, you will not be able to directly use interfaces or primitives.
answered Nov 19 '18 at 14:12
Titian Cernicova-Dragomir
57.2k33452
You don't need to define any extra mapped types (such as TypeB sould be in your example), you can use Record to get a mapped type from a string literal and a field type.
You also need to capture the instance type not the constructor. If you write {context: MyContext, key: 'myKey'}, context will be the class MyContext, and so T will be inferred to typeof MyContext not MyContext. To get the instance type you could type context as new (...a:any) => T.
Putting it all together:
interface IndexedContext<K extends string, T> {
context: Type<T>;
key: K;
}
type Type<T> = new (...a: any) => T
const Consumer =
<T extends object, K extends string>(context: IndexedContext<K, T>) => <C extends ComponentType<Record<K, T>>>(cls: C) => {
};
class MyContext { }
@Consumer({ context: MyContext, key: 'myKey' })
class MyClass extends Component<MyProps> { }
interface MyProps {
// compiler WILL fail if this key is missing.
myKey: MyContext// Type of value of MyContext
}
Note context will have to be assigned a class for this to work, you will not be able to directly use interfaces or primitives.
answered Nov 19 '18 at 14:12
Titian Cernicova-Dragomir
57.2k33452
answered Nov 19 '18 at 14:12
Titian Cernicova-Dragomir
57.2k33452
answered Nov 19 '18 at 14:12
Titian Cernicova-Dragomir
57.2k33452
answered Nov 19 '18 at 14:12
Titian Cernicova-Dragomir
57.2k33452
57.2k33452
Thanks! That worked pretty nice. I actually did not need the type Type because the React Context already has the 'type' attached I'm looking for. Now it's working perfectly fine!
– rsmidt
Nov 22 '18 at 7:06
add a comment |
Thanks! That worked pretty nice. I actually did not need the type Type because the React Context already has the 'type' attached I'm looking for. Now it's working perfectly fine!
– rsmidt
Nov 22 '18 at 7:06
Thanks! That worked pretty nice. I actually did not need the type Type because the React Context already has the 'type' attached I'm looking for. Now it's working perfectly fine!
– rsmidt
Nov 22 '18 at 7:06
Thanks! That worked pretty nice. I actually did not need the type Type because the React Context already has the 'type' attached I'm looking for. Now it's working perfectly fine!
– rsmidt
Nov 22 '18 at 7:06
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53375999%2fensure-type-a-extends-type-b-that-has-a-field-which-is-the-value-of-another-obje%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
