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

TypeScript로 React 프로젝트 작업을 시작하고 일반 클래스 파일로 무엇을해야하는지 스스로에게 물어 봅니다. .ts또는 .tsx파일을 사용해야 .tsx하는데 React 프로젝트가 아니더라도 항상 파일을 사용하지 않을 이유를 찾을 수 없었 습니다!

.tsx파일을 사용하지 말아야하는 이유나 특정 상황이 있습니까? 아니라면 TypeScript 팀이 완전히 새로운 확장을 추가하는 이유는 무엇입니까?

거의 차이가없는 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파일을 하위 호환성 을 유지하기 위해 새 구문에 전용 파일 확장자를 사용하기로 결정하는 데 큰 역할을했습니다 .

xJavaScript가 JSX Harmony모드에 있을 때 마지막 에 사용하는 일종의 규칙 입니다. 즉, 이것이 유효한 경우 :

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

그러나 전처리 기가 사용자의 결정 (browserify 또는 webpack)을 알고있는 한 파일 확장자는 중요하지 않습니다. 하나 .js는 React 일 때도 모든 JavaScript를 사용 합니다. 동일은, 타이프 라이터 적용됩니다 ts/tsx.

편집하다

이제 대부분의 편집기 / IDE가 확장을 사용하여 React 구문을 활성화하거나 활성화하지 않기 때문에 React 구문이있는 Javascript 용 JSX와 React가있는 TypeScript 용 TSX를 사용하는 것이 좋습니다. 또한 더 표현력이 있다고 생각합니다.

.jsx 확장자가 도입 된 이유는 JSX가 JS 구문의 확장자이므로 .jsx 파일에 유효한 JavaScript가 포함되어 있지 않기 때문입니다.

TypeScript는 .ts 및 .tsx 확장자를 도입하여 동일한 규칙을 따릅니다. 실질적인 차이점은 <Type>구문이 JSX 태그와 충돌하기 때문에 .tsx는 유형 어설 션을 허용하지 않는다는 것 입니다. as Type주장은 <Type>.ts 및 .tsx의 일관성을 위해 대체로 도입되었으며 선호되는 선택으로 간주되었습니다. .ts의 코드가 .tsx 파일에서 사용되는 <Type>경우 수정해야합니다.

.tsx 확장자의 사용은 모듈이 React와 관련이 있고 JSX 구문을 사용함을 의미합니다. 그렇지 않은 경우 확장이 모듈 내용과 프로젝트의 역할에 대해 잘못된 인상을 줄 수 있으며 이는 기본적으로 .tsx 확장 사용에 대한 주장입니다.

반면에 파일이 React와 관련이 있고 어떤 시점에서 JSX를 포함 할 가능성이있는 경우 나중에 이름을 바꾸지 않도록 처음부터 .tsx로 이름을 지정할 수 있습니다.

예를 들어 React 컴포넌트와 함께 사용되는 유틸리티 함수는 어느 시점에서든 JSX를 포함 할 수 있으므로 .tsx 이름을 안전하게 사용할 수 있지만 Redux 코드 구조 는 React 컴포넌트를 직접 사용하지 않아야하며 React와 별도로 사용 및 테스트 할 수 있습니다. .ts 이름을 사용할 수 있습니다.

.tsx 파일을 사용하면 모든 JSX (JavaScript XML) 코드를 사용할 수 있다고 생각합니다. .ts 파일에서는 typescript 만 사용할 수 있습니다.

.ts파일에는 <AngleBracket>JSX 문법과 충돌 하는 유형 어설 션 구문이 있습니다. 많은 사람을 깨뜨리는 것을 피하기 .tsx위해 JSX를 사용 하고 및 파일 foo as Bar모두에서 허용되는 구문을 추가했습니다 ..ts.tsx

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

그리고 다른 하나는 as-syntax입니다.

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

.ts와 함께 사용할 수 as-syntax있지만 <string>someValue멋지다!