Quiz로 정리하는 타입스크립트 문법 (1)

Effective Typescript 책을 읽고 1장 ~ 10장 까지의 내용을 퀴즈로 정리해보았습니다.

다음 문제에 답해보면서 개념을 정리해보세요 🙏🏻  해설은 글 아래에 달아놓겠습니다.

 

문제

1. 자바스크립트 파일 main.js를 main.ts로 바꾸면 오류가 발생할까?
2. 타입 체크를 통과하더라도 런타임에 오류가 발생할 수 있을까?
3. 타입스크립트의 strictNullChecks는 어떤 설정일까?
4. 타입 오류가 있는 코드는 컴파일이 불가능할까?
5. instanceof 체크는 컴파일 타임에 일어날까 런타임에 일어날까?
6. 타입스크립트 타입을 많이 사용하면, 런타임 성능에 영향이 있을까?
7. {x, y, z} 타입은 {x, y} 타입에 호환될까?
8. any 타입을 사용하지 않아야하는 이유는 무엇일까?
9. 가장 작은 타입의 집합과, 가장 큰 타입의 집합은 어떤 타입일까?
10. A & B 타입과 keyof (A & B) 타입의 차이는 무엇일까? 어떻게 다른가?
11. number[]는 [number, number]에 할당 가능할까?
12. [number, number]는 number[]에 할당 가능할까?
13. 다음 typeof 3개에 대한 차이는 무엇일까?

type T1 = typeof p // p는 Person의 instance
const v1 = typeof p
typeof Cylinder // Cylinder는 클래스

14. 타입 단언보다 타입 선언을 사용해야 하는 이유는 무엇일까?
15. 그렇다면 타입 단언을 꼭 사용해야 하는 경우는 어떤 경우일까?
16. 자바스크립트 기본형은 불변이며, 메서드를 가질 수 있다.
17. string.include("hi")를 사용하면 자바스크립트에서 어떻게 동작할까?
18. string과 String의 차이는 무엇인가?

---

 

 

해설

1. 아이템 1 타입스크립트와 자바스크립트의 관계 이해하기 자바스크립트 파일 main.js를 main.ts로 바꾼다고 해도 달라지는 것이 없다. 타입스크립트는 자바스크립트의 상위 집합이라, 모든 자바스크립트는 타입스크립트이다. 그러나 반대로 일부 자바스크립트만이 타입체크를 통과한다.
2. 아이템 1 타입스크립트와 자바스크립트의 관계 이해하기 타입 체크를 통과하더라도 여전히 런타임에 오류가 발생할 수 있다.
3. 아이템 2 타입스크립트 설정 이해하기 타입스크립트 설정을 위해 tsconfig.json을 사용하는 것이 좋다. strictNullChecks는 null/undefined가 모든 타입에서 허용되는지에 대한 설정이다.  undefined는 객체가 아닙니다 와 같은 런타임 오류를 방지하기 위해서 사용해야한다.
4. 아이템 3 코드 생성과 타입이 관계없음을 이해하기 타입스크립트에서 변환과 코드 타입 체크는 독립적이기 때문에, 타입 오류가 있는 코드도 컴파일이 가능하다. 물론 noEmitOnError와 같은 설정을 통해서 별개로 타입 오류 발생 시 컴파일이 불가능하도록 설정할 수 있으며, 이렇게 설정하는 것을 권장한다.
5. 아이템 3 코드 생성과 타입이 관계없음을 이해하기 런타임에는 타입 체크가 불가능하다. instanceof 체크는 런타임에 일어나기 때문에 컴파일 되는 과정에서 모든 인터페이스, 타입, 타입 구문은 그냥 제거되어 버린다.
6. 아이템 3 코드 생성과 타입이 관계없음을 이해하기 타입과 타입 연산자는 자바스크립트 변환 시점에서 제거되기 때문에, 타입 연산은 런타임에 영향을 주지 않는다.
7. 아이템4 구조적 타이핑에 익숙해지기 자바스크립트는 본질적으로 덕 타이핑 기반이므로, 타입스크립트도 요구사항만 만족한다면 타입을 신경쓰지 않는다. 따라서 {x, y, z} 타입은 {x, y} 타입에 호환되므로 타입스크립트는 오류로 잡지 않는다.
8. 아이템5 any 타입 지양하기 any 타입에는 타입 안전성이 없다. 또한 언어 서비스가 적용되지 않기 때문에, 자동완성 및 도움말 기능을 사용할 수 없다.
9. 아이템 7 타입이 값들이 집합이라고 생각하기 가장 작은 집합은 아무 타입도 포함하지 않는 공집합 never 타입이다. 모든 타입을 포함하는 전체 집합은 unknown이다.
10. 아이템 7 타입이 값들이 집합이라고 생각하기 타입 연산자는 인터페이스의 속성이 아닌, 값의 집합에 적용되며, 추가적인 속성을 가지는 값도 여전히 그 타입에 속한다. 따라서 A와 B라는 인터페이스가 있을 때 A & B → A와, B 둘 다 가지는 값도 인터렉션 타입에 속하게 된다.
11. 아이템 7 타입이 값들이 집합이라고 생각하기 불가능하다. T1이 T2에 할당 가능하다는 것은 T1이 T2의 부분 집합이어야 한다. number[]는 [number, number]에 할당 불가 하지만, [number, number]는 number[]에 할당 가능하다.
12. 아이템 7 타입이 값들이 집합이라고 생각하기 가능하다.
13. 아이템 8 타입 공간과 값 공간의 심벌 구분하기 Person, object, function 타입의 관점에서 typeof는 타입스크립트 타입을 반환한다. 값의 관점에서 typeof는 자바스크립트 런타임 연산자로, 자바스크립트는 6개의 런타임 타입(string, number, boolean, undefined, object, function)만이 존재한다. 따라서 object가 반환된다. typeof Cylinder도 마찬가지로 6개의 런타임 타입 중 하나로 반환되는 데, Cylinder는 생성자 함수이기 때문에 function이 반환된다.
14. 아이템 9 타입 단언보다는 타입 선언을 사용하기 타입 선언이란 alice: Person와 같이 :를 사용하여 선언된 타입임을 명시하는 것이다. 타입 단언이란 as Person과 같이 as를 사용해서 타입스크립트가 추론한 타입이 있더라도 Person 타입으로 간주하라는 것이다. 타입 선언 시에은 할당되는 값이 해당 인터페이스를 만족하는지 검사하지만, 타입 단언은 강제로 타입을 지정했으니 타입 체커에게 오류를 무시하라고 하는 것이다.
15. 아이템 9 타입 단언보다는 타입 선언을 사용하기 타입 단언을 사용하는 것이 더 좋은 경우도 있다. 예를 들어서 DOMEliment에 접근할 때이다. 타입스크립트는 DOM에 접근할 수 없기 때문에 DOMElimen에 대한 정보를 알지 못한다. 개발자가 타입스크립트보다 더 정확히 알고 있을 때 타입 단언을 사용하는 것이 좋다.
16. 아이템 10 객체 래퍼 타입 피하기 자바스크립트 기본형은 불변이며 메서드를 가지지 않는다.
17. 아이템 10 객체 래퍼 타입 피하기 string은 자바스크립트 기본형은 불변이며 메서드를 가지지 않는다. 하지만 ‘primitive’.charAt(3)와 같이 사용할 때, 자바스크립트 내부적으로 string을 String으로 변환한다. String은 string의 래퍼타입으로 정적 메서드를 가진다. 따라서 charAt, incldues와 같은 메서드를 활용할 수 있게 한다.
18. 아이템 10 객체 래퍼 타입 피하기 string은 자바스크립트 기본형, String은 string의 래퍼타입이다. string은 String에 할당할 수 있지만, String은 string에 할당할 수 없다. s: String = “primitive”와 같이 쓸 수 있지만, 굳이 이렇게 할 필요가 없다.