이 블로그에서 우리는 any과 unknown의 유형이 무엇인지, 그들의 유사성과 차이가 무엇인지, 그리고 언제 그것을 사용하지 않는지 깊이 있게 연구할 것이다.
(유튜브에서 이 글의 동영상 버전을 찾을 수 있습니다!📺)

TLDR；

// ANY
const anyValue: any = 'whatever'

// OK in TypeScript (error in runtime!) 👇
anyValue.do.something.stupid() 


// UNKNOWN
const unknownValue: unknown = 'whatever, too'

// Fails TypeScript check (prevents runtime error) 👇
unknownValue.do.something.stupid() 

차이점을 기억하는 데 도움을 주는 기억법👇

any-> 첫 번째 문자는 "A"-> 타자 스크립트 방지

unknown-> 첫 번째 문자는 "U"-> 타자 스크립트 사용

카탈로그

The any Type

The unknown Type

Use Cases

모든 종류의

any 유형은 TypeScript와 유사한 이스케이프 해치입니다.
이게 무슨 뜻이죠?
변수 유형이 any이면 다음을 수행할 수 있습니다.
1. 원하는 것을 분배해 준다👇

let anyValue: any

anyValue = 'hi, how is you? :)'
anyValue = { login: () => { alert('password?') } }

2.'내 멋대로'👇

let anyValue: any = false

// OK in TypeScript but error in runtime
// ("...is not a function")
anyValue.toUpperCase()

// OK in TypeScript but error in runtime
// ("...Cannot read properties of undefined")
anyValue.messages.hey(':)')

일반적으로 any을 사용하면 유형 검사 없이 변수를 사용할 수 있다.

( https://devrant.com/rants/3015646/i-dont-usually-post-memes-but-this-one-is-just-a-little-too-on-the-nose )
즉, 액세스 없는 속성으로 인해 런타임 오류가 발생하지 않도록 TypeScript에서 제공하는 주요 이점을 잃게 됩니다.
만약 이것이 유형 검사를 완전히 포기한다는 것을 의미한다면, 나는 왜 any을 사용해야 하는지 알고 싶을 것이다.
일반적으로 너는 그것을 피하려고 노력해야 한다.그러려면 다음과 같이 하십시오.
1) "strict": true 파일에서 tsconfig.json을 사용하여 암시적 any 유형을 비활성화할 수 있음

Implicit any means that if you don't annotate a variable or a function parameter in TypeScript, it'll be any by default. With "strict": true, the TypeScript compiler will throw an error if you've got an unannotated variable of type any.

2) no-explicit-any 의 TypeScript ESLint 규칙을 사용합니다.any을 사용할 때마다 ESLint 경고가 표시됩니다.
그러나 어떤 경우에는 any이 유용하다.우리는 the final section의 주요 용례를 깊이 있게 소개할 것이다.그럼에도 불구하고 JavaScript 코드를 TypeScript로 마이그레이션하거나 비유형화된 외부 라이브러리를 처리할 때 유용합니다.
조심하다일부 내장형 TypeScript 유형은 any을 사용합니다.JSON.parse(...) 또는 fetch(...).then(res => res.json()) 같은 함수를 사용할 때 결과의 유형은 기본적으로 any이다.
너는 JSON.parse(...) as { message: string } 같은 물건을 사용해서 그것에 적합한 유형을 줄 수 있다.그럼에도 불구하고 이러한 정보를 이해하는 것은 매우 유용하다. 왜냐하면 모르는 상황에서 의외로 any을 사용하기 쉽기 때문이다.

You can use rules such as no-unsafe-assingment in TypeScript ESLint to get warnings in such scenarios.

TypeScript가 왜 이렇게 안전하지 않은 방식으로 실행됩니까?이 작업에 더 적합한 unknown 유형이 없기 때문에 내장된 자바스크립트 함수를 입력할 수 있는 다른 방법이 없다는 것이 가능한 설명이다.그 기능과 any 유형의 차이점을 살펴봅시다.

알 수 없는 유형

unknown 유형은 2018년 3.0 버전에서 TypeScript에 추가되었습니다.그 목적은 any에 안전한 유형의 대체품을 제공하는 것이다.

