TypeScript 설치, 세팅(Vue, React 포함)

TypeScript 대표이미지

 

728x90

 

🖥️ HTML, CSS, JS 사용 시

1. Node.js를 최신버전으로 설치한다.

2024.02.19 - [👨‍💻 node.js] - Node.js 설치 설치방법을 참조하면 된다.

 

2. VScode 에디터에서 터미널을 오픈한다.

control + shift + ` 를 누르면 된다.

 

3. 터미널에 다음과 같은 명령어를 입력한다.

npm install -g typescript

 

📌 설치 도중 에러가 났다면?
1. Node.js 버전이 최신버전인지 확인
2. 윈도우 에서 허가되지 않은 script 실행불가 ~ 에러가 뜬다면 
시작 - 검색 - powershell - 우클릭 - 관리자 권환으로 실행 후 Set-ExecutionPolicy Unrestricted 입력하고 y를 선택한다.
3. 맥북에서 보안에러가 뜨면 
sudo npm install -g typescript를 입력하면 된다.

 

4. 작업을 진행할 폴더를 만든다.

 

5. 작업폴더를 에디터로 오픈한다.

 

6. 작업폴더에 .ts로 끝나는 파일을 만든다.

TS 파일은 JS랑 똑같이 사용가능하다.

 

7. JS 파일로 변환하려면 에디터를 열고 tsc -w를 입력한다.

그럼 TS파일을 자동으로 JS파일로 변환해준다.

 

8. HTML 파일 등에서 타입스크립트로 작성한 코드를 사용하려면 변환된 파일을 사용한다.

<script src="변환된파일.js"></script>

 

9. tsconfig.json 파일 생성 후 

{
    "compilerOptions": {
        "target": "es5",
        "module": "commonjs",
    }
}

 

위 내용을 복사하고 붙여넣으면 된다.

 

target : 타입스크립트 파일을 어떤 버전의 자바스크립트로 바꿀 지 정하는 부분
module : 자바스크립트 파일간 import 문법을 구현할 때 어떤 문법을 쓸지 정하는 

 

⌨️ 추가로 넣을만 한 것

{
    "compilerOptions": {
        "target": "es5",
        "module": "commonjs",
        "noImplicitAny": true,
        "strictNullChecks": true
    }
}

 

• noImplicitAny : any라는 타입이 의도치 않게 발생할 경우 에러를 띄워주는 설정
• strictNullChecks : null, undefined 타입에 이상한 조작하면 에러를 띄우는 설정

 

⌨️ tsconfig에 들어갈 기타 항목

{
 "compilerOptions": {

  "target": "es5", // 'es3', 'es5', 'es2015', 'es2016', 'es2017','es2018', 'esnext' 가능
  "module": "commonjs", //무슨 import 문법 쓸건지 'commonjs', 'amd', 'es2015', 'esnext'
  "allowJs": true, // js 파일들 ts에서 import해서 쓸 수 있는지 
  "checkJs": true, // 일반 js 파일에서도 에러체크 여부 
  "jsx": "preserve", // tsx 파일을 jsx로 어떻게 컴파일할 것인지 'preserve', 'react-native', 'react'
  "declaration": true, //컴파일시 .d.ts 파일도 자동으로 함께생성 (현재쓰는 모든 타입이 정의된 파일)
  "outFile": "./", //모든 ts파일을 js파일 하나로 컴파일해줌 (module이 none, amd, system일 때만 가능)
  "outDir": "./", //js파일 아웃풋 경로바꾸기
  "rootDir": "./", //루트경로 바꾸기 (js 파일 아웃풋 경로에 영향줌)
  "removeComments": true, //컴파일시 주석제거 

  "strict": true, //strict 관련, noimplicit 어쩌구 관련 모드 전부 켜기
  "noImplicitAny": true, //any타입 금지 여부
  "strictNullChecks": true, //null, undefined 타입에 이상한 짓 할시 에러내기 
  "strictFunctionTypes": true, //함수파라미터 타입체크 강하게 
  "strictPropertyInitialization": true, //class constructor 작성시 타입체크 강하게
  "noImplicitThis": true, //this 키워드가 any 타입일 경우 에러내기
  "alwaysStrict": true, //자바스크립트 "use strict" 모드 켜기

  "noUnusedLocals": true, //쓰지않는 지역변수 있으면 에러내기
  "noUnusedParameters": true, //쓰지않는 파라미터 있으면 에러내기
  "noImplicitReturns": true, //함수에서 return 빼먹으면 에러내기 
  "noFallthroughCasesInSwitch": true, //switch문 이상하면 에러내기 
 }
}

 

더 많은 정보를 찾고 싶다면 여기를 클릭해주세요.

 

🖥️ React 사용시

1. 이미 있는 React 프로젝트일 경우

작업 폴더 경로에서 터미널을 오픈 후

npm install --save typescript @types/node @types/react @types/react-dom @types/jest

 

명령어를 입력해주면 된다. 그럼 이제 JS파일을 TS파일로 바꿔서 이용하면 된다.

 

2. 새 React 프로젝트 일 경우

새로 작업폴더를 만들고 에디터와 터미널을 오픈한 다음

npx create-react-app my-app --template typescript

 

명령어를 입력해주면 된다.

 

🖥️ Vue 사용 시

작업 폴더 경로에서 터미널을 오픈한 다음

vue add typescript

 

명령어를 입력해주면 된다.

 

이제 Vue 파일에서 타입스크립트를 사용하려면

<script lang="ts">
  
</script>

 

위의 코드와 같이 lang 옵션을 켜두면 된다.