tpyescript 개발환경 세팅 및 설치 (feat. vuejs)

1.nodejs 설치

https://nodejs.org/ko/

Node.js

2. 터미널 입력 npm install -g typescript

3. tsconfig.json 생성

{
    "compilerOptions": {
        "target": "ESNext", 
        "module": "esnext"
    }
}

or

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

입력

4.. ts 파일 만들고 tsc -w 터미널창에 켜주면 스크립트 작성하고 저장 시마다. js 파일로 변환

5. vue add typescript 터미널창에 입력 전부 yes 하면( 왼쪽 vue / 오른쪽 vue+typescript)

6. tscoinfig 목록 (https://www.typescriptlang.org/tsconfig)

{
    "compilerOptions": {
   
     "target": "esnext", // 'es3', 'es5', 'es2015', 'es2016', 'es2017','es2018', 'esnext' 가능
     "module": "ESNext", //무슨 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문 이상하면 에러내기 
    }
   }

TSConfig Reference - Docs on every TSConfig option