TypeScript 개발환경 구성의 순서, 화살표함수 표현식의 차이

TS 개발환경 구성의 순서

1. 폴더 만들고 터미널에서 명령어 입력하여 프로젝트 생성

$ npm init -y

2. HTML은 ts 확장자를 실행할 수 없으니까 패키지 설치 (parcel이 번들링하여 실행 가능)

$ npm i -D parcel typescript

3. HTML의 헤드 태그에 type="module" 속성 추가 → ts 확장자를 HTML 파일에서 불러오기 위한 설정

<script type="module" src="./src/main.ts"></script>

4. TS의 구성옵션을 제공하기 위해 tsconfig.json 파일 생성

$ npx tsc --init

5. TS 파일은 터미널에서 명령어로 실행해야 함 (React에서 npm start 명령어를 사용하는 것과 동일)

$ npm run dev

이렇게 실행하면 dist 디렉토리가 생성되고 번들링된 파일이 실행됨

dist/index.html 파일을 살펴보면 main.js 파일이 생성되어 있음

dist/main.js 파일을 살펴보면 번들링된 파일이 생성되어 있음

※ 참고 - https://odada.me/318

---

TS 화살표함수 표현식의 차이

TS에서 화살표함수를 작성하는 방식이 2가지가 있다.

// 첫번째 방식
const sum2: (a: number, b: number) => number = (a, b) => {
  return a + b;
};
sum2(1, 2);

(a: number, b: number) => number 부분에서 sum2의 타입을 명시적으로 지정한다.

그래서 sum2는 (a: number, b: number) => number 타입의 함수임이 보장된다.

= (a, b) => { return a + b; }; 부분에서 실제 함수 구현을 제공한다.

이 방식은 함수 타입을 명확히 명시하여, 함수 구현부가 바뀌더라도 타입 검사가 확실하게 이루어진다.

// 두번째 방식
const sum2 = (a: number, b: number) => {
  return a + b;
};
sum2(1, 2);

함수 선언과 동시에 매개변수와 반환 타입을 타입스크립트가 추론한다.

이 방식은 코드가 더 간결하고, 타입을 명시적으로 지정할 필요가 없다.

하지만 타입스크립트의 타입 추론이 정확하다는 전제하에 이루어진다.

- 1번 방식: 타입을 명시적으로 지정하므로 명확하고 직관적, 함수 타입이 변경되었을 때 오류를 잡기 쉽다.
- 2번 방식: 코드가 더 간결하며, 타입스크립트의 타입 추론을 활용한다.
타입스크립트의 타입 추론 기능이 강력하므로, 대부분 2번 방식을 사용하는 것이 일반적.
복잡한 함수 타입이나 가독성을 높이고자 할 때는 1번 방식을 사용하는 것이 좋다.