.ts 와 .tsx의 차이

.ts파일과 .tsx 파일은 어떤 차이가 있을까?

인턴으로 회사를 다니면서 개발을 하다보니 .ts 파일과 .tsx 파일이 모두 있는 것을 보았다. 둘 모두 타입스크립트 코드인 것은 알겠는데 어떤 차이가 있는지 몰라서 이번 기회에 알아보았다.

결론부터 말하자면 .ts는 순수한 typescript 파일이고, .tsx에서는 JSX 문법을 사용할 수 있다.

---

1. ts

순수 typescript 파일일 때 .ts를 쓰면 된다. 확장자가 .ts인데 JSX 문법을 사용하면 에러가 발생한다.

2. tsx

React에서 UI를 구성할 때 쓰는 typescript이다. JSX 문법을 사용하려면 .tsx 파일이어야 한다.
하지만 .ts 파일에서와 달리 <>를 통한 type assertion을 사용할 수 없다. (as를 사용하는 것은 가능하다)

let a: any;
let s = a as string // ok in tsx and ts
let s2 = <string>a // only valid in ts

또한, 제네릭 화살표 함수(Generic Arrow Function)을 사용할 수 없다. .tsx에서 제네릭 화살표 함수를 구현해야 한다면, 제네릭 매개변수에 extends를 사용해 컴파일러에게 알리거나, T 옆에 trailing comma를 사용하면 된다.

// extends를 사용하는 방법 (이 경우 null, undefined는 제네릭으로 사용할 수 없다.)
let GenericReturnFunc = <Type extends {}>(arg: Type): Type => {
  return arg;
}

// 컴마를 붙이는 방법
const GenericReturnFunc = <T,>(arg: T) : T => {
  return arg;
}

const returnResult = GenericReturnFunc<string | undefined | null>(null);