타입스크립트 개발환경 구성
빠른 개발 환경 구성
- 빈폴더 -> 터미널 -> npm으로 프로젝트를 만든다.
npm init -y: package.json 파일 만들기 npm i -D typescript: typescript 설치하기- src 폴더 안에 main.ts 파일 생성
- typescript 엄격 모드 적용하기
root 경로에tsconfig.json파일 생성
-> compilerOptions의 strict을 true로 설정
{
"compilerOptions": {
"strict": true
},
"include": [
"src/**/*.ts"
]
}- ts를 js로 변환하기
package.json 파일에서 script 내용을 다음과 같이 작성한다.
//...
"script":{
"tsc": "tsc src/main.ts"
},
//...- 터미널에
npm run tsc명령어 작성하면 끝!
parcel 번들러
- 빈폴더 -> 터미널 -> 필요한 패키지 설치
npm init -y: package.json 파일 만들기
npm i -D typescript parcel: ts와 parcel 설치 - package.json의 script를 아래와 같이 수정한다.
//...
"script":{
"dev": "parcel ./src/index.html",
"build": "parcel build ./src/index.html"
},
//...- src 폴더에 main.ts와 index.html을 만들어 준다.
<!--index.html-->
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script type="module" defer src="./main.ts"></script>
</head>
<body>
<h1>Hello Parcel!</h1>
</body>
</html>이때 꼭 type="module"로 설정해줘야 함!
tsconfig.json파일을 아래와 같이 수정한다.
{
"compilerOptions": {
"strict": true
},
"include": [
"src/**/*.ts"
]
}- 터미널에
npm run dev명령어 입력하면 build 되어 실행됨!
ESLint, Prettier
-
터미널에
npm i -D eslint prettier elint-plugin-prettier eslint-config-prettier
입력. 총 6개의 패키지가 설치된다. -
vercel 등에 업로드 할 배포용이라면, package.json 파일을 아래와 같이 수정한다.
{
//...
"type": "module",
//...
}.eslintrc.json파일을 생성한다.
{
"extend":[
"eslint: recommended",
"plugin: @typescript-eslint/recommended",
"plugin: prettier/recommended"
],
"parser": "@typescript-eslint/parser"
}.prettierrc파일을 생성한다.
{
"semi": false,
"singleQuote": true,
"endOfLine": "lf"
}이건 취향껏
- .vscode 폴더 안에 settings.json 파일을 생성한다.
{
"[typescript]":{
"editor.formatOnSave": true,
"editor.defaultFormatter": "esbenp.prettier-vscode"
}
}vite
- 터미널에
npm create vite@latest를 입력한다. - 프레임워크로 Vanilla 선택, TypeScript 선택
- npm i 눌러서 패키지 설치하고
- npm run dev 입력하면 프로젝트 build 됨
프론트엔드 개발자
좋은 글 감사합니다. 자주 올게요 :)