{"componentChunkName":"component---src-templates-blog-post-js","path":"/yagmyagm/anyUnknown/","result":{"data":{"site":{"siteMetadata":{"title":"Zayden","author":"[Your Name]","siteUrl":"https://gatsby-starter-bee.netlify.com","comment":{"disqusShortName":"","utterances":"JaeYeopHan/gatsby-starter-bee"},"sponsor":{"buyMeACoffeeId":"jbee"}}},"markdownRemark":{"id":"7dd5c32b-bdbe-525a-a888-3f10b39f09b3","excerpt":"타입의 변수에는 무엇이든 지정할 수 있습니다. 타입스크립트 가이드에서는  를 사용하면 타입 제한이 사라지기 때문에 사용을 권장하지 않습니다.  타입의 변수에는 무엇이든 지정할 수 있습니다. 그러면 any 와 unknown의 차이는 무엇일까요? any vs unknown 예를들어 하나의 함수를 작성하겠습니다. callback 매개변수는 어떤 유형이든 가능하므로  문은 type error…","html":"<p><code class=\"language-text\">any</code> 타입의 변수에는 무엇이든 지정할 수 있습니다.</p>\n<div class=\"gatsby-highlight\" data-language=\"typescript\"><pre class=\"language-typescript\"><code class=\"language-typescript\"><span class=\"token keyword\">let</span> myVar<span class=\"token operator\">:</span> <span class=\"token builtin\">any</span> <span class=\"token operator\">=</span> <span class=\"token number\">0</span><span class=\"token punctuation\">;</span>\nmyVar <span class=\"token operator\">=</span> <span class=\"token string\">'1'</span><span class=\"token punctuation\">;</span>\nmyVar <span class=\"token operator\">=</span> <span class=\"token boolean\">false</span><span class=\"token punctuation\">;</span></code></pre></div>\n<p>타입스크립트 가이드에서는 <code class=\"language-text\">any</code> 를 사용하면 타입 제한이 사라지기 때문에 사용을 권장하지 않습니다.</p>\n<p><code class=\"language-text\">unknown</code> 타입의 변수에는 무엇이든 지정할 수 있습니다.</p>\n<div class=\"gatsby-highlight\" data-language=\"typescript\"><pre class=\"language-typescript\"><code class=\"language-typescript\"><span class=\"token keyword\">let</span> myVar<span class=\"token operator\">:</span> <span class=\"token builtin\">unknown</span> <span class=\"token operator\">=</span> <span class=\"token number\">0</span><span class=\"token punctuation\">;</span>\nmyVar <span class=\"token operator\">=</span> <span class=\"token string\">'1'</span><span class=\"token punctuation\">;</span>\nmyVar <span class=\"token operator\">=</span> <span class=\"token boolean\">false</span><span class=\"token punctuation\">;</span></code></pre></div>\n<p><strong>그러면 any 와 unknown의 차이는 무엇일까요?</strong></p>\n<br/>\n<h3 id=\"any-vs-unknown\" style=\"position:relative;\"><a href=\"#any-vs-unknown\" aria-label=\"any vs unknown permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>any vs unknown</h3>\n<p>예를들어 하나의 함수를 작성하겠습니다.</p>\n<div class=\"gatsby-highlight\" data-language=\"typescript\"><pre class=\"language-typescript\"><code class=\"language-typescript\"><span class=\"token keyword\">function</span> <span class=\"token function\">invokeAnything</span><span class=\"token punctuation\">(</span>callback<span class=\"token operator\">:</span> <span class=\"token builtin\">any</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n  <span class=\"token function\">callback</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n<span class=\"token punctuation\">}</span>\n\n<span class=\"token function\">invokeAnything</span><span class=\"token punctuation\">(</span><span class=\"token number\">1</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span></code></pre></div>\n<p>callback 매개변수는 어떤 유형이든 가능하므로 <code class=\"language-text\">callback()</code> 문은 type error 를 발생시키지 않습니다.</p>\n<p>그러나 해당 코드를 실행하게 되면 런타임 오류가 발생합니다.</p>\n<p><code class=\"language-text\">TypeError: callback is not a function</code></p>\n<p><code class=\"language-text\">1</code>은 숫자이므로 함수로 호출할 수 없기 떄문입니다.</p>\n<p><code class=\"language-text\">unknown</code> 타입 변수는 <code class=\"language-text\">any</code>와 마찬가지로 모든 값을 허용합니다. 그러나 <code class=\"language-text\">unknown</code> 변수를 사용하력 할때 타입스크립트는 유형 검사를 시행합니다.</p>\n<p>이전과 비슷하나 <code class=\"language-text\">unknown</code> 타입을 코드를 예시를 들어보겠습니다.</p>\n<div class=\"gatsby-highlight\" data-language=\"typescript\"><pre class=\"language-typescript\"><code class=\"language-typescript\"><span class=\"token keyword\">function</span> <span class=\"token function\">invokeAnything</span><span class=\"token punctuation\">(</span>callback<span class=\"token operator\">:</span> <span class=\"token builtin\">unknown</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n  <span class=\"token function\">callback</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span> <span class=\"token comment\">// Type error: 'callback' is of type 'unknown'</span>\n<span class=\"token punctuation\">}</span>\n\n<span class=\"token function\">invokeAnything</span><span class=\"token punctuation\">(</span><span class=\"token number\">1</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span></code></pre></div>\n<p><code class=\"language-text\">callback</code> 매개변수의 타입을 알 수 없기 때문에 타입 오류가 발생합니다.</p>\n<p>위 코드를 정상적으로 실행하기 위해서는 <code class=\"language-text\">unknown</code> 타임의 변수를 사용하기 전에 타입 검사를 수행 하면 됩니다.</p>\n<div class=\"gatsby-highlight\" data-language=\"typescript\"><pre class=\"language-typescript\"><code class=\"language-typescript\"><span class=\"token keyword\">function</span> <span class=\"token function\">invokeAnything</span><span class=\"token punctuation\">(</span>callback<span class=\"token operator\">:</span> <span class=\"token builtin\">unknown</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n  <span class=\"token keyword\">if</span> <span class=\"token punctuation\">(</span><span class=\"token keyword\">typeof</span> callback <span class=\"token operator\">===</span> <span class=\"token string\">'function'</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n    <span class=\"token function\">callback</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n  <span class=\"token punctuation\">}</span>\n<span class=\"token punctuation\">}</span>\n\n<span class=\"token function\">invokeAnything</span><span class=\"token punctuation\">(</span><span class=\"token number\">1</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span></code></pre></div>\n<p><code class=\"language-text\">typeof callback === 'function'</code> 구문을 추가하면 <code class=\"language-text\">unknown</code> 타입이 <code class=\"language-text\">Function</code> 타입으로 좁혀졌으므로 안전하에 <code class=\"language-text\">callback()</code> 을 호출할 수 있습니다. 그래서 타입 에러도 없고 런타임 에러도 없습니다.</p>\n<p>any 와 unknown 의 차이점은 다음과 같습니다.</p>\n<ul>\n<li><code class=\"language-text\">unknown</code> 타입에는 무엇이든 할당할 수 있지만 <code class=\"language-text\">unknown</code> 타입에서 작업하려면 타입 검사를 수행해야 합니다.</li>\n<li><code class=\"language-text\">any</code> 타입에는 무엇이든 할당할 수 있으며 모든 타입에 대해 어떠한 작업이든지 수행할 수 있습니다.</li>\n</ul>\n<br />\n<h3 id=\"참조\" style=\"position:relative;\"><a href=\"#%EC%B0%B8%EC%A1%B0\" aria-label=\"참조 permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>참조</h3>\n<hr>\n<p><a href=\"https://dmitripavlutin.com/typescript-unknown-vs-any/\">https://dmitripavlutin.com/typescript-unknown-vs-any/</a></p>","frontmatter":{"title":"Typescript - any vs unknown","date":"July 22, 2023"}}},"pageContext":{"slug":"/yagmyagm/anyUnknown/","previous":{"fields":{"slug":"/frontendPerformance/imageOptimization/"},"frontmatter":{"title":"이미지 최적화"}},"next":{"fields":{"slug":"/algorithm/leetcode/1828/"},"frontmatter":{"title":"leetcode - Queries on Number of Points Inside a Circle"}}}}}