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

이펙티브 타입스크립트 (댄 밴더캄 지음) 를 읽고 정리

📍에디터에서 타입 에러의 이유를 알려줌

- 타입 에러가 발생하는 이유를 에디터에서 친절하게 설명해준다

- 타입 에러 예시

function getElement(elOrId: string | HTMLElement | null): HTMLElement {
    if (typeof elOrId === "object") {
        // typeof null === object
        return elOrId; // null 을 반환할 수 없어서 (HTMLElement에 할당할 수 없어서) 에러 발생
    } else if (elOrId === null) {
        return document.body; // 전역 객체로 body에 접근
    } else { // elOrId가 string인 경우
        const el = document.getElementById(elOrId); // null 일 가능성이 있음
        return el; // null 을 반환할 수 없어서 (HTMLElement에 할당할 수 없어서) 에러 발생
}

 

📍lib.dom.d.ts

- lib.dom.d.ts 는 타입 선언 파일 중 DOM 타입 선언을 모아놓은 것이다

(타입스크립트에 내장되어 있음)

 

fetch 함수를 만들고 fetch 부분을 crtl + 좌클릭 하면 lib.dom.d.ts 으로 이동한다

(웹스톰 IDE 기준)

const response = fetch("http://example.com");

// 1. fetch
declare function fetch(
  input: RequestInfo | URL,
  init?: RequestInit,
): Promise<Response>;

// 2. RequestInfo
type RequestInfo = Request | string;

// 3. Request
// 타입과 값이 분리되어 모델링되어 있음 (RequestInfo, RequestInit)

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

// 4. RequestInit
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;
  /** 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;
}