타입스크립트 메서드 타입가드

TypeScript는 컴파일 시에 옵셔널 속성의 존재 여부를 체크한다.
그러나 메서드의 경우에는 약간 다른 접근이 필요해 보인다.

1. 컴파일 시 체크:

• TypeScript는 컴파일 시에 옵셔널 메서드를 포함한 모든 옵셔널 속성의 타입을 체크한다.
• 이는 코드가 인터페이스나 타입 정의를 올바르게 따르고 있는지 확인하는 과정이다.

2. 메서드의 특별한 경우:

• 메서드는 함수이기 때문에, 단순히 존재 여부만이 아니라 호출 가능성도 고려해야 한다.

• 컴파일러는 메서드가 존재할 수도 있고 존재하지 않을 수도 있다는 것을 알고 있지만, 런타임에 실제로 존재하는지는 알 수 없다.

  이 부분에 대한 좀 더 자세한 설명:

  2.1 컴파일 시점과 런타임의 차이:

  • TypeScript 컴파일러는 코드를 분석하고 타입을 체크하는 과정에서 작동한다.
    이는 코드가 실행되기 전 단계이다.
  • 런타임은 JavaScript 코드가 실제로 브라우저나 Node.js 환경에서 실행되는 시점이다.

  2.2 브라우저 환경의 다양성:

  • 다양한 브라우저와 버전이 존재하며, 각각 지원하는 기능이 다를 수 있다.
  • 특히 새로운 API나 메서드의 경우, 일부 브라우저에서는 지원하지만 다른 브라우저에서는 지원하지 않을 수 있다.

  2.3 TypeScript의 타입 정의:

  • TypeScript는 브라우저 API에 대한 타입 정의를 제공한다.
    이 정의에는 최신 기능도 포함될 수 있다.
  • 그러나 이 타입 정의가 있다고 해서 실제 런타임 환경에서 해당 기능이 반드시 존재한다는 것을 보장하지는 않는다.

  2.4 런타임 환경의 불확실성:

  • 컴파일러는 코드가 어떤 환경에서 실행될지 정확히 알 수 없다.
  • 따라서 특정 메서드나 속성이 실제로 존재하는지 여부는 코드가 실행되는 시점, 즉 런타임에 확인해야 한다.

  2.5 안전한 코드 작성의 필요성:

  • 이러한 불확실성 때문에, 개발자는 특정 메서드나 속성을 사용하기 전에 그것의 존재 여부를 확인하는 코드를 작성해야 한다.
  • 이는 "feature detection" 또는 "capability checking"이라고 불리는 기법이다.

  예를 들어, checkVisibility 메서드의 경우:

• TypeScript 컴파일러는 이 메서드가 존재할 수 있다는 것을 알고 있지만,

• 실제로 코드가 실행되는 브라우저에서 이 메서드를 지원하는지는 런타임에 확인해야 한다.

  이러한 이유로, 컴파일 시점의 타입 체크만으로는 런타임의 실제 상황을 완전히 예측할 수 없으며, 안전한 코드 작성을 위해 추가적인 런타임 체크가 필요한 것이다.
  

3. 런타임 고려사항:

• 컴파일 시 체크만으로는 런타임에 메서드가 실제로 존재하고 호출 가능한지 보장할 수 없다.
• 이는 JavaScript의 동적 특성 때문입니다. 객체의 속성은 런타임에 변경될 수 있다.

4. 안전한 사용을 위한 접근:

• 따라서, 옵셔널 메서드를 안전하게 사용하기 위해서는 런타임에 추가적인 체크가 필요하다.
• 이는 타입 가드나 존재 여부 확인을 통해 이루어진다.

예시:

interface Person {
  name: string;
  greet?(): void;
}

function sayHello(person: Person) {
  // 컴파일 시 체크: TypeScript는 greet가 옵셔널 메서드임을 알고 있음
  // 런타임 체크: 메서드의 실제 존재 여부 확인
  if (person.greet) {
    person.greet(); // 안전하게 호출
  } else {
    console.log(`Hello, ${person.name}!`);
  }
}

결론적으로, TypeScript는 컴파일 시에 옵셔널 메서드의 타입을 체크하지만, 실제 존재 여부와 안전한 호출을 위해서는 런타임 체크가 추가로 필요하다. 이는 TypeScript의 정적 타입 체크와 JavaScript의 동적 특성 사이의 균형을 맞추는 방법이다.

Citations:
[1] https://zerotomastery.io/blog/typescript-type-checking/
[2] https://learning-notes.mistermicheels.com/javascript/typescript/runtime-type-checking/
[3] https://dev.to/narasimha1997/the-most-common-misconception-about-typescript-3f2a
[4] https://2ality.com/2022/07/typescript-check-property-key-array.html
[5] https://stackoverflow.com/questions/71616237/in-general-static-languages-are-type-checked-at-compile-time-is-typescript-als
[6] https://blog.logrocket.com/how-to-use-type-guards-typescript/
[7] https://www.typescriptlang.org/docs/handbook/release-notes/typescript-2-0.html
[8] https://www.typescriptlang.org/docs/handbook/2/narrowing.html

Citations:
[1] https://www.tempmail.us.com/ko/typescript/%EC%83%88%EB%A1%9C-%EC%B6%94%EA%B0%80%EB%90%9C-%EB%A9%94%EC%84%9C%EB%93%9C%EB%A5%BC-%ED%99%95%EC%9D%B8%ED%95%A0-%EB%95%8C-typescript-%EC%98%A4%EB%A5%98-%EC%B2%98%EB%A6%AC
[2] https://lcs1245.tistory.com/entry/JavaScript-%ED%95%A8%EC%88%98%EC%9D%98-%EC%A1%B4%EC%9E%AC%EC%97%AC%EB%B6%80-%ED%99%95%EC%9D%B8-%EC%9E%90%EB%A3%8C%ED%98%95%ED%99%95%EC%9D%B8-typeof-%EC%97%B0%EC%82%B0%EC%9E%90
[3] https://assu10.github.io/dev/2021/09/19/typescript-function-method/
[4] https://velog.io/@ron/why-use-typescript-for-frontend
[5] https://thdud4479.tistory.com/286
[6] https://www.daleseo.com/js-object-has-own/
[7] https://velog.io/@skulter/TypeScript-4.-%ED%95%A8%EC%88%98%EC%99%80-%EB%A9%94%EC%84%9C%EB%93%9C
[8] https://inpa.tistory.com/entry/TS-%F0%9F%93%98-%ED%83%80%EC%9E%85%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8%EC%97%90%EC%84%9C-%ED%95%A8%EC%88%98-%EB%AC%B8%EB%B2%95-%EB%8B%A4%EB%A3%A8%EA%B8%B0-%F0%9F%92%AF-%EC%B4%9D%EC%A0%95%EB%A6%AC