TypeScript Deep Dive
  • README
  • 시작하기
    • 왜 타입스크립트인가
  • 자바스크립트
    • 비교 연산자
    • 참조 연산자
    • Null vs. Undefined
    • this
    • 클로저
    • Number
    • Truthy
  • 미래의 자바스크립트
    • 클래스
      • 즉시실행함수
    • 화살표 함수
    • 나머지 연산자
    • let
    • const
    • 비구조화 할당
    • 전개 연산자
    • for...of
    • 이터레이터
    • 템플릿 리터럴
    • 프로미스
    • 제네레이터
    • Async Await
  • 프로젝트
    • 컴파일러 제어
      • tsconfig.json
      • 파일 경로 지정
    • 선언
    • 모듈화
      • 파일을 이용한 모듈화
      • globals.d.ts
    • 네임스페이스
    • 동적 표현식 가져오기
  • Node.js 시작하기
  • Browser 시작하기
  • 타입스크립트 타입 시스템
    • 자바스크립트 마이그레이션 가이드
    • @types
    • 주변 선언
      • 파일 선언
      • 변수
    • 인터페이스
    • 열거형(Enums)
    • lib.d.ts
    • 함수
    • 콜러블(Callable)
    • 타입 표명(Type Assertion)
    • 신선도(Freshness)
    • 타입 가드
    • 리터럴(Literal)
    • 읽기 전용(readonly)
    • 제네릭
    • 타입 인터페이스
    • 타입 호환성
    • Never 타입
    • 구별된 유니온
    • 인덱스 서명(Index Signature)
    • 타입 이동하기
    • 예외 처리
    • 믹스인(Mixin)
  • JSX
    • React
    • Non React JSX
  • Options
    • noImplicitAny
    • strictNullChecks
  • 타입스크립트 에러
    • 에러 메세지
    • 공통 에러
  • NPM
  • 테스트
    • Jest
    • Cypress
  • Tools
    • Prettier
    • Husky
    • ESLint
    • Changelog
  • 팁
    • 문자열 Enums
    • 타입 단언
    • 상태 저장 함수
    • 커링
    • 제네릭 타입 예시
    • 객체 타입 설정
    • 유용한 클래스
    • Import / Export
    • 속성 Setters
    • outFile 주의사항
    • 제이쿼리 팁
    • 정적 생성자
    • 싱글톤 패턴
    • 함수 파라미터
    • 토글 생성
    • Import 여러개 하기
    • 배열 생성
    • 생성자에서 타입정의
  • 스타일 가이드
  • 타입스크립트 컴파일러 구조
    • Program
    • AST
      • TIP: Visit Children
      • TIP: SyntaxKind enum
      • Trivia
    • Scanner
    • Parser
      • Parser Functions
    • Binder
      • Binder Functions
      • Binder Declarations
      • Binder Container
      • Binder SymbolTable
      • Binder Error Reporting
    • Checker
      • Checker Diagnostics
      • Checker Error Reporting
    • Emitter
      • Emitter Functions
      • Emitter SourceMaps
    • Contributing
Powered by GitBook
On this page
  • 명확한 예제
  • 화살표 구문
  • 뉴어블(Newable)

Was this helpful?

  1. 타입스크립트 타입 시스템

콜러블(Callable)

콜러블은 아래와 같이 어떤 타입 또는 인터페이스의 일부가 될 때 타입을 붙일(annotate) 수 있습니다

역주: 여기서 콜러블은 '()'를 말함

interface ReturnString {
  (): string
}

이 인터페이스의 인스턴스는 문자열을 반환하는 함수가 될 것입니다, 예를 들면

declare const foo: ReturnString;
const bar = foo(); // bar는 문자열 타입인 것으로 추론됨

명확한 예제

물론 콜러블에 대한 어노테이션에는 필요한 만큼 인자 / 선택적(Optional) 인자 / 나머지(Rest) 인자를 덧붙일 수 있습니다. 예를 들면, 이건 복잡한 경우입니다:

interface Complex {
  (foo: string, bar?: number, ...others: boolean[]): number;
}

인터페이스에 여러 개의 콜러블 어노테이션을 추가하여 함수 오버로딩을 지정할 수 있습니다. 예를 들면:

interface Overloaded {
    (foo: string): string
    (foo: number): number
}

// 예제 구현
function stringOrNumber(foo: number): number;
function stringOrNumber(foo: string): string;
function stringOrNumber(foo: any): any {
    if (typeof foo === 'number') {
        return foo * foo;
    } else if (typeof foo === 'string') {
        return `hello ${foo}`;
    }
}

const overloaded: Overloaded = stringOrNumber;

// 사용 사례
const str = overloaded(''); // `str`의 타입은 `string`으로 추론됨
const num = overloaded(123); // `num`의 타입은 `number`로 추론됨

물론 다른 어떤 인터페이스의 내용과 마찬가지로, 콜러블 인터페이스의 내용을 변수에 대한 타입 어노테이션으로 사용할 수 있습니다. 예를 들면:

const overloaded: {
  (foo: string): string
  (foo: number): number
} = (foo: any) => foo;

화살표 구문

콜러블 서명(signature)을 쉽게 지정할 수 있도록 Typescript는 단순 화살표 타입 어노테이션도 허용합니다. 예를 들어, number를 받고 string을 반환하는 함수는 다음과 같이 타입을 붙일 수 있습니다:

const simple: (foo: number) => string
    = (foo) => foo.toString();

화살표 구문의 한가지 한계: 오버로딩을 지정할 수 없음. 오버로딩을 지정하려면 본문 전체를 정의하는 구문을 { (someArgs): someReturn } 사용해야 함.

뉴어블(Newable)

뉴어블은 특별한 종류의 콜러블 타입 어노테이션으로, 앞에 new가 붙습니다. 이건 단순히 new를 통해 실행시켜야 함을 가리킵니다, 예를 들면:

interface CallMeWithNewToGetString {
  new(): string
}
// 사용법
declare const Foo: CallMeWithNewToGetString;
const bar = new Foo(); // bar는 string 타입의 변수로 추론됨
Previous함수Next타입 표명(Type Assertion)

Last updated 3 years ago

Was this helpful?