From the official docs:
TypeScript 3.0 introduces a new top type unknown. unknown is the type-safe counterpart of any. (https://www.typescriptlang.org/docs/handbook/release-notes/typescript-3-0.html#new-unknown-top-type)

이게 무슨 뜻이죠?
'any의 유형 안전 대응물'과 같이 unknown의 유형은 어떤 면에서는 any과 비슷하지만 다른 면에서는 다르다(즉, any과 달리 유형은 안전하다).
우리 먼저 비슷한 점을 봅시다.unknown 유형에 필요한 내용을 할당할 수 있습니다.
이것은 any형의 작업 원리와 기본적으로 같다👇

let unknownValue: unknown

unknownValue = 'hey, how\'re you doing? :)'
unknownValue = { signUp: () => { alert('email?') } }

any 유형의 변수는 이 변수로 무엇이든 할 수 있다. (그것들을 호출하고 랜덤 속성에 접근하는 등)unknown의 경우는 그렇지 않습니다.
TypeScript는 unknown의 경우 변수를 가정하지 않습니다.

let unknownVariable: unknown

// Error in TypeScript 👇
unknownVariable.toUpperCase()

// Error in TypeScript 👇
unknownVariable.how.are.you('today?')

// Error in TypeScript 👇
const newVariable = unknownVariable + 10

이것은 존재하지 않는 속성에 의외로 접근하는 것을 방지하고 문자열을 함수로 간주하기 때문에 매우 유용합니다.unknown 유형을

type unknown = string | number | boolean | object | null | ...

Disclaimer: this is not the actual definition of the unknown type. It's just a simplified model to give you a better intuition.

유형 좁음 알 수 없음

위 코드 세션에서 보듯이 TypeScript에서는 unknown 유형에 대해 어떠한 작업도 수행할 수 없습니다.
한편, 코드 유형의 보안을 보장하고 무시무시한 실행 시 JavaScript 유형 오류를 방지하는 데 유용합니다.
다른 한편, 우리는 변수를 조종하고 그들의 속성을 호출하기를 희망하기 때문에 매우 제한적이다.
우리는 이 문제를 해결하기 위해 두 가지 옵션이 있다.
1) 활시위위
우리는 가능한 유형을 줄이기 위해 유형 보호기를 사용할 수 있다.if 문장이나 사용자 정의 type predicates을 사용하여 이 점을 실현할 수 있습니다.

function logSecretMessage(message: unknown) {
  if (typeof message === 'string') {
    // in this if-block we know `message` is of type string
    // so we can call the `toLowerCase()` method on it
    console.log(message.toLowerCase())
  } else {
    console.log(message)
  }
}

2) 유형 선언(비유형 보안)
또는 우리는 항상 유형 단언을 사용할 수 있다.이것은 더 간단하지만 유형 보안을 상실했습니다. 왜냐하면 우리가 원하는 모든 유형을 사용하기 때문에 TypeScript는 우리가 실수를 하지 않았다고 믿을 뿐입니다.

const unknownVariable: unknown = 'hello';

// OK 👇
(unknownVariable as string).toUpperCase();

// OK in TypeScript but it *fails* in runtime 👇
(unknownVariable as number).toFixed(2)

알 수 없는 형식의 용례

현재 우리는 any과 unknown 유형의 의미를 이해했으니 언제 그것을 사용하지 않는지 봅시다.
경험의 법칙은 any을 피해야 한다는 것이다. 왜냐하면 그것을 사용하면 대부분의 타자 스크립트의 장점을 잃게 되기 때문이다.변수나 함수 매개 변수의 종류를 모르면 항상 unknown을 선택하십시오.
그럼에도 불구하고 any은 여전히 효과적인 용례가 있다.

JavaScript에서 TypeScript로 마이그레이션

any은 JavaScript 코드 라이브러리를 TypeScript로 마이그레이션할 때 유용합니다.
만약 당신이 매우 큰 자바스크립트 파일을 가지고 있다면, 많은 함수를 내보낼 수 있으며, 그것을 TypeScript로 변환하려고 합니다.any을 사용하지 않으면 이 파일의 각 함수를 입력해야 합니다.
이것은 대량의 작업이 필요합니다. 내보낸 함수 하나만 입력하는 것에 흥미를 느낄 수도 있습니다.
이 경우, 관심 없는 함수를 any으로 빠르게 입력할 수 있으며, 현재 사용하고 있는 함수 중 하나에만 적당한 유형을 지정할 수 있습니다.any(예를 들어 type TODO = any)에 별명을 만드는 것도 유용할 수 있다. 그러면 임시 유형화된 함수를 되돌려 정확한 유형을 제공할 수 있다.

// auth.ts (migrating from auth.js)
type TODO = any

// We can just type the `signUp` function
export function signUp(options: {
  email: string
  password: string
}) { /* ... */ }

// Use `TODO` to quickly type the `resetPassword` function
export function resetPassword(options: TODO) { /* ... */ }

// Use `TODO` to quickly type the `logIn` function
export function logIn(options: TODO) { /* ... */ }

알 수 없는 매개 변수가 있는 함수

앞에서 말한 바와 같이 우리가 확정할 수 없는 변수 유형을 처리할 때 unknown 유형을 선택해야 한다.
예를 들어, 범용 레코더 함수👇

function logger(message: unknown) {
  if (development) {
    console.log(message)
  } else {
    sendMessageToAPI(message)
  }
}

만약에 any으로 바꾸면 우리는 의외로 .toLowerCase()과 같은 속성을 사용하려고 시도할 수 있다(잘못된 경우). message이 string 유형에 속한다고 가정하자.
따라서 unknown을 사용하면 안전을 보장할 수 있습니다.😇