[javascript] typescript에서 항상 .ts 대신 .tsx를 사용하는 데 단점이 있습니까?

거의 차이가없는 tsx대신 사용할 수 있습니다 ts. tsx분명히 jsxtypescript 내 에서 태그 사용을 허용 하지만 이것은 tsx를 약간 다르게 만드는 일부 구문 분석 모호성을 도입합니다. 내 경험상 이러한 차이는 그리 크지 않습니다.

유형 어설 션 <>은 jsx 태그의 마커이므로 작동하지 않습니다.

Typescript에는 유형 어설 션에 대한 두 가지 구문이 있습니다. 둘 다 똑같은 일을하지만 하나는 tsx에서 사용할 수 있고 다른 하나는 사용할 수 없습니다.

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

내가 사용하는 것 as대신 <>에 ts일관성뿐만 아니라 파일입니다. as실제로 <>사용할 수 없었기 때문에 Typescript에 도입되었습니다 .tsx

제약 조건이없는 일반 화살표 함수는 올바르게 구문 분석되지 않습니다.

아래의 화살표 기능의 확인이다 ts하지만의 오차 tsx등은 <T>태그의 시작에서와 같이 해석tsx

 const fn = <T>(a: T) => a

제약 조건을 추가하거나 화살표 기능을 사용하지 않으면이 문제를 해결할 수 있습니다.

 const fn = <T extends any>(a: T) => a
 const fn = <T,>(a: T) => a // this also works but looks weird IMO
 const fn = function<T>(a: T) { return a;}

노트

ts 대신 tsx를 사용할 수 있지만 반대하는 것이 좋습니다. 협약이 강력한 것입니다, 사람들은 연결 tsx에 jsx아마 어떤이 없습니다 놀라게 될 것입니다 jsx태그, 최소한에 가장 킵 개발자 놀라운.

위의 모호함 (아마도 완전한 목록은 아니지만)은 크지 않지만 ts파일을 하위 호환성 을 유지하기 위해 새 구문에 전용 파일 확장자를 사용하기로 결정하는 데 큰 역할을했습니다 .

답변

doSomething(<div>My div</div>);

let someValue: any = "this is a string";
let strLength: number = (<string>someValue).length;

let someValue: any = "this is a string";
let strLength: number = (someValue as string).length;