타입스크립트 딥다이브

해당 내용은 타입스크립트 딥다이브를 보고, 내용을 요약하고 정리합니다.

아는 내용이 섞일 수 있지만 복습차 테크블로그에 정리를 진행하고 있습니다.

2024.05.31 자로 업데이트 되었으며, 학습한 내용이 계속 업데이트 될 예정입니다.

 

원시 데이터에서 동등 연산자와 일치 연산자 차이

자바스크립트에서 동등 연산자(==), 일치 연산자(===)가 존재합니다.

이때 동등 연산자는 탄력적으로 string을 number로 변환합니다.

console.log(5 == '5') // true
console.log(5 === '5') // false

console.log('' == '0') // false
console.log(0 == '') // true

console.log('' === '0') // false
console.log(0 === '') // false

 

타입스크립트에서 동등 연산자(==)와 일치 연산자(===)는 컴파일 단계에서 에러를 출력하기 때문에 이러한 부분에 대해 사전에 대비할 수 있어 걱정할 필요가 없습니다. 팁으로는 항상 === 와 !==를 사용하고 null 체크의 경우에는 동등 연산자를 사용해도 됩니다.

 

참조 데이터에서 동등 연산자와 일치 연산자 차이

만약 두 개의 객체를 비교하려고 한다면 동등 연산자와 일치 연산자로 충분히 비교하기 어렵습니다.

console.log({ a: 123 } === { a: 123 }) // False
console.log({ a: 123 } == { a: 123 }) // False

 

깊은 비교를 사용하려면 여러 라이브러리를 통해 깊은 비교를 할 수도 있습니다. 예를 들어 lodash, deep-equal 등이 있습니다.

항상 깊은 비교를 할 필요는 없습니다, 객체의 유무를 판단하기 위해서 id 값을 체크하면서 일치 여부를 확인할 수도 있습니다.

type IdDisplay = {
	id: string;
    display: string;
}

const list: IdDisplay[] = [
	{
    	id: 'foo',
        display: 'Foo Select'
    },
    {
    	id: 'bar',
        display: 'Bar Select'
    }
];

const fooIndex = list.map(i => i.id).indexOf('foo');
console.log(fooIndex);

참조 연산자

아래는 참조에 대한 레퍼런스 관련 내용입니다.

var foo = {};
var bar = foo;

foo.baz = 123;
console.log(bar.baz) // 123

 

참조에 대한 일치 연산자 레퍼런스는 아래와 같습니다.

var foo = {};
var bar = foo;
var baz = {};

console.log(foo === bar); // true
console.log(foo === baz); // false

Null vs Undefined

자바스크립트와 타입스크립트에는 두 가지 타입이 있습니다. null과 undefined는 각기 다른 것을 의미합니다.

• 무엇인가 초기화되지 않았을 경우 undefined
• 무엇인가 초기화 후 의도적으로 null 값을 할당했을 경우

아래는 ==를 이용하여 null과 undefined를 비교했을 때의 레퍼런스입니다.

// null과 undefined는 `==`를 사용해도 일치합니다.
console.log(null == null) // true
console.log(undefined == undefined) // true
console.log(null == undefined) // true

// 다음과 같은 경우에는 false를 반환합니다.
console.log(0 == undefined) // false
console.log('' == undefined) // false
console.log(false == undefined) // false

 

null을 확인할 경우에는 == null와 같이 동등 연산자를 사용하여 비교하는 것이 좋습니다. 일반적으로 undefined와 null을 비교 할 일은 거의 없습니다. == undefined를 사용하여 비교할 수도 있지만, == null을 사용하는 것이 짧고 더 흔하게 사용이 됩니다.

 

타입스크립트에서 undefined는 명시적으로 사용하는 것을 제한해야합니다. 왜냐하면 타입스크립트는 별도로 구조를 문서화할 수 있는 기회를 제공하기 때문입니다.

function foo() {
	// if Something
	return { a: 1, b: 2 }
    // else
    return { a: 1, b: undefined }
}

 

위의 레퍼런스는 아래의 타입 어노테이션을 통해 변경을 할 수 있습니다.

function foo(): { a: number; b?: number } {
	// if Something
    return { a: 1, b: 2}
    // else
    return { a: 1 }
}

 

undefined를 유효성을 나타내는 수단으로서 사용을 하지 않는 것이 좋습니다.

function toInt(str: string) {
	return str ? parseInt(str) : undefined;
}

 

위의 함수의 경우 유효성을 나타내기 위해 undefined을 수단으로서 사용을 하고 있습니다.

이보다는 아래의 레퍼런스를 통해 작성을 하는 것이 바람직합니다.

function toInt(str: string): { vaild: boolean; int?: number } {
	const int = parseInt(str);
    if (isNan(int)) {
    	return { vaild: false }
    } else {
	return { vaild: true, int }    
	}
}

 

JSON 표준의 경우에는 null 인코딩을 지원하지만 정의되지는 않습니다. JSON이 null 속성으로 객체를 인코딩할 때 값으로 포함되는 반면, undefined는 제외됩니다. 

JSON.stringfy({ willStay: null, willBeGone: undefined });

 

NodeJS 스타일의 코드는 에러 매개변수를 null을 표준으로 사용을 하고 있습니다. 하지만 타입스크립트 팀의 경우에는 null을 사용하고 있지 않습니다. 타입스크립트 팀에서는 undefined을 사용하는 것을 추천하고 있으며, 이에 따른 이유는 명확하지는 않지만, 타입스크립트 컴파일러를 개발하는 가이드일 뿐 타입스크립트 일반 가이드는 아니기 때문에 두 방식 모두 특징들을 내포하기 있어 타입스크립트를 사용하는 와중에서는 타입스크립트 가이드를 따르는 것이 바람직할 것 같습니다.