[TS 면접 대비]

타입 단언을 써주는 것이 유용한 경우에 대해 설명해주세요.

 

개발자가 타입을 확실히 알고 있는 부분에 대해서 타입을 강제하고자 할 때 유용할 수 있습니다. 

 

예시로, 요소가 실제 html에 존재함을 알고 document.querySelector를 사용하는 경우에 as HTMLBodyElement 또는 !(not null 타입단언)로 타입단언을 해줄 수 있습니다.

두번째 경우로는, 가변적인 데이터 값을 저장하는 객체 데이터를 enum스럽게 활용하고 싶을 때 as const를 이용해 상수로 만들어줄 때 유용합니다. const enum을 대체하기 위해 주로 사용되며, 개별 속성에 지정해줄 수도 있고, 객체 차원에서 설정해줄 수 도 있습니다.

https://xpectation.tistory.com/218#as%--const

마지막으로, 유니언 타입을 통해 여러 타입을 받아오는 상황에서 특정 타입의 메소드를 사용하고 싶을 때 타입가드와 함께 사용할 수 있습니다.

 

타입 단언을 사용해 오류를 해결한 것 처럼 보여도 런타임 에러를 보장하지 않기 때문에 일반적으로 지양하거나 타입가드를 사용하는 것이 좋습니다.

 

 

타입 가드가 필요한 이유를 말하고, 타입 가드를 적용하는 방법에 대해 아는대로 설명해보세요.

유니언 타입을 통해 여러 타입을 받아오는 상황에서 특정 타입의 메소드를 사용하고 싶을 때 타입가드를 사용합니다. 즉, 타입 가드를 사용하면 데이터의 타입에 따라 대응하며 방어적인 코드를 짤 수 있게 해줍니다.

if문 또는 switch case문 꼴과 함께 주로 사용됩니다. 

함께 사용되는 주요 연산자로는 typeof, instanceof, in이 있습니다.
- typeof는 특정 코드의 타입을 문자열로 반환
- instanceof는 변수가 대상 객체의 프로토타입 체인에 포함되어있는지를 확인해 true/false를 반환
- in은 객체의 특성 속성이 있으면 true, 없으면 false를 반환

in연산자와 유사하지만 보다 복잡한 경우에서 객체 유니언 타입 중 하나를 구분할 땐, is 연산자를 사용하는 타입 가드 함수를 사용합니다.

 

그 외에도 논리 비교 연산자를 통해서도 타입 가드를 적용한 효과를 낼 수 있고, 구별된 유니언 타입을 사용하여 유니언 타입을 구성하는 여러 개의 타입을 특정 속성 유무가 아니라 특정 속성 값으로 구분하여 타입 가드를 수행할 수도 있습니다.

 

 

타입 가드 함수에서 반환값을 boolean을 쓰는것과 is 연산자를 사용하는건 어떤 차이가 있나요?

 

반환값으로 boolean을 사용하는 경우, 코드 블록 내에서 해당 값의 타입을 명시적으로 지정해주어야 합니다.

is 연산자를 사용하는 경우, TypeScript가 해당 타입을 자동으로 추론하므로 추가적인 타입 명시가 필요하지 않습니다.

 

어떤타입인지만 알수있고, ts의 장점을 잉요못함.

반환값으로 boolean을 사용하는 경우:

• 타입 판단 및 변환 분리: 타입 가드 함수에서 반환값으로 boolean을 사용하면 타입 판단과 타입 변환이 분리됩니다. 즉, 타입 가드 함수가 true를 반환하면 변수의 타입이 자동으로 업데이트되지만 false를 반환할 땐 아무 작업도 수행되지 않습니다. 따라서 호출자는 반환된 boolean 값을 기반으로 직접 타입 변환을 수행해야 합니다.
• 더 많은 유연성: 이 방법은 더 많은 유연성을 제공할 수 있으며, 타입 변환이 필요한 경우에만 수행할 수 있습니다. 하지만, 호출자가 타입 변환을 잊어버리거나 놓치는 경우가 있을 수 있습니다.

is 연산자를 사용하는 경우:

• 자동 타입 변환: is 연산자를 사용하면 TypeScript가 자동으로 해당 타입으로 변수를 변환해줍니다. 따라서 is 연산자가 true를 반환하면 해당 변수의 타입이 자동으로 업데이트되어 추가적인 타입 변환을 수행할 필요가 없습니다.
• 더 안전한 타입 검사: is 연산자를 사용하면 TypeScript가 타입 검사를 관리하므로, 호출자가 타입 변환을 놓치는 실수를 줄일 수 있습니다.

