[TypeScript] 설치 과정 및 에러 해결

TypeScript란 범용성이 넓은 자바스크립트 특성상 문법적인 허용범위가 너무 넓어서 코드가 정상적으로 컴파일 되더라도 실행에 문제가 생기는 경우가 많았다. 이것을 해결하기위해 문법적인 부분을 추가한 것이 Typescript라 보면되겠다. 거의 똑같다.

 

우선

https://nodejs.org/ko/

Node.js

node -v
npm -v

yarn 설치

보통 npm을 명령어로 설치하지만 페이스북이 만든 자바스크립트 패키지 매니저로 yarn이 더 안정성과 보안성이 뛰어나다고 알려져있다.

npm install yarn -g
//작업 폴더 만들기
yarn init -y

//타입스크립트를 글로벌 전역으로 설치한다.
yarn install -g typescript

// 환경설정 파일 설치
 tsc --init
 
 //만약 tsc --init 작동안할시
 
 tsc -watch 입력후 실행

tsc --init 문제가 초기에 해결이 안됐는데 아래와 같은 문구를 출력하였다. 이는 tsc -watch를 실행한 후에는 정상적으로 작동하였다.

error TS6231: Could not resolve the path '—init' with the extensions: '.ts', '.tsx', '.d.ts', '.cts', '.d.cts', '.mts', '.d.mts'.
  The file is in the program because:
    Root file specified for compilation

그러면 아래와 같이 파일이 생성되게 된다.

 

//Typescrpt를 node에서 실행가능하도록 런타임 설치
//ts를 js로 컴파일하여 js로 실행하도록 해준다.

yarn i ts-node --save-dev

 

yarn create next-app --typescript 프로젝트명

프로젝트명에는 대문자 x 


//아래 문구를 실행할때에는 무조건 행 프로젝트 디렉토리에서 실행해야한다.
yarn dev



//Eslin는 정해진 코드 포멧을 따르지 않을경우 에러를 표시해주는것으로 .eslintrc.json파일 안에 규칙을 정의한다.
yarn add -D @typescript-eslint/parser @typescript-eslint/eslint-plugin eslint-config-next eslint-config-prettier

.eslintrc.json 파일이 있을텐데 다 지우고 아래를 복붙



{
  "env": {
    "browser": true,
    "es6": true,
    "node": true
  },
  "parser": "@typescript-eslint/parser",
  "plugins": ["@typescript-eslint"],
  "extends": [
    "next/core-web-vitals",
    "plugin:@typescript-eslint/recommended",
    "prettier"
  ],
  "rules": {
    "@typescript-eslint/no-unused-vars": "error", // 사용되지 않는 변수를 에러로 인식
    "@typescript-eslint/no-explicit-any": "error" // any 타입 정의를 에러로 인식
  }
}

yarn add -D prettier



.prettierrc.json 해당 프로젝트 경로에 생성
//일반적인 .prettierrc.json 규칙 아래와 같이 정의
{
  "semi": false,
  "trailingComma": "es5",
  "singleQuote": true,
  "tabWidth": 2,
  "useTabs": false
}

Default formatter를 아래와 같이 설정

format on save 도 설정