[TypeScript] 타입 스크립트 시작하기, ts와 tsx

1. 타입 스크립트 시작하기

• 터미널에 아래 명령어로 타입 스크립트 설치

npm install typescript --save-dev

• 다음 명령어를 통해서 tsconfig.json 파일 생성
  • tsconfig.json은 타입스크리트 설정 파일이다.

npx tsc --init

 

 1) TypeScript 파일을 JavaScript로 컴파일 후 실행

• index.ts 파일이 있다고 가정했을 때 아래 코드를 실행한다.
  • npx tsc : ts파일을 컴파일하여 index.js 파일이 생성된다.
  • node index.ts : 생성된 index.js파일을 직접 실행하게 된다.

 2) ts-node를 사용하여 TypeScript 파일을 직접 실행

// ts -node 설치
npm install ts-node --save-dev

// typescript 파일 바로 실행
npx ts-node index.ts

 

 

2. .ts와 .tsx의 차이

• .ts는 typescript만 사용할 경우
• .tsx는 react component와 같이 사용할 경우에 사용한다.
• .tsx는 JSX문법을 사용할 수 있지만, .ts는 JSX문법을 사용할 수 없다.
  • JSX : JavaScript XML의 약자로 JavaScript를 확장한 문법이다.
    • 자바스크립트에서 HTML 문법을 사용할 수 있다.
    • 리액트로 프로젝트를 개발할 때 사용되므로 공식적인 자바스크립트 문법은 아니다.
    • 브라우저에서 실행하기 전에 바벨을 사용하여 일반 자바스크립트 형태의 코드로 변환된다.
• JSX를 사용하는 것과 사용하지 않는 경우

// 전통적인 JavaScript 방식
const button = document.createElement('button');
button.textContent = 'Click me';
document.body.appendChild(button);

// JSX 사용 예시
const button = <button>Click me</button>;