[6장] 타입 설계 (아이템 45 ~ 아이템 52)

[dahye1013]

[6장 퀴즈]

타입 추론 (아이템 45 ~ 아이템 52)

아래 마크다운을 복사 붙여넣기해서 코멘트로 퀴즈를 달아주세요 :)
객관식, 주관식에 상관없이 편하게 만들어주세요!

부가 설명을 달고 싶다면, 해설을 정답과 함께 옵션으로 작성하시면 됩니다. ☺️

예시

### 아이템 N

퀴즈 내용 객관식의 정답을 골라보세요!
(퀴즈 내용)

1. 1번
2. 2번
3. 3번

<details>
<summary>퀴즈 정답</summary>
<div markdown="1">    
정답은 1번!
</div>
</details>

[tooooo1]

아이템 45

dependencies와 devDependencies의 차이점은? 그리고 우리가 사용하는 typescript는 둘 중 어디에 속해야하고 그 이유는 무엇일까요?

퀴즈 정답

정답은 devDependencies. 둘의 큰 차이점은 런타임이에요. 런타임에 필요 없다면 devDependencies, 필요하다면 dependencies. 타입스크립트는 런타임에는 필요없어서 devDependencies에 속해요.

[tooooo1]

아이템 46

실제 라이브러리와 타입 정보의 버전이 불일치할 때의 문제점은?

퀴즈 정답

첫 번째, 라이브러리를 업데이트했지만 타입은 업데이트 하지 않은 경우. 타입 오류를 야기한다. 두 번째, 그 반대로 타입이 최신인 경우. 첫 번재 경우와 비슷하지만 대소 관계가 반대다. 타입체커는 최신 API 기준으로 코드를 검사하지만 실제 런타임에서는 과거 버전으로 검사된다. 세 번째, 프로젝트에서 필요한 타입스크립트 버전보다 라이브러리에서 필요로 하는 타입스크립트 버전이 최신인 경우. 라이브러리들의 최신 타입 정보를 얻기 위해서 타입스크립트 최신 버전을 사용해야 한다. 네 번째. @types 의존성 중복. 버전이 다르면 의존성 중복이 발생할 수 있다.

[tooooo1]

아이템 49

콜백함수 this 사용 시, 타입스크립트 관점으로 고려해야할 점은?

퀴즈 정답

자바스크립트의 this 바인딩을 고려하여 타입 정보를 명시해야 한다.

[MINGDY98]

아이템 46

@types 의존성과 관련된 세 가지 버전을 말하시오.

퀴즈 정답

@types 버전, 라이브러리 버전, 타입스크립트 버전

[MINGDY98]

아이템 47

라이브러리 개발자는 라이브러리 사용자를 위해서 공개 메서드의 어떤 형태의 타입이든 익스포트하는 것이 좋다.(O/X)

퀴즈 정답

정답은 O

[MINGDY98]

아이템 48

빈칸에 알맞는 말을 작성하세요.

익스포트된 함수, 클래스, 타입에 주석을 달 때는 __ 형태를 사용하는 것이 좋다. __ 형태의 주석을 달면 편집기가 주석 정보를 표시해 주기 때문이다.

퀴즈 정답

정답은 JSDoc/TSDoc

[yeomgahui]

아이템 45

다음 라이브러리들이 각각 어느 dependencies내에 위치해야할까요?

• @types/react
• typescript
• react

퀴즈 정답

- @types/react : devDependencies
- typescript : devDependencies
- react : dependencies

[yeomgahui]

아이템 46

프로젝트에서 사용하는 타입스크립트 버전보다 라이브러리에서 필요로하는 타입스크립트 버전이 최신일 경우 어떤 해결책이 있을까요?

퀴즈 정답

아래와 같은 해결 방법이 있습니다.
1. 프로젝트의 타입스크립트 버전을 올린다.
2. 라이브러리 선언의 버전을 원래대로 내린다.
3. declare module 선언으로 라이브러리 타입 정보를 없애 버린다.

[yeomgahui]

아이템 50

오버로딩 타입보다는 조건부 타입을 사용하는게 좋다. (O/X)

퀴즈 정답

-O
조건부 타입은 추가적인 오버로딩 없이 유니온 타입을 지원할 수 있다.

[dahye1013]

아이템 46

라이브러리가 자바스크립트로 작성된 경우, 타입 버전이 다를 때 발생하는 문제를 어떻게 해결 할 수 있을까요?

퀴즈 정답

1. 타입 선언을 업데이트해서 라이브러리와 버전을 맞춥니다.
2. 버전을 맞출 수 없는 경우, 보강 기법을 통해 타입 정보를 추가합니다.
3. 버전을 맞출 수 없는 경우, 타입 선언 업데이트를 직접 작성합니다.

[dahye1013]

아이템 45

타입스크립트의 시스템 레벨 설치가 추천되지 않은 이유는 무엇인가요?

퀴즈 정답

타입스크립트에 대한 팀원과의 버전을 맞추고, 프로젝트 셋업시에 별도 단계가 추가되기 때문입니다.

[dahye1013]

아이템 47