둘다 타입 가드의 역할은 수행하지만 주요 차이점은 is 연산자를 사용한 경우,  TypeScript는 이 함수가 타입 가드 역할을 한다는 것을 명확하게 이해합니다. TypeScript가 함수의 반환 값을 더 정확하게 이해하고 타입 가드 역할을 수행하기 때문에 코드의 가독성과 유지 보수성을 향상시키며 타입 에러를 미연에 방지하는데 도움이 됩니다.

 

 

interface에 partial 타입을 사용하면 어떤 이점이 있나요?

partial 타입은 특정 타입의 모든 속성을 모두 옵션 속성으로 변환한 타입을 생성해줍니다.

따라서 속성을 선택적으로 뽑아 사용하고 싶은 경우에 유용하게 사용됩니다. 예를 들어 데이터 수정 API를 다룰 때 유용하게 사용됩니다. 서버에 데이터를 전달하는 함수를 만들 때, 일부 속성만 넘겨줄 수도 있고 데이터 전체를 넘겨야하는 상황이 있을 수 있습니다. partial 타입을 쓰면 각 케이스 별로 따로 함수를 만들어줄 필요가 없으므로 유연성을 높이고, 효율적인 코드 작성을 가능하게 합니다.

 

 

맵드 타입의 keyof의  역할을 말하고 keyof를 사용했을 때의 장점을 말해보세요.

keyof는 특정 타입의 키 값만 모아 문자열 유니언 타입으로 변환해주는 역할을 합니다.

keyof를 사용하면 체를 수정할 때 속성 키를 실수로 변경하는 것을 방지할 수 있어서 객체 속성에 대한 타입 안정성을 확보할 수 있습니다. 속성 키를 문자열 리터럴 타입으로 가져오기 때문에, 객체를 업데이트할 때 실제 속성 키와 일치하지 않는 키를 사용하는 오류를 방지할 수 있습니다.

 

 

맵드 타입을 사용할 수 없는 상황을 설명해보세요.

맵드 타입을 사용할 때 객체의 key는 문자, 숫자, symbol 형태로 선언할 수 있고,  boolean 형태로는 선언할 수 없어서 key에 boolean 타입을 지정하려고 하면 타입 에러가 발생합니다.

또한 동적으로 속성 키가 결정된다면 맵드 타입을 사용할 수 없습니다. 맵드 타입은 정적으로 타입을 변환하는 데 사용되므로, 속성 키가 런타임에서 동적으로 결정되는 경우에는 적용하기 어렵습니다. 객체의 속성 key가 함수 실행 결과에 따라 달라지는 경우를 예시로 들 수 있습니다.

 

 

타입스크립트에서, 두 변수간 타입이 호환된다는 것은 무엇을 의미할까요? 문자열 타입의 변수 A와, 숫자 타입의 변수 B가 있을 때, B = A 와 같은 할당은 가능할까요?

서로 다른 타입이 2개 있을 때 특정 타입이 다른 타입에 포함되는지를 의미합니다. 구조적 타이핑 특성을 갖고 있어서 타입 유형보다는 타입 구조로 호환 여부를 판별합니다.

'string' 형식은 'number' 형식에 할당할 수 없기 때문에 B=A 형태의 할당은 불가합니다. 
할당하고 싶다면 문자열 타입을 숫자 타입으로 바꾸거나 숫자 타입을 문자열 타입으로 변환해주는 과정이 필요합니다. 

 

 

함수의 타입 호환에 있어, 아래의 예시는 정상적으로 동작할까요? 두 함수 표현식을 반대로 할당한 경우(getNumber = diff)에서도 동일한 결과가 발생하는지, 동일하지 않다면, 그 이유는 무엇인지 설명해주세요.

let getNumber = function (num: number) {
    return num;
}

let diff = function (x: number, y: number) {
    return x - y;
}

diff = getNumber
console.log(diff(10, 5))

 

주어진 코드는 정상적으로 동작합니다.

함수 타입에서의 호환 가능 여부는 '기존 함수 코드의 동작을 보장해줄 수 있는지'가 기준이 됩니다.

쉽게 얘기하면 파라미터가 더 많이 정의된 함수에 파라미터가 더 적은 함수를 할당 가능한 것입니다.

따라서 파라미터의 개수가 부족하기 때문에 getNumber = diff 에서는 오류가 발생합니다. 

 

 

네임스페이스와 타입 모듈의 차이점은 무엇인가요?

