[TS]any, unknown

✅ any

• 어떤 타입이어도 상관없는 타입이다.
• 이걸 최대한 쓰지 않는 게 핵심이다. 왜냐면 컴파일 타임에 타입 체크가 정상적으로 이뤄지지 않기 때문이다. 그래서 컴파일 옵션 중에는 any를 써야 하는데 쓰지 않으면 오류를 뱉도록 하는 옵션도 있다. -noImplicitAny

function returnAny(message): any { // error
  console.log(message);
}

const any1 = returnAny('리턴은 아무거나')
any1.toString()

• any는 계속해서 개체를 통해 전파된다.
• 결국, 모든 편의에 의해 any를 사용하는 순간 타입 안정성을 잃는 대가로 온다는 것을 알아야 한다.
• 타입 안정성은 TS를 사용하는 주요 동기 중 하나이며 필요하지 않은 경우에는 any를 사용하지 않도록 해야 한다.

let looselyTyped: any = {}

const d = looselyTyped.a.b.c.d

위와 같은 코드를 적어도 에러가 나지 않는다. d의 any로 들어가게 된다. any는 계속해서 개체를 통해 전파된다는 것을 알 수 있다. 

function leakingAny(obj: any) {
  const a: number = obj.num
  const b = a + 1
  return b
}
const c = leakingAny({ num: 0 })
c.indexOf("0") // error

a가 number가 되면서 b도 number c도 number가 된다. 

 

아래 코드는 변수 value를 number타입으로 정의하고 value의 length를 출력해보는 코드이다.

let value: number = 10
console.log(value.length) // error

number타입은 length 프로퍼티가 존재하지 않기 때문에 TS에서 문제가 발생하였다. 경고 또는 문제 되는 내용을 보고 사전에 문제 되는 코드에 대해 밸리데이션 체크 및 예외처리를 하여 문제를 방지할 수 있다.

 

하지만, number가 아닌 any 타입으로 선언하는 경우 문제가 발생되지 않는다.

let value: any = 10

console.log(typeof value) // number
console.log(value.length) // undefined

TS는 any타입에 대해 엄격하게 검사 또는 체크하지 않기 때문에 개발자의 입장에서는 문제가 없는 코드라고 판단할 수 있지만, 실제 FrontEnd를 개발하면 any 타입 때문에 문제가 발생하는 경우가 종종 있다.

foundMovie가 any 타입을 가지고 있기에 위 코드는 TS가 에러를 알려주지 않는다. 이럴 때 필요한 것이 애너테이션이다.

 

✅ unknown

• 단어의 뜻과 동일하게 '알 수 없다, 모른다'라는 의미를 가짐.
• unknown 타입은 any 타입과 동일하게 모든 값을 허용하지만, 할당된 값이 어떤 타입인지 모르기 때문에 함부로 property나 연산을 할 수 없습니다.
• 응용 프로그램을 작성할 때 모르는 변수의 타입을 묘사해야 할 수도 있습니다.
• 이러한 값은 동적 콘텐츠(예: 사용자로부터, 또는 우리 API의 모든 값을 의도적으로 수락하기를 원할 수 있습니다.
• 이 경우, 컴파일러와 미래의 코드를 읽는 사람에게 이 변수가 무엇이든 될 수 있음을 알려주는 타입을 제공하기를 원하므로 unknown타입을 제공한다.

declare const maybe: unknown

const aNumber: number = maybe

if (maybe === true) {
  const aBoolean: boolean = maybe // maybe가 true타입으로 지정되는 이런 기능을 타입가드라고 함.

  const aString: string = maybe // boolean 형태는 string에 할당할 수 없다.
}
if (typeof maybe === 'string') {
  const aString: string = maybe // if문 안에서 타입이 한정되기 때문에 타입 가드
}

• any를 사용해서 어떤 문제를 해결하게 되면 실수할 수 있는 확률이 늘어나고 unknown을 사용하면 실수를 덜 할 수 있다.
• any와 짝으로 any보다 Type-safe한 타입
• any와 같이 아무거나 할당할 수 있다.
• 컴파일러가 타입을 추론할 수 있게끔 타입의 유형을 좁히거나 타입을 확정해주지 않으면 다른 곳에 할당할 수 없고, 사용할 수 없다.
• unknown타입을 사용하면 runtime error를 줄일 수 있을 것 같다.
• 사용 전에 데이터의 일부 유형의 검사를 수행해야 함을 알리는 API에 사용할 수 있을 것 같다.

let valueNum: unknown = 10
let valuteStr: unknown = 'Test'

console.log(valueNum.length) // error
console.log(valueStr.length) // error

unknown타입이라 문제가 발생했다.

 

unknown타입으로 변수를 정의하면 컴파일러에게 '변수의 타입이 unknown이라 어떤 값이든 올 수 있다. 그래서 엄격하게 검사해라'라고 요청하는 것과 동일하다.

let valueNum: unknown = 10
let valueStr: unknown = 'unknown'

if (typeof valueNum === "number"){
  console.log(valueNum.length) // error
}
if (typeof valueStr === "string") {
  console.log(valueStr.length)
}

타입 검사는 정상적으로 되었지만, valueNum이 number 타입이라 length 속성을 사용할 수 없다.

any 타입에 비해 안정적인 웹을 개발할 수 있다.

 

🤔 any

모든 타입을 허용합니다.

TS에서 타입 검사를 느슨하게 하므로 개발 당시에는 문제가 없으나 웹 페이지 개발 후 예기치 못한 문제가 발생할 수 있다.

🤔 unknown

모든 타입을 허용합니다.

any 타입과는 다르게 property 또는 연산을 하는 경우 컴파일러가 체크한다. 그러므로 문제 되는 코드를 미리 예방할 수 있다.