왜 Typescript일까..?

널리 알려진건 Javascript이면서 왜 Typescript를 배우라고 하는 것일까?

Typescript는 기본적으로 Javascript를 베이스에 깔고 있지만, 거기서 Type문법이 추가된 업그레이드 버전이라고 생각하면 편하다.

Javascript는 기본적으로 dynamic typing, 즉 변수 선언에 있어서 반드시 타입을 지정해줄 필요가 없다.
이 부분은 프로젝트의 규모가 작은 경우에는 편리하다고 느낄 수 있지만,
프로젝트의 규모가 커지게 된다면 자유도와 유연성이 높은 것이 문제로 작용한다.
또한 Typescript가 에러메세지의 퀄리티가 더 좋은 부분도 한 몫을 한다.

사용방법

사실 사용방법은 무지 간단하다.
기본적으로 Node.js를 설치하고 있다는 가정하에 진행이 된다.

터미널에 아래의 명령어를 입력한다.

npm install -g typescript

-g는 global로 해당 파일뿐만이 아니라 현재 컴퓨터 전체에 실행된다는 것을 의미한다.
이렇게 되면 번거롭게 프로젝트를 생성할 때만이 아니라 모든 파일에서 사용이 가능해진다.

이후 파일 확장자는 .js가 아닌 .ts를 사용하면 되며
tsconfig.json 파일을 생성하여 셋팅을 해줘야 한다

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

먼저 기본 셋팅이다.

• target: Typescript 파일을 어떤 버전의 Javascript로 바꿔줄지 정하는 부분이다. 현재는 es5로 컴파일을 해주며, 신버전을 원한다면 es2016이나 esnext로 지정해주면 된다.

• module: Javascript 파일간 import 문법을 구현할 때 어떤 문법을 쓸지 정하는 곳이다. commonjs는 require 문법, es2015, esnext는 import 문법을 사용한다.

• 기본적으로는 IE 호환성을 원한다면 es5에 commonjs를 사용한다.

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

다음으로는 추가 셋팅이다.

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

• strictNullChecks: 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문 이상하면 에러내기 
 }
}

나중에 사용하면 좋은 셋팅들을 정리해보았다.

다음 포스트에서는 본격적으로 Typescript에 대해서 공부해보겠다.