둘의 역할과 기능이 비슷하고, 컴파일 후에도 동일하게 작동합니다. 네임스페이스는 논리적 그룹화를 제공해서 여러 파일에 걸쳐 하나의 이름 공간을 공유하지만, 타입 모듈은 하나하나 import해야된다는 차이점이 있다.

 

내보내기와 가져오기를 할 때 타입 모듈은 각각의 요소에 대해 export, import 키워드를 이용하지만, 네임스페이스는 모든 요소를 단일 네임스페이스에 묶어서 내보내며, 가져올 땐 ///<reference> 지시문을 사용하거나, 외부 파일에서 네임스페이스를 가져오는 방식을 사용합니다.

• 타입 모듈(Type Module)은 외부 라이브러리와의 상호 작용, 모듈화된 코드 구조, 다른 파일 간의 의존성 관리 등에서 주로 사용됩니다.
• 네임스페이스(Namespace)은 대규모 애플리케이션에서 모듈화가 필요한 부분을 네임스페이스로 구성하여 관리할 때 사용됩니다

즉, 네임스페이스와 타입 모듈은 모듈화를 다루는 두 가지 다른 접근 방식일 뿐인건데, 현재는 공식문서에서 모듈 간의 의존성 관리, 코두 구성 향상 측면에서 네임스페이스보다는 타입 모듈의 사용을 권장하고 있습니다.

 

in 연산자와 타입 가드 함수 간의 차이점은 무엇이고 어떨때 사용하나요?

in 연산자는 객체의 속성이 존재하는지 여부를 확인하는 데 사용됩니다.  이 연산자는 런타임에서 실제 객체의 속성을 검사하며, 해당 속성이 존재하면 true를 반환하고, 그렇지 않으면 false를 반환합니다. 그리고 타입 가드 함수는 TypeScript에서 컴파일 타임에 타입 정보를 검사하고 특정 타입으로 값을 형식화하거나 형식을 좁히는 데 사용되는 함수입니다. 공통적으로는 타입 가드로서의 역할을 수행할 수 있습니다.

첫 번째 차이점은 타입 체킹 시점이 다르다는 것입니다.
: in 연산자는 런타임에서 객체의 속성을 체크하는 데 사용되며, 타입 가드 함수는 컴파일 타임에서 타입 정보를 체크하고 형식을 좁히는 데 사용됩니다.

그리고 적용범위가 다른데, in 연산자는 객체의 속성에만 적용되며, 타입 가드 함수는 변수 및 값에 대한 타입 검사에 적용됩니다.

 

내부 모듈(네임스페이스)과 외부 모듈(타입 모듈)를 간단하게 설명하고, 각각의 선언 방식 차이를 말하시오

 

내부 모듈은 네임스페이스를 의미하고, 외부모듈은 ts파일 최상위에서 export로 선언되어 외부로 공개된 모듈을 말합니다.

둘의 역할과 기능이 비슷하고, 컴파일 후에도 동일하게 작동합니다. 네임스페이스는 논리적 그룹화 덕분에 여러 파일에 걸쳐 하나의 논리적 영역 파일로 묶여 공유 및 컴파일되지만, 타입 모듈은 하나하나 import해야된다는 차이점이 있다.

 

내부 모듈이자 네임스페이스는 namespace키워드를 사용해 선언할 수 있습니다. 내보내고 싶으면 namespace내부에 있는 요소들에 export키워드를 사용합니다. 외부모듈은 일반적으로 ts파일에서 선언되고, ts 파일 내 최상위 수준에서 export키워드를 사용해서 코드를 작성하면 모듈로 간주됩니다.

 

 

Partial<T>와 Required<T>의 차이, Pick<T, K>와 Omit<T, K>의 차이, Exclude<T, U>와 Extract<T, U>의 차이를 각각 간단하게 말하시오

 

Partial<T>와 Required<T>의 차이

Partial은 T 타입의 모든 속성을 선택적으로 만드는 반면, required는 T타입의 모든 속성을 필수로 만듭니다.

 

Pick<T, K>와 Omit<T, K>의 차이

Pick은 T타입에서 K라는 속성들만 선택하여 새로운 타입을 생성하는 유틸리티 타입이고,
Omit은 T타입에서 K라는 속성들을 제외하고 나머지 속성을 가진 새로운 타입을 생성하는 유틸리티 타입입니다.

 

Exclude<T, U>와 Extract<T, U>의 차이

exclude는 T타입에서 U타입에 할당 가능한 값을 제외한 타입을 생성하고,extract는 T타입에서 U타입에 할당 가능한 값만을 추출하여 타입을 생성합니다.