[ 번역 ] Boolean in JavaScript and TypeScript

You will learn:
- Union types
- null & undefined as types
- Value types (or literal types)

boolean은 자바스크립트에서 재밌는 원시 데이터 타입입니다. 타입스크립트에서, boolean은 총 4 가지의 값을 가능하게 합니다. 잠깐만, 4개 라구요?

Boolean in JavaScript

 

boolean은 true 와 false의 값을 가질 수 있습니다. 다른 타입으로부터의 값은 truthy 이거나 falsy 일 수 있습니다, undefined 또는 null 같이요.

 

falsy로 판단되는 값들 중에 undefined,null,false 말고도 ""(빈 문자열), -0, 0, NaN 이 있습니다.

 

어떤 값에서 불린 값을 가져오려면, Boolean function을 사용할 수 있습니다.

Boolean("false") // true ❗️
Boolean("Hey folks") // true
Boolean({}) // true
Boolean([]) // true
Boolean(123.4) // true
Boolean(Symbol()) // true

Boolean(undefined) // false
Boolean(null) // false
Boolean(NaN) // false
Boolean(0) // false
Boolean("") // false

모든 빈 값들은 false로 평가됩니다. 빈 객체와 빈 배열(자체로 객체인)은 다른 값들의 컨테이너이기 때문에 값을 가지고 있습니다.

 

Boolean 함수는 값들의 모임에서 빈 값을 필터링하는데 매우 유용합니다.

const collection = [
  { name: 'Stefan Baumgartner', age: 37 },
  undefined,
  { name: 'D.', age: 36 },
  false
  { name: 'C.', age: 2},
  false
]

collection.filter(Boolean) // handy!

 

Number(모든 값을 그들의 `number` 부분이나 `NaN`으로 바꿉니다.)를 같이 사용하면, 실제 값들을 빠르게 얻을 수 있습니다. :

const x = ["1.23", 2137123, "wut", false, "lol", undefined, null]
  .map(Number)
  .filter(Boolean) // [1.23, 2137123] 👍

 

`Boolean`은 construnctor로서 존재하고 `Boolean`함수와 동일한 변환 규칙을 가지고 있습니다. 그러나,

`new Boolean(...)`은, 감싸는 객체를 만들면서, 값 비교에서는 truthy를, 참조 비교에서는 falsy를 만들어냅니다. :

const value = Boolean("Stefan") // true
const reference = new Boolean("Stefan") // [Boolean: true]

value == reference // true
value === reference // false

 

값은 `.valueOf()`를 통해 얻습니다. :

value === reference.valueOf() // true

 

Boolean in TypeScript

 

타입스크립트에서의 boolean은 원시값입니다. Boolean을 써서 객체 인스턴스를 참조하지 않도록 유의해야 합니다.

const boolLiteral: boolean = false // 👍
const boolObject: Boolean = false // 👎

 

동작하긴 하지만, 우리가 new Boolean이 거의 필요하지 않다보니 좋은 실행 방법은 아닙니다.

 

타입스크립트에 strict null checks를 빼면 true,false,undefined,null 을 boolean에 할당할 수 있습니다.

const boolTrue: boolean = true // 👍
const boolFalse: boolean = false // 👍
const boolUndefined: boolean = undefined // 👍
const boolNull: boolean = null // 👍

 

union type으로 온전히 표현할 수 있는 것은 boolean이 유일합니다. :

type MyBoolean = true | false | null | undefined // same as boolean

const mybool: MyBoolean = true
const yourbool: boolean = false

 

우리가 strictNullChecks 플래그를 쓰면, 값들은 true와 false로 줄어듭니다.

const boolTrue: boolean = true // 👍
const boolFalse: boolean = false // 👍
const boolUndefined: boolean = undefined // 💥
const boolNull: boolean = null // 💥

 

그렇게 우리의 세트는 전부 두 값으로 줄어듭니다.

type MyStrictBoolean = true | false

 

우리는 또한 NonNullable helper type을 통해 null값을 없앨 수 있습니다.

type NonNullable<T> = T extends null | undefined
  ? never
  : T;

type MyStrictBoolean = NonNullable<MyBoolean> // true | false

boolean이 조건문에서만 쓰이는 한정된 값의 세트로 이루어져 있다는 사실은 흥미로운 조건 타입을 가능하게 합니다.

 

데이터스토어에서 함수를 통한 복제를 생각해보자. 우리는 예를 들어 user id를 업데이트 하는 함수에 플래그를 쓸 것이다. 그러면 user ID에 이렇게 줘야한다. :

type CheckUserId<Properties, AddUserId> = 
    AddUserId extends true 
    ? Properties & { userId: string }
    : Properties & { userId?: string }

 

generic AddUserId의 값에 따라 userId의 속성은 세트이거나 조건일 거라고 생각합니다.

 

우리는 generic을 우리가 기대하는 타입들로 확장함으로써 이 타입을 좀 더 명시적으로 만들 수 있습니다.

- type CheckUserId<Properties, AddUserId> = 
+ type CheckuserId<
+  Properties extends {},
+  AddUserId extends boolean
+ >
     AddUserId extends true 
     ? Properties & { userId: string }
     : Properties & { userId?: string }

 

실사용할 때는 아마 function을 이렇게 declare 할 것 입니다. :

declare function mutate<P, A extends boolean = false>
  (props: CheckUserId<P, A>, addUserId?: A): void

 

알아둬라, 내가 A의 기본값을 설정했다 CheckUerId가 addUserId가 세트인지 아닌지에 따라 올바른 정보를 주는지 확실히 하기 위해

 

동작하는 function은 :

mutate({}) // 👍
mutate({ data: 'Hello folks' }) // 👍
mutate({ name: 'Stefan' }, false) // 👍
mutate({ name: 'Stefan' }, true) // 💥 userId is missing
mutate({ name: 'Stefan', userId: 'asdf' }, true) // 👍 userId is here

코드가 truthy와 falsy한 값들에 많이 의존하고 있다면 유용할 것입니다.

 

언제나 그렇듯, playground 가 있습니다.

---

 

원문

https://fettblog.eu/boolean-in-javascript-and-typescript/