Typescript란?

타입스크립트는 javascript에 type을 강화시킨 것이다.

자바스크립트의 문제는 5 - '3' 같은 숫자 - 숫자만 가능하지만, Dynamic Typing 때문에 이런게 가능해진다.

어떻게 보면 개꿀일 수 있지만, 프로젝트 사이즈가 커지면 단점으로 바뀐다.

그래서 타입스크립트는 문자랑 숫자랑 빼는거 이상한데? 이러고 엄격히 검사해준다.

그리고 에러퀄리티가 되게 좋아진다. 

 

이제 설치를 알아보자.

먼저, node.js를 설치해야한다.

그리곤 vscode에 터미널을 열고,

npm install -g typescript

을 입력해주면 된다.

그리곤 어쩌구.ts로 파일을 만들면 된다.

그 다음, tsconfig.json파일을 만들어서

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

위를 입력하고 시작하면 된다.

웹은 js만 읽지 ts는 못 읽기 때문에 터미널을 켜서 tsc -w을 입력해두면 자동변환이 된다.

이렇게 변환하는 걸 컴파일이라고 하는데, tsconfig.json은 컴파일시 옵션설정을 하는 파일이다.

target으로 자바스크립트의 es5로 변환이고,

module은 import문법을 구현할 때 어떤 문법을 쓸지 정한다.

commonjs는 require문법,

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

근데, 호환성을 보면 IE5, commonjs가 국룰이라고 한다.

 

추가로 넣을만한 건

{
    "compilerOptions": {
        "target": "es5",
        "module": "commonjs",
        "noImplicitAny": true, //any라는 타입이 의도치않게 발생할 경우 에러를 띄움
        "strictNullChecks": true //null, undefined타입에 이상한 조작하면 에러를 띄움
    }
}

이런게 있고,

강사님이 쓸만해보이는걸 추려주셨다.

{
 "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문 이상하면 에러내기 
 }
}

 

만약 리액트에다가 사용하려면

작업폴더경로에서 터미널을 열고

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

을 입력해주면 된다. 

또는 새 작업폴더를 만들고 에디터로 열고 터미널에

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

이렇게 입력하면 React 새 프로젝트를 만들 수 있다.