Typing for object with similar key but different value
I have a human object.
interface Human
ID: number;
gender: string;
hobbies?: string;
I want to create a FormGroup with similar structure, how can I declare the typing for the FormGroup object?
interface HumanFormGroup
ID: FormControl,
gender: FormControl,
hobbies?: FormArray
I am creating this FormGroup manually, but hopping that I can do something like:
const humanForm: ValueAny<Human>
Is it possible?
P/S: I asked this because there are Partial<T> modifier available, but not sure if there are any "ValueAny" modifier?
angular typescript
asked Nov 13 '18 at 7:53
Boo Yan JiongBoo Yan Jiong
3201514
add a comment |
I have a human object.
interface Human
ID: number;
gender: string;
hobbies?: string;
I want to create a FormGroup with similar structure, how can I declare the typing for the FormGroup object?
interface HumanFormGroup
ID: FormControl,
gender: FormControl,
hobbies?: FormArray
I am creating this FormGroup manually, but hopping that I can do something like:
const humanForm: ValueAny<Human>
Is it possible?
P/S: I asked this because there are Partial<T> modifier available, but not sure if there are any "ValueAny" modifier?
angular typescript
asked Nov 13 '18 at 7:53
Boo Yan JiongBoo Yan Jiong
3201514
1
Any array property should be mapped toFormArrayand the rest toFormControl? How are nested object to be treated?
– Titian Cernicova-Dragomir
Nov 13 '18 at 7:55
add a comment |
I have a human object.
interface Human
ID: number;
gender: string;
hobbies?: string;
I want to create a FormGroup with similar structure, how can I declare the typing for the FormGroup object?
interface HumanFormGroup
ID: FormControl,
gender: FormControl,
hobbies?: FormArray
I am creating this FormGroup manually, but hopping that I can do something like:
const humanForm: ValueAny<Human>
Is it possible?
P/S: I asked this because there are Partial<T> modifier available, but not sure if there are any "ValueAny" modifier?
angular typescript
asked Nov 13 '18 at 7:53
Boo Yan JiongBoo Yan Jiong
3201514
I have a human object.
interface Human
ID: number;
gender: string;
hobbies?: string;
I want to create a FormGroup with similar structure, how can I declare the typing for the FormGroup object?
interface HumanFormGroup
ID: FormControl,
gender: FormControl,
hobbies?: FormArray
I am creating this FormGroup manually, but hopping that I can do something like:
const humanForm: ValueAny<Human>
Is it possible?
P/S: I asked this because there are Partial<T> modifier available, but not sure if there are any "ValueAny" modifier?
angular typescript
angular typescript
asked Nov 13 '18 at 7:53
Boo Yan JiongBoo Yan Jiong
3201514
asked Nov 13 '18 at 7:53
Boo Yan JiongBoo Yan Jiong
3201514
asked Nov 13 '18 at 7:53
Boo Yan JiongBoo Yan Jiong
3201514
asked Nov 13 '18 at 7:53
Boo Yan JiongBoo Yan Jiong
3201514
asked Nov 13 '18 at 7:53
Boo Yan JiongBoo Yan Jiong
3201514
3201514
1
Any array property should be mapped toFormArrayand the rest toFormControl? How are nested object to be treated?
– Titian Cernicova-Dragomir
Nov 13 '18 at 7:55
add a comment |
1
Any array property should be mapped toFormArrayand the rest toFormControl? How are nested object to be treated?
– Titian Cernicova-Dragomir
Nov 13 '18 at 7:55
1
1
Any array property should be mapped to
FormArray and the rest to FormControl? How are nested object to be treated?– Titian Cernicova-Dragomir
Nov 13 '18 at 7:55
Any array property should be mapped to
FormArray and the rest to FormControl? How are nested object to be treated?– Titian Cernicova-Dragomir
Nov 13 '18 at 7:55
add a comment |
1 Answer
1
active
oldest
votes
You can use a mapped type and a conditional type to achieve this. The mapped type will map the properties of the original type and the conditional type will transform the original type of the property based on whether it is an array or not.
interface Human
ID: number;
gender: string;
hobbies?: string;
type ValueAny<T> =
[P in keyof T] : T[P] extends any ? FormArray : FormControl
type HumanFormGroup = ValueAny<Human>
// Will be quivalent to
//
// ID: FormControl,
// gender: FormControl,
// hobbies?: FormArray
//
You can complicate the rules for the mapping further, but from your question these are the requirements I inferred.
answered Nov 13 '18 at 8:00
Titian Cernicova-DragomirTitian Cernicova-Dragomir
59.2k33553
Just to ask, are you familiar with Angular? To create a reactive form, we need to create a form structure, usually have similar structure to the underlying object. How do you specify the form object? Just wonder how most of the Angular user handle the typing issue? Declare manually, or just assign asany, or use your suggested approach?
– Boo Yan Jiong
Nov 13 '18 at 16:20
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%2f53276236%2ftyping-for-object-with-similar-key-but-different-value%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 can use a mapped type and a conditional type to achieve this. The mapped type will map the properties of the original type and the conditional type will transform the original type of the property based on whether it is an array or not.
interface Human
ID: number;
gender: string;
hobbies?: string;
type ValueAny<T> =
[P in keyof T] : T[P] extends any ? FormArray : FormControl
type HumanFormGroup = ValueAny<Human>
// Will be quivalent to
//
// ID: FormControl,
// gender: FormControl,
// hobbies?: FormArray
//
You can complicate the rules for the mapping further, but from your question these are the requirements I inferred.
answered Nov 13 '18 at 8:00
Titian Cernicova-DragomirTitian Cernicova-Dragomir
59.2k33553
Just to ask, are you familiar with Angular? To create a reactive form, we need to create a form structure, usually have similar structure to the underlying object. How do you specify the form object? Just wonder how most of the Angular user handle the typing issue? Declare manually, or just assign asany, or use your suggested approach?
– Boo Yan Jiong
Nov 13 '18 at 16:20
add a comment |
You can use a mapped type and a conditional type to achieve this. The mapped type will map the properties of the original type and the conditional type will transform the original type of the property based on whether it is an array or not.
interface Human
ID: number;
gender: string;
hobbies?: string;
type ValueAny<T> =
[P in keyof T] : T[P] extends any ? FormArray : FormControl
type HumanFormGroup = ValueAny<Human>
// Will be quivalent to
//
// ID: FormControl,
// gender: FormControl,
// hobbies?: FormArray
//
You can complicate the rules for the mapping further, but from your question these are the requirements I inferred.
answered Nov 13 '18 at 8:00
Titian Cernicova-DragomirTitian Cernicova-Dragomir
59.2k33553
Just to ask, are you familiar with Angular? To create a reactive form, we need to create a form structure, usually have similar structure to the underlying object. How do you specify the form object? Just wonder how most of the Angular user handle the typing issue? Declare manually, or just assign asany, or use your suggested approach?
– Boo Yan Jiong
Nov 13 '18 at 16:20
add a comment |
You can use a mapped type and a conditional type to achieve this. The mapped type will map the properties of the original type and the conditional type will transform the original type of the property based on whether it is an array or not.
interface Human
ID: number;
gender: string;
hobbies?: string;
type ValueAny<T> =
[P in keyof T] : T[P] extends any ? FormArray : FormControl
type HumanFormGroup = ValueAny<Human>
// Will be quivalent to
//
// ID: FormControl,
// gender: FormControl,
// hobbies?: FormArray
//
You can complicate the rules for the mapping further, but from your question these are the requirements I inferred.
answered Nov 13 '18 at 8:00
Titian Cernicova-DragomirTitian Cernicova-Dragomir
59.2k33553
You can use a mapped type and a conditional type to achieve this. The mapped type will map the properties of the original type and the conditional type will transform the original type of the property based on whether it is an array or not.
interface Human
ID: number;
gender: string;
hobbies?: string;
type ValueAny<T> =
[P in keyof T] : T[P] extends any ? FormArray : FormControl
type HumanFormGroup = ValueAny<Human>
// Will be quivalent to
//
// ID: FormControl,
// gender: FormControl,
// hobbies?: FormArray
//
You can complicate the rules for the mapping further, but from your question these are the requirements I inferred.
answered Nov 13 '18 at 8:00
Titian Cernicova-DragomirTitian Cernicova-Dragomir
59.2k33553
answered Nov 13 '18 at 8:00
Titian Cernicova-DragomirTitian Cernicova-Dragomir
59.2k33553
answered Nov 13 '18 at 8:00
Titian Cernicova-DragomirTitian Cernicova-Dragomir
59.2k33553
answered Nov 13 '18 at 8:00
Titian Cernicova-DragomirTitian Cernicova-Dragomir
59.2k33553
59.2k33553
Just to ask, are you familiar with Angular? To create a reactive form, we need to create a form structure, usually have similar structure to the underlying object. How do you specify the form object? Just wonder how most of the Angular user handle the typing issue? Declare manually, or just assign asany, or use your suggested approach?
– Boo Yan Jiong
Nov 13 '18 at 16:20
add a comment |
Just to ask, are you familiar with Angular? To create a reactive form, we need to create a form structure, usually have similar structure to the underlying object. How do you specify the form object? Just wonder how most of the Angular user handle the typing issue? Declare manually, or just assign asany, or use your suggested approach?
– Boo Yan Jiong
Nov 13 '18 at 16:20
Just to ask, are you familiar with Angular? To create a reactive form, we need to create a form structure, usually have similar structure to the underlying object. How do you specify the form object? Just wonder how most of the Angular user handle the typing issue? Declare manually, or just assign as
any, or use your suggested approach?– Boo Yan Jiong
Nov 13 '18 at 16:20
Just to ask, are you familiar with Angular? To create a reactive form, we need to create a form structure, usually have similar structure to the underlying object. How do you specify the form object? Just wonder how most of the Angular user handle the typing issue? Declare manually, or just assign as
any, or use your suggested approach?– Boo Yan Jiong
Nov 13 '18 at 16:20
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.
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%2f53276236%2ftyping-for-object-with-similar-key-but-different-value%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
1
Any array property should be mapped to
FormArrayand the rest toFormControl? How are nested object to be treated?– Titian Cernicova-Dragomir
Nov 13 '18 at 7:55