[TypeScript] Typescript 설치 셋팅 (Vue, React 포함)

⚡️일반 HTML CSS JS 웹개발시 타입스크립트 사용하려면 

1. Nodejs 최신버전, VScode 에디터를 설치합니다. 

Nodejs는 언제나 최신버전 아니면 에러가 잦습니다.  

 

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

상단메뉴에 Terminal - New Terminal 누르면 됩니다. 

 

3. 터미널에서 입력합니다. 

npm install -g typescript

<에러 발생하면 >
(1) nodejs 최신버전 설치를 안한 것임 삭제 후 최신 버전으로 재설치 합시다. 
(2) 윈도우인데 허가되지 않은 script 실행불가 어쩌구 에러가 뜨면 
시작 - 검색 - powershell - 우클릭해서 관리자 권한으로 실행한 다음
Set-ExecutionPolicy Unrestricted 입력하셈 그리고 y 선택하면 될듯 
(3) 맥북인데 보안에러 어쩌구가 뜨면
sudo npm install 어쩌구~ 이렇게 sudo를 앞에 붙여보십시오.
중간에 맥북 비번입력이 필요할 수 있습니다. 

4. 코드짤 작업폴더를 하나 만들어줍니다. 

코드짤 폴더 아무데나 만드셈 찾기좋은 바탕화면이 어떨까요.

 

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

에디터에서 상단메뉴중에 File - Open Folder 누르고 방금 만든 작업폴더 오픈하면 됩니다.

오픈안하면 큰일남 

 

6. 그 다음에 작업폴더에 .ts로 끝나는 파일 만들고 타입스크립트 사용 시작하면 됩니다.

ts 파일은 js랑 똑같이 사용가능합니다.

다만 근데 웹브라우저는 ts 파일을 알아듣지 못하기 때문에

js 파일로 변환 작업을 해야합니다.

 

7. js 파일로 변환하려면 에디터에서 Terminal 새로 여신다음

tsc -w 입력해두면 얘가 자동으로 ts파일을 js 파일로 근처에 변환해줍니다.

 

8. 이제 HTML 파일 등에서 타입스크립트로 작성한 코드를 사용하려면 

당연히 .ts가 아니라 변환된 .js 파일을 사용하십시오. 

---

⚡️React 프로젝트에서 Typescript 사용할 경우 

1. 이미 있는 React 프로젝트에 설치하실거면

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

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

입력해주면 끝입니다. 이제 .js 파일을 .ts 파일로 바꿔서 이용가능합니다.

근데 뭔가 많아서 불안정하고 에러도 많이날 것 같죠?

그러면 yarn 1버전이 설치되어있으면 yarn add라는 명령어 쓰든가 

그냥 애초에 처음부터 Typescript 적용된 React 프로젝트를 생성할 수도 있습니다. 

 

2. 그냥 React 프로젝트를 새로 만들거면 

새로 작업폴더를 하나 만드시고 거기서 에디터와 터미널을 오픈한 다음 

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

입력해주면 끝입니다. 대시 두개임 

---

⚡️Vue 프로젝트에서 Typescript 사용할 경우

1. 작업폴더경로에서 터미널을 오픈하신 후 

vue add typescript

입력하면 라이브러리가 설치됩니다. 

 

2. 이제 vue파일에서 타입스크립트를 쓰려면 

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

이렇게 lang 옵션을 켜두고 쓰면 알아서 잘 됩니다.

Vue 프로젝트 내에서도 tsconfig.json 파일 만들어서 설정도 자유롭게 가능합니다.

---

⚡️Typescript 컴파일시 세부설정 (tsconfig.json)

tsconfig 파일 생성하기

여러분 프로젝트 폴더에  tsconfig.json 이라는 파일을 하나 생성합시다.

여기엔 타입스크립트 ts 파일들을 .js 파일로 변환할 때 어떻게 변환할 것인지 세부설정이 가능합니다. 

tsconfig 넣을만한 것들

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

 

'target'은 타입스크립트파일을 어떤 버전의 자바스크립트로 바꿔줄지 정하는 부분입니다.

es5로 셋팅해놓으면 es5 버전 자바스크립트로 컴파일(변환) 해줍니다. 

신버전을 원하면 es2016, esnext 이런 것도 입력할 수 있습니다. 

 

'module'은 자바스크립트 파일간 import 문법을 구현할 때 어떤 문법을 쓸지 정하는 곳입니다.

commonjs는 require 문법

es2015, esnext는 import 문법을 사용합니다. 

 

그래서 어느정도 IE 호환성을 원하시면 es5, commonjs가 국룰임 

근데 정말 신버전 자바스크립트만 표현가능한 그런 문법들이 있는데 

(예를 들어 BigInt() 이런 함수와 bigint 타입)

그런 것들은 esnext 등으로 버전을 올려줘야 사용가능합니다. 

noImplicitAny는 any라는 타입이 의도치않게 발생할 경우 에러를 띄워주는 설정이고  

strictNullChecks는 null, undefined 타입에 이상한 조작하면 에러를 띄우는 설정입니다.

tsconfig에 들어갈 기타 항목들

전체는 https://www.typescriptlang.org/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문 이상하면 에러내기 
 }
}