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
  • 이상적인 수정
  • 빠른 수정
  • 중간 수준

Was this helpful?

  1. 팁

객체 타입 설정

JavaScript 코드 베이스에는 다음과 같은 식으로 객체 리터럴을 초기화하는 경우가 매우 많습니다:

let foo = {};
foo.bar = 123;
foo.bas = "Hello World";

코드를 TypeScript 로 바꾸면 다음과 같은 오류들이 발생하게 됩니다:

let foo = {};
foo.bar = 123; // Error: Property 'bar' does not exist on type '{}'
foo.bas = "Hello World"; // Error: Property 'bas' does not exist on type '{}'

이것은 let foo = {} 순간 TypeScript가 foo 의 타입을 우변의 내용 {} (즉, 속성이 없는 객체)인 것으로 추론 하기 때문입니다. 그래서 그 객체에 새 속성을 할당하려 할 때 오류를 발생시킵니다.

이상적인 수정

TypeScript에서 객체를 초기화하는 올바른 방법은 할당과 함께 초기화하는 것입니다:

let foo = {
    bar: 123,
    bas: "Hello World",
};

이렇게 하면 코드 리뷰와 유지보수 모두 아주 좋습니다.

이어서 설명하는 빠른 수정이나 중간 수준의 지연 초기화 패턴은 일부 속성의 초기화를 빼먹는 실수 가 발생할 위험이 있습니다.

빠른 수정

TypeScript로 옮겨야 할 JavaScript 코드 베이스가 크다면 이상적인 수정으로 작업하기 어려울 수 있습니다. 그런 경우 조심스럽게 타입 표명 을 사용하여 컴파일러를 조용히시킬 수 있습니다:

let foo = {} as any;
foo.bar = 123;
foo.bas = "Hello World";

중간 수준

물론 any 사용은 TypeScript의 안전성을 무효화시키는 것이니 아주 나쁩니다. 중간 수준의 수정은 interface 를 하나 만들어서 다음을 보장하는 방법입니다.

  • 충분한 설명

  • 안전한 할당

아래에 나와 있습니다:

interface Foo {
    bar: number
    bas: string
}

let foo = {} as Foo;
foo.bar = 123;
foo.bas = "Hello World";

여기 인터페이스 사용으로 도움을 받는 상황이 간단하게 나와 있습니다:

interface Foo {
    bar: number
    bas: string
}

let foo = {} as Foo;
foo.bar = 123;
foo.bas = "Hello World";

// 나중에 코드 베이스 다른 곳에서:
foo.bar = 'Hello Stranger'; // 오류: `bas`를 `bar`라고 잘못 적었을 것임, 문자열을 숫자에 할당할 수 없음
Previous제네릭 타입 예시Next유용한 클래스

Last updated 3 years ago

Was this helpful?