<p>넵 충분히 도움 된것 같습니다. 감사합니다!</p>

안녕하세요 질문드립니다.

<p>제가 해결한 방법은</p>
<p>createDropdownItem<T extends {}> 이와 같이 해결했는데 맞는 방법인지 잘 모르겠네요..</p>
<p>string을 toString으로 바꾼다고 하니 ts에서 막는 거 같다는 느낌이 들기도합니다.</p>
<p>답변 부탁드리겠습니다.</p>
<div style="color: #d4d4d4; background-color: #1e1e1e; font-family: Menlo, Monaco, 'Courier New', monospace; font-size: 12px; line-height: 18px; white-space: pre;">
<div><span style="color: #569cd6;">interface</span> <span style="color: #4ec9b0;">DropDownItem</span><<span style="color: #4ec9b0;">T</span>> {</div>
<div><span style="color: #9cdcfe;">value</span>: <span style="color: #4ec9b0;">T</span>;</div>
<div><span style="color: #9cdcfe;">selected</span>: <span style="color: #4ec9b0;">boolean</span>;</div>
<div>}</div>
<br />
<div><span style="color: #569cd6;">const</span> <span style="color: #4fc1ff;">emails</span>: <span style="color: #4ec9b0;">DropDownItem</span><<span style="color: #4ec9b0;">string</span>>[] = [</div>
<div>{ <span style="color: #9cdcfe;">value</span><span style="color: #9cdcfe;">:</span> <span style="color: #ce9178;">'naver.com'</span>, <span style="color: #9cdcfe;">selected</span><span style="color: #9cdcfe;">:</span> <span style="color: #569cd6;">true</span> },</div>
<div>{ <span style="color: #9cdcfe;">value</span><span style="color: #9cdcfe;">:</span> <span style="color: #ce9178;">'gmail.com'</span>, <span style="color: #9cdcfe;">selected</span><span style="color: #9cdcfe;">:</span> <span style="color: #569cd6;">false</span> },</div>
<div>{ <span style="color: #9cdcfe;">value</span><span style="color: #9cdcfe;">:</span> <span style="color: #ce9178;">'hanmail.com'</span>, <span style="color: #9cdcfe;">selected</span><span style="color: #9cdcfe;">:</span> <span style="color: #569cd6;">false</span> },</div>
<div>];</div>
<br />
<div><span style="color: #569cd6;">function</span> <span style="color: #dcdcaa;">createDropdownItem</span><<span style="color: #4ec9b0;">T</span> <span style="color: #569cd6;">extends</span> {}>(<span style="color: #9cdcfe;">item</span>: <span style="color: #4ec9b0;">DropDownItem</span><<span style="color: #4ec9b0;">T</span>>) {</div>
<div><span style="color: #569cd6;">const</span> <span style="color: #4fc1ff;">option</span> = <span style="color: #9cdcfe;">document</span>.<span style="color: #dcdcaa;">createElement</span>(<span style="color: #ce9178;">'option'</span>);</div>
<div><span style="color: #4fc1ff;">option</span>.<span style="color: #9cdcfe;">value</span> = <span style="color: #9cdcfe;">item</span>.<span style="color: #9cdcfe;">value</span>.<span style="color: #dcdcaa;">toString</span>();</div>
<div><span style="color: #4fc1ff;">option</span>.<span style="color: #9cdcfe;">innerText</span> = <span style="color: #9cdcfe;">item</span>.<span style="color: #9cdcfe;">value</span>.<span style="color: #dcdcaa;">toString</span>();</div>
<div><span style="color: #4fc1ff;">option</span>.<span style="color: #9cdcfe;">selected</span> = <span style="color: #9cdcfe;">item</span>.<span style="color: #9cdcfe;">selected</span>;</div>
<div><span style="color: #c586c0;">return</span> <span style="color: #4fc1ff;">option</span>;</div>
<div>}</div>
<br />
<div><span style="color: #4fc1ff;">emails</span>.<span style="color: #dcdcaa;">forEach</span>(<span style="color: #569cd6;">function</span> (<span style="color: #9cdcfe;">email</span>) {</div>
<div><span style="color: #569cd6;">const</span> <span style="color: #4fc1ff;">item</span> = <span style="color: #dcdcaa;">createDropdownItem</span><<span style="color: #4ec9b0;">string</span>>(<span style="color: #9cdcfe;">email</span>);</div>
<div><span style="color: #569cd6;">const</span> <span style="color: #4fc1ff;">selectTag</span> = <span style="color: #9cdcfe;">document</span>.<span style="color: #dcdcaa;">querySelector</span>(<span style="color: #ce9178;">'#email-dropdown'</span>);</div>
<div><span style="color: #4fc1ff;">selectTag</span>?.<span style="color: #dcdcaa;">appendChild</span>(<span style="color: #4fc1ff;">item</span>);</div>
<div>});</div>
</div>

