<aside> 💡 아이템 13~18 발표 준비 (B조)

</aside>

아이템 6 편집기를 사용하여 타입 시스템 탐색하기

편집기상의 타입 오류를 살펴보는 것도 타입 시스템의 성향을 파악하는 데 좋은 방법이다.

function getElement(elOrId: string | HTMLElement | null): HTMLElement {
	// 🤔 typeof null은 "object"이므로, 여전히 null일 가능성이 있습니다.
  if (typeof elOrId === 'object') {
    return elOrId
    // ~~~~~~~~~~~~~~ 'HTMLElement | null' 형식은 'HTMLElement' 형식에 할당할 수 없습니다.
  } else if (elOrId === null) {
    return document.body
  } else {
	  // 🤔 document.getElementById는 null을 반환할 가능성이 있습니다.
    const el = document.getElementById(elOrId)
    return el
    // ~~~~~~~~~~ 'HTMLElement | null' 형식은 'HTMLElement' 형식에 할당할 수 없습니다.
  }
}

언어 서비스는 라이브러리와 라이브러리의 타입 선언을 탐색할 때 도움이 됩니다.

const response = fetch('<http://example.com>')

// ✅ fetch는 Promise를 반환하고 두 개의 매개변수를 받는다.		
declare function fetch(
	input: RequestInfo | URL, init?: RequestInit
): Promise<Response>;

type RequestInfo = Request | string;

declare var Request: {
    prototype: Request;
    new(input: RequestInfo | URL, init?: RequestInit): Request;
};

// ✅ Request를 생성할 때 사용할 수 있는 모든 옵션.
interface RequestInit {
    /** A BodyInit object or null to set request's body. */
    body?: BodyInit | null;
    /** A string indicating how the request will interact with the browser's cache to set request's cache. */
    cache?: RequestCache;
    /** A string indicating whether credentials will be sent with the request always, never, or only when sent to a same-origin URL. Sets request's credentials. */
    credentials?: RequestCredentials;
    /** A Headers object, an object literal, or an array of two-item arrays to set request's headers. */
    headers?: HeadersInit;
    /** A cryptographic hash of the resource to be fetched by request. Sets request's integrity. */
    integrity?: string;
    /** A boolean to set request's keepalive. */
    keepalive?: boolean;
    /** A string to set request's method. */
    method?: string;
    /** A string to indicate whether the request will use CORS, or will be restricted to same-origin URLs. Sets request's mode. */
    mode?: RequestMode;
    priority?: RequestPriority;
    /** A string indicating whether request follows redirects, results in an error upon encountering a redirect, or returns the redirect (in an opaque fashion). Sets request's redirect. */
    redirect?: RequestRedirect;
    /** A string whose value is a same-origin URL, "about:client", or the empty string, to set request's referrer. */
    referrer?: string;
    /** A referrer policy to set request's referrerPolicy. */
    referrerPolicy?: ReferrerPolicy;
    /** An AbortSignal to set request's signal. */
    signal?: AbortSignal | null;
    /** Can only be null. Used to disassociate request from any Window. */
    window?: null;
}

요약

아이템 7 타입이 값들의 집합이라고 생각하기