tsx파일

리액트와 타입스크립트를 사용하면서 궁금한 점이 생겼다.

typescript는 .ts파일을 .js파일로 컴파일해서 실행시키는 걸로 알고 있는데

리액트프로젝트 폴더에는 .js파일이 없다!!! 

.tsx파일이 있긴 하긴 한데

 

.js파일이 없는데도 타입스크립트가 실행될 수 있는 이유는 
타입스크립트가 웹페이지의 html소스코드에 직접 작성되어 있기 때문입니다. 
html소스코드에서 script 태그를 사용하여 작성된 자바스크립트 코드는 
브라우져가 이를 읽어들여 실행합니다

라는 답변을 받기는 했는데 더 자세히 알고 싶다.

 

우리형의 답변(chatGPT)

React is a JavaScript library for building user interfaces, and TypeScript is a programming language that is a super set of JavaScript. When using React with TypeScript, the code is written in TypeScript and then transpiled (converted) to JavaScript, so that it can run in a web browser. Therefore, there will not be a .js file, but instead, a .tsx file (TypeScript with JSX) which will be transpiled to a .js file that can run in the browser.

리액트는 어쩌구저쩌구 타입스크립트느 어쩌구....타입스크립트로 작성된 코드는  자바스크립트로 바뀌어 웹서버에서 실행된다. 근데 .js파일이 없는 대신 .tsx파일(타입스크립트+jsx)있다. 이게 .js 파일로 변환되어 브라우저에서 실행될 수 있게 된다.

 

그럼 변환된 .js파일은 어디있는데요?

알아서 변환돼서 실행된다는건가? 파일은 안남기고?

 

그냥 수동으로 컴파일해 봤는데 

"use strict";
exports.__esModule = true;
var react_1 = require("react");
require("./App.css");
function App() {
    return (<div>
      hihihi12
    </div>);
}
exports["default"] = App;

이렇게 나온다  뭐 어쩐다는거지?

 

그냥 .jsx나 .js 확장자 파일이 .tsx파일로 변경되어서 읽히는건가?