타입스크립트 알아보기

타입 스크립트 알아보기

• 타입 스크립트: 자바스크립트에 타입 시스템을 더한 superset

function greetJS(name) {
  return "Hello, " + name.toUpperCase();
}

console.log(greetJS(42));

• toUpperCase는 문자열로부터 호출할 수 있는 기능
• JS에서는 해당 코드를 실제로 돌려보기 전까지는 오류가 발생함을 알 수 없음
• 실제 서비스에 적용된 후 사용자에게 오류를 일으킬 수 있음

function greetTS(name: string) : string {
	return "Hello, " + name.toUpperCase();
}

console.log(greetTS(42));

• 하지만 타입스크립트는 함수의 매개변수의 자료형을 제한할 수 있음
• 실행 전에 오류 표시
• 모든 타입스크립트 코드는 작성이 완료된 후 이와 같은 과정을 거쳐 자바스크립트로 변환됨

TS의 장단점

• 단점: 가벼운 프로그램에서는 불필요한 번거로움만 더하게 될 수도 있음
• 장점: 큰 프로젝트에서는 코드의 안정성과 예측 가능성을 높여줌

---

"Cannot read properties of undefined (reading 'fileExists')" 오류 해결

타입스크립트(TypeScript) 프로젝트를 초기 세팅하고 ts-node로 코드를 실행하려다 아래와 같은 에러를 마주함

문제 상황

터미널에서 npx ts-node src/index.ts를 실행했더니 아래와 같은 에러가 발생하며 프로그램이 종료됨

C:\...\node_modules\ts-node\dist\configuration.js:91
    const { fileExists = ts.sys.fileExists, readFile = ts.sys.readFile, ... } = rawApiOptions;
                                ^
TypeError: Cannot read properties of undefined (reading 'fileExists')
    at readConfig (...)
    at findAndReadConfig (...)
    ...

• npm install typescript ts-node -D로 패키지를 재설치했음에도 동일한 에러가 발생

해결 방법:tsx로 넘어가기

• npm install typescript 명령어를 통해 가장 최신 버전의 타입스크립트가 설치되었는데, ts-node가 아직 최신 타입스크립트의 내부 구조 변경(내부 객체인 ts.sys를 참조하는 방식 등)을 완벽하게 지원하지 못해 발생하는 이슈였음
• 이 문제를 해결하기 위해 tsx 를 도입
  -tsx는 최신 TypeScript를 완벽하게 지원하며 속도도 훨씬 빠르고 설정도 간편해서, 최근 실무나 새로운 프로젝트에서 ts-node의 훌륭한 대체재로 떠오르고 있다고 함
• 또한 tsx를 사용하면 nodemon 없이도 자체 watch 명령어로 개발 환경을 쉽게 구축할 수 있음

1. tsx 설치하기

• 기존 ts-node 대신 tsx를 개발 의존성(DevDependencies)으로 설치

  npm install tsx -D
  

2. tsx로 코드 실행하기

• 기존에 사용하던 ts-node 명령어 대신 tsx를 사용하여 파일 실행

  npx tsx src/index.ts