<p>아래와 같이 작성하였습니다</p>
<div style="color: #d4d4d4; background-color: #1e1e1e; font-family: Menlo, Monaco, 'Courier New', monospace; font-size: 12px; line-height: 18px; white-space: pre;"><br />
<div><span style="color: #569cd6;">interface</span> <span style="color: #4ec9b0;">DropDownItem</span><<span style="color: #4ec9b0;">T</span>> {</div>
<div><span style="color: #9cdcfe;">value</span>: <span style="color: #4ec9b0;">T</span>;</div>
<div><span style="color: #9cdcfe;">selected</span>: <span style="color: #4ec9b0;">boolean</span>;</div>
<div>}</div>
<br />
<div><span style="color: #569cd6;">const</span> <span style="color: #4fc1ff;">emails</span>: <span style="color: #4ec9b0;">DropDownItem</span><<span style="color: #4ec9b0;">string</span>>[] = [</div>
<div>{ <span style="color: #9cdcfe;">value</span><span style="color: #9cdcfe;">:</span> <span style="color: #ce9178;">'naver.com'</span>, <span style="color: #9cdcfe;">selected</span><span style="color: #9cdcfe;">:</span> <span style="color: #569cd6;">true</span> },</div>
<div>{ <span style="color: #9cdcfe;">value</span><span style="color: #9cdcfe;">:</span> <span style="color: #ce9178;">'gmail.com'</span>, <span style="color: #9cdcfe;">selected</span><span style="color: #9cdcfe;">:</span> <span style="color: #569cd6;">false</span> },</div>
<div>{ <span style="color: #9cdcfe;">value</span><span style="color: #9cdcfe;">:</span> <span style="color: #ce9178;">'hanmail.com'</span>, <span style="color: #9cdcfe;">selected</span><span style="color: #9cdcfe;">:</span> <span style="color: #569cd6;">false</span> },</div>
<div>];</div>
<br />
<div><span style="color: #6a9955;">// email과 number 둘다 받아야하는 상황</span></div>
<div><span style="color: #569cd6;">function</span> <span style="color: #dcdcaa;">createDropdownItem</span><<span style="color: #4ec9b0;">T</span>>(<span style="color: #9cdcfe;">item</span>: <span style="color: #4ec9b0;">DropDownItem</span><<span style="color: #4ec9b0;">T</span>>): <span style="color: #4ec9b0;">HTMLOptionElement</span> {</div>
<div><span style="color: #569cd6;">const</span> <span style="color: #4fc1ff;">option</span> = <span style="color: #9cdcfe;">document</span>.<span style="color: #dcdcaa;">createElement</span>(<span style="color: #ce9178;">'option'</span>);</div>
<div><span style="color: #4fc1ff;">option</span>.<span style="color: #9cdcfe;">value</span> = <span style="color: #9cdcfe;">item</span>.<span style="color: #9cdcfe;">value</span>.<span style="color: #dcdcaa;">toString</span>();</div>
<div><span style="color: #4fc1ff;">option</span>.<span style="color: #9cdcfe;">innerText</span> = <span style="color: #9cdcfe;">item</span>.<span style="color: #9cdcfe;">value</span>.<span style="color: #dcdcaa;">toString</span>();</div>
<div><span style="color: #4fc1ff;">option</span>.<span style="color: #9cdcfe;">selected</span> = <span style="color: #9cdcfe;">item</span>.<span style="color: #9cdcfe;">selected</span>;</div>
<div><span style="color: #c586c0;">return</span> <span style="color: #4fc1ff;">option</span>;</div>
<div>}</div>
<br />
<div><span style="color: #4fc1ff;">emails</span>.<span style="color: #dcdcaa;">forEach</span>(<span style="color: #569cd6;">function</span> (<span style="color: #9cdcfe;">email</span>) {</div>
<div><span style="color: #569cd6;">const</span> <span style="color: #4fc1ff;">item</span> = <span style="color: #dcdcaa;">createDropdownItem</span><<span style="color: #4ec9b0;">string</span>>(<span style="color: #9cdcfe;">email</span>);</div>
<div><span style="color: #569cd6;">const</span> <span style="color: #4fc1ff;">selectTag</span> = <span style="color: #9cdcfe;">document</span>.<span style="color: #dcdcaa;">querySelector</span>(<span style="color: #ce9178;">'#email-dropdown'</span>);</div>
<div><span style="color: #4fc1ff;">selectTag</span>.<span style="color: #dcdcaa;">appendChild</span>(<span style="color: #4fc1ff;">item</span>);</div>
<div>});</div>
</div>

<p>자세한 답변 감사드립니다 ^^</p>

kh

投稿