[Hanaro] 19일차 / TypeScript (function, Array, tuple, interface)

TypeScript - 함수 타입

• never 반환 타입
  • never 반환 함수는 의도적으로 항상 오류를 발생시키거나 무한 루프를 실행하는 함수
    • ex)

    function fail(message : string) : **never** {
        throw new Error(`Invariant Failure : ${message}`);
    }
    

• 함수 오버로드 (function overloading)
  • 동일한 이름의 매개 변수만 다른 여러 버전의 함수를 만드는 것
• this
  • this의 타입을 정할 때 함수의 첫번째 매개변수 자리에 this를 쓰고 타입을 입력한다.
    • ex) function 함수명(this: 타입) { …}
  • 하지만 실제로 인자값을 받는 매개변수는 this: 타입을 제외한 나머지이므로 헷갈리면 안된다.

 

TypeScript - 배열과 튜플

• 배열
  • let 배열이름: 데이터타입[]; 의 형태
  • 배열과 함수 타입
    • string 배열을 반환하는 함수
      • let getNames: () => string[];
    • string을 반환하는 함수 배열
      • let nameGetters: (() => string)[];
  • 유니언 타입 배열
    • string 또는 number 배열
      • let stringOrArrayOfNumber: string | number[];
    • string 또는 number를 요소로 갖는 배열
      • let ArrayOfStringOrNumber: (string | number)[];
• noUncheckedIndexedAccess
  • 이 옵션을 true로 설정하면 인덱스 시그니처에 undefined를 포함시킨다.
    • 인덱스 시그니처는 인터페이스 객체가 임의의 키를 받고 해당 키 아래의 특정 타입을 반환할 수 있음을 나타낸다.
  • 배열의 length를 벗어난 인덱스에 접근하는 것은 방지할 수 있지만 해당 인덱스에 값이 존재하는지 확인하는 것은 아니다.
• 스프레드 (Spread and Rest Operations)
  • concat을 이용한 결합
    • concat은 결합하려는 두 배열의 타입이 같아야 한다. (서로 타입 다른 두 배열 결합하려면 spread 사용)
    • const 결합 = 배열1.concat(배열2); 형태
  • spread를 이용한 결합
    • 서로 타입이 다른 두 배열을 결합할 때 사용
    • 결합한 새로운 배열의 타입은 두 배열의 타입 중 어느 하나의 요소인 유니언 타입 배열로 된다.
    • const 결합 = […배열1, …배열2]; 형태
• 튜플 (tuple)
  • 고정된 크기의 배열이며 서로 다른 타입의 요소를 갖는다.
  • 각 인덱스에 알려진 특정 타입을 갖는다.
  • 튜플 선언
    • let 튜플: [string, number, boolean]; 과 같은 데이터 타입을 배열 안에 넣어서
  • 튜플 값 할당
    • 튜플 = [”Kim”, 20, true]; 같은 형식으로 해당 데이터 타입 위치에 값 할당
• 튜플 추론
  • TS는 생성된 배열을 가변 배열로 취급
    • 배열이 초기값으로 사용되는 경우
    • 배열이 함수에 대한 반환값으로 사용는 경우
  • 명시적 튜플 타입
    • 타입 애너테이션을 사용해 변수의 타입을 튜플 타입으로 지정
    • 함수가 튜플 타입을 반환하겠다고 선언한 후 배열 리터럴 반환
    • const getNameAgeTuple = (): [string, number] => { // do something... return ['Lim', 20]; }
  • const 어서션 읽기 전용 튜플
    • const 어서션은 TS에 타입을 유추할 때 읽기 전용이 가능한 값 형식 사용하도록 지시
    • const dogInfo = ['Jama', 3] **as const**; //tuple + readonly // readonly ["Jama", 3]
• const assertion
  • primitive 타입의 값 뒤에 as const 연산자가 붙으면 값 자체가 타입이 된다. (readonly)
  • let a = 'a' as const; // a의 타입 → 'a' let b10 = 10 as const; // b10의 타입 -> 10
  • object 타입의 값 뒤에 as const 연산자가 붙으면 readonly… 타입이 된다.
  • let cObj = {name: 'Lim', age: 26} as const; // cObj의 타입 -> readonly {name: 'Lim', age: 26} let dArr = ['hello', 'lim', 26, true] as const; // dArr의 타입 -> readonly ['hello', 'lim', 26, true]

 

TypeScript - 인터페이스

• 속성 타입
  • 선택적 속성
    • ? 물음표

    interface Book {
        author**?**: string;
        pages: number;
    }
    

  • 읽기 전용 속성
    • readonly

    interface Page {
        **readonly** text: string;
    }
    

• 호출 시그니처 (call signature)
  • 함수를 호출하는 방법에 대한 타입 시스템 설명
  • 매개변수의 목록과 반환 타입을 포함한다.
• 인덱스 시그니처 (index signature)
  • 임의의 key를 받고 해당 key에 대한 value의 타입 지정
  • 인덱스 시그니처를 사용하여 프로퍼티의 존재 유무를 알 수 없다.
• 중첩 인터페이스 (Nested Interface)
  • 속성의 타입이 다른 인터페이스나 객체 타입을 가질 수 있다.
• interface 확장(extends)
  • interface B extends A { … }
• interface 다중 상속(확장)
  • 프로퍼티는 동일한 타입이어야 한다.
  • interface C extends A, B { …}
• interface 병합(merge) 활용
  • 동일 프로퍼티 이름을 가질 경우 같은 타입이어야 한다.
    • interface A {id: number;}
    • interface A {name: string;}
    • let a: A = {id: 1, name: ‘Hong’};