공개 메서드에 사용되는 타입은 융통성을 위해 export 하지 않는 것은 불필요한 일입니다.
사용자가 타입을 추출할 수 있기 때문인데요.
아래 getGift만을 사용하여 타입을 추출해보세요!

interface SecretName {
 first: string;
 last: string;
}
interface SecretSanta {
 name: SecretName;
 gift: string;
}
export function getGift(name: SecretName, gift: string): SecretSanta {
 // ...
}

퀴즈 정답

type MySanta = ReturnType<typeof getGift>; // SecretSanta
type MyName = Parameters<typeof getGift>[0]; // SecretName

[parksil0]

아이템 46

타입스크립트 등장 이전에 활발하게 사용되던 jQuery는 어떻게 타입스크립트에서도 사용이 가능한가?

퀴즈 정답

기존 라이브러리와는 별도로 관리되는 타입 버전이 있기 때문이다. DefinitelyTyped의 라이브러리 중 jQuery가 있다면 별도로 타입 라이브러리를 설치하여 사용할 수 있다.

[jlee0505]

아이템 50

아래 코드를 실행했을 때 콘솔에는 어떻게 뜰까요?

function double(x: number|string): number|string;
function double(x: any) { return x + x; }

console.log(typeof(double("Hello ")); // ?

1. string
2. any
3. number | string

퀴즈 정답

정답: 3

[parksil0]

아이템 47

아래의 코드에서 주석 부분의 타입은 실제 타입스크립트에 내장되어있는 인터페이스인데도 에러가 발생한다. 아래의 오류로 짐작 할 수 있는 것은?

const useIntersection = (
  ref: RefObject<HTMLElement>,
  options: IntersectionObserverInit, // 'IntersectionObserverInit' is not defined.eslint
): IntersectionObserverEntry | null => {
  const [intersectionObserverEntry, setIntersectionObserverEntry] =
    useState<IntersectionObserverEntry | null>(null);

  useEffect(() => {
    if (ref.current && typeof IntersectionObserver === 'function') {
      const handler = (entries: IntersectionObserverEntry[]) => {
        setIntersectionObserverEntry(entries[0]);
      };

      const observer = new IntersectionObserver(handler, options);
      observer.observe(ref.current);

      return () => {
        setIntersectionObserverEntry(null);
        observer.disconnect();
      };
    }
  }, [ref.current, options.threshold, options.root, options.rootMargin]);

  return intersectionObserverEntry;
};

export default useIntersection;

퀴즈 정답

해당 타입에 export가 되어있지 않아서 발생한 오류이다. 타입스크립트에서 지원하는 Parameters를 사용하여 타입을 추출하거나 같은 같은 타입으로 해당 파일에 타입을 선언한다.

[jlee0505]

아이템 45

@types (타입 선언)은 어디에 설치하는게 좋을까요?

1. dependency
2. devDependency

퀴즈 정답

정답은 2번 빌드 때는 타스 -> 자스로 변환되어 타입 선언이 굳이 필요 없기 떄문이다.

[jlee0505]

아이템 46

타입 선언의 버전관리를 위해 해결할 수 있는 2가지 방식은?

퀴즈 정답

정답: 1. 번들링 2. 완전한 타입 번들링은 타스로 프로젝트를 진행했을 때, 완전한 타입은 자스로 프로젝트를 진행했을 때 더 적절하다.

[guymoon]

아이템 45

peerDependencies 란 무엇인가요?

퀴즈정답

런타임에는 필요하지만 직접 import 하거나 require 하지 않아 직접적으로 관리하지 않는 라이브러리들. npm3~6은 peerDependencies가 자동으로 설치되지 않아 버전이 맞지 않아도 에러가 발생하지 않고 경고만 나타났지만 npm7 부터 기본으로 설치되고, 버전이 맞지 않으면 에러 발생

[parksil0]

아이템 50

아래의 코드 중 제일 마지막 줄의 변수 num의 타입은 number가 아닌 12이다. 만약 number로 바꾸기 위해서는 어떻게 코드를 수정해야 하는가?

function double<T extends number | string>(x: T): T;
function double(x: any) {
  return x + x;
}

const num = double(12);

퀴즈 정답

반환하는 타입을 명시한다. 이번 코드 예제에서는 삼항 연산자를 통해 반환하는 타입을 단언할 수 있다.
T extends string ? string : number

[guymoon]

아이템 50

add 함수의 (paramA, paramB)는 (string, string), (number, number) 일 수 있다.
함수 오버로딩을 이용해 아래 예시 1, 2, 3 과 같이 나타나게 빈칸 1, 2를 완성해주세요.

(________1_________)
(________2_________)
function add(paramA, paramB) {
  return paramA + paramB;
}


// 예시 1, 2, 3
add("name:", "gimoon"); // name:gimoon
add(10, 5); // 15
add(10, true); // TypeError

퀴즈정답

1. function add(paramA:string, paramB:string):string;
   
2. function add(paramA:number, paramB:number):string;

[seojihwan]

아이템 47

다음과 같은 코드를 제공하는 패키지가 있을때 Params를 사용할 수 있는 방법은?

interface Params {
  value: any
}

export function Test(params:Params){
  ...
}

(퀴즈 내용)

퀴즈 정답

  Parameters<typeof Test>[0]

그냥 패키지 제작자는 타입을 export해주는게 좋다 (어차피 드러남)

[seojihwan]

아이템 45

dependencies
devDependencies
peerDependencies
차이점을 설명하시오

퀴즈 정답

• dependencies
  • 코드를 실행할때 사용하는 의존성
• devDependencies
  • 개발환경에서 사용되는 의존성으로 실제 코드를 실행할때에는 사용하지않음
• peerDependencies
  • 책임을 참조하는 패키지에 위임하는 의존성
  • 참조하는 의존성이 singleton인 경우는 필수적으로 사용해야하고, peerDependencies에 대한 책임은 전파되므로 가급적 사용하지 않는것이 좋다.

[seojihwan]

아이템 46

semantic versioning에서 major, minor, patch realease차이점을 설명하시오

퀴즈 정답

• major release는 breaking change가 존재하는 변경사항
• minor는 breaking change가 존재하지 않는 new feature
• bc가 존재하지 않는 단순 버그 수정

[sooooo-an]

아이템 45

npm에서 dependencies 의존성을 설명한 것은 몇 번 인가요?

1. 프로젝트의 런타임에 사용되며 다른 사용자가 해당 프로젝트를 설치하면 함께 설치되는 라이브러리
2. 테스트하는데 사용되지만 런타임에는 필요 없는 것
3. 런타임에 필요하긴 하지만 의존성을 직접 관리하지 않는 라이브러리

퀴즈 정답

정답은 1번!

[sooooo-an]

아이템 46

타입스크립트를 사용할 때 의존성문제로 고려해야할 점이 아닌것은?
(퀴즈 내용)

1. 라이브러리의 버전
2. 타입스크립트의 버전
3. npm 버전

퀴즈 정답

정답은 3번!

[sooooo-an]

아이템 49

TSDoc의 규칙이 아닌 것은?
(퀴즈 내용)

1. @param
2. @returns
3. @types

퀴즈 정답

정답은 3번!

[areumsheep]

아이템 45

dependencies와 devDependencies의 차이점은 무엇인가요?

퀴즈 정답

바로 dependencies는 런타임에 포함되고 devDependencies는 그렇지 않다는 것입니다.
(다른 분들께서 많이 하셨지만 처음 안 내용이라 적었어요!)

[areumsheep]

아이템 47

함수 시그니처에서 파라미터 타입과 리턴 타입을 추출하는 방법은 무엇이 있을까요?

퀴즈 정답

정답은 Parameters와 ReturnType 제너릭 타입을 사용하는 것입니다!

[areumsheep]

아이템 48

아래 코드의 차이점은 무엇일까요?

// 1번 주석
/** 2번 주석 */

퀴즈 정답

2번 주석은 JSDoc 스타일의 주석으로 만들 수 있다는 사실입니다!
2번 주석을 사용하여 함수를 호출하는 부분에서 마우스를 올릴 경우 JSDoc 스타일의 주석을 툴팁으로 표시해줍니다.

[junghyeonsu]

아이템 45

타입스크립트를 시스템 레벨로 설치하는것을 권장하지 않는 이유 두 가지를 설명해주세요.

퀴즈 정답

1. 팀원들 모두가 항상 동일한 버전을 설치한다는 보장이 없음
2. 프로젝트를 셋업할 때 별도의 단계가 추가되어서

[junghyeonsu]

아이템 46

타입 선언을 업데이트해서 라이브러리와 버전을 맞추려 할 때, 업데이트해야 할 타입 선언의 버전이 아직 준비되지 않은 경우는 어떻게 해야할까요?

퀴즈 정답

보강(augmentation) 기법을 이용하면 됩니다.

사용하려는 새 함수와 메서드의 타입 정보를 프로젝트 자체에 추가하는 것.
또는 타입 선언 업데이트를 직접 작성하고 공개하는 것.

[junghyeonsu]

아이템 46

라이브러리를 공개하려고 할 때, 타입 선언을 자체적으로 포함하는 것과 타입 정보만 분리하여 DefinitelyTyped에 공개하는 것은 서로 장단점이 있습니다.

개발환경이 타입스크립트, 자바스크립트 각각 어느 방법이 권장되는지 설명해주세요.

퀴즈 정답

라이브러리가 타입스크립트로 작성

타입 선언을 라이브러리에 포함하는 것을 권장합니다.
타입스크립트 컴파일러가 타입 선언을 대신 생성해 주기 때문에, 타입스크립트로 작성된 라이브러리에 타입선언을 포함하는 방식은 잘 동작합니다.

// tsconfig.json
{
   "declaration": true
}

라이브러리가 자바스크립트로 작성

자바스크립트로 작성된 라이브러리면 손수 작성한 타입이 잘 동작하지 않을 수도 있고 실수를 했을 수도 있어서 잦은 업데이트를 요구합니다.

그래서 그냥 DefinitelyTyped에 공개해서 커뮤니티에 관리하고 유지보수하는게 좋아요.