TypeScript 시작하기

모두의희망·2022년 11월 27일
0

TypeScript

목록 보기
1/11
post-thumbnail

타입스크립트를 왜 배워야 하는가?

  • 훨씬 안정적이고 에러가 덜 난다. 자바스크립트를 타입스크립트로 바꾸면 안정성이 늘어난다.
    안정성이 늘어난다는 것은 에러가 줄어들고 책임을 덜 져도 된다. 그러나 타입스크립트는 자바스크립트보다 자유도는 줄어든다.

타입스크립트 기본 지식

  • typescript는 최종적으로 javascript로 변환된다.
  • 순전한 typescript 코드를 돌릴 수 있는 것은 deno이나 대중화되지가 않았음. 브라우저, 노드는 모두 js 파일을 실행한다.
  • typescript는 언어이자 컴파일러(tsc)이다. 컴파일러는 ts 코드를 js로 바꿔준다.
  • 컴파일러는 2가지 역할이 있다 타입검사와 코드변환

tsc는 tsconfig.json(tsc --init 시 생성)에 따라 ts 코드를 js(tsc 시 생성)로 바꿔준다. 인풋인 ts와 아웃풋인 js 모두에 영향을 끼치므로 tsconfig.json 설정을 반드시 봐야한다.
단순히 타입 검사만 하고싶다면 tsc --noEmit 하면 된다.
ts 파일을 실행하는 게 아니라 결과물인 js를 실행해야 한다.
에디터가 필수가 됨. VS Code나 웹스톰 반드시 필요. 메모장으로 코딩 불가능한 지경에 이름.

타입스크립트 기본 세팅

  • npm init -y를 치면 package.json이라는 파일이 생긴다. 이러면 내가 만든 폴더는 노드 프로젝트가 된다.
  • npm 명령어들을 이프로젝트에서 사용 할 수 있다.npm i typescript를 치면 타입스크립트를 설치한다.npm은 node 패키지의 프로그램을 모아둔 저장소이다 우리는 이 저장소에서 타입스크립트를 다운받는 것 이다.
  • npx tsc --init을 작성한다. 그럼 tsconfig.json이라는 파일이 생긴다.
    프로젝트 시작시 반드시 package.json과 tsconfig.json 이 두파일을 설치 하고 시작 해야 한다.

tsconfig.json 설정

  • tsconfig.json에서 allowJs: true를 해놓은다. 이래야 타입스크립와 자바스크립트 동시에 사용 할 수 있다.
  • 반드시 strict:true인 상태에서 해야 한다. target: es2016은 tsc가 우리의 코드를 es2016코드로 바꿔준다. es5도 바꿀수있고 완전과거로도 바꿀수있다. 우리의 환경에 맞게 타겟 설정을 하면 된다.
  • module:es2015가 최신 모듈 상태이다 (import/export 이런거)
    npx tsc --noEmit 이라는 명령어 사용가능하다. 타입 검사
    npx tsc는 타입스크립트를 자바스크립트 코드로 변경해준다. 타입검사하는 기능과 코드 변환기능은 별개로 돌아간다.
  • "forceConsistentCasingInFileNames": true, 이건 그냥 true해두는게 좋다. 타입스크립트는 모듈시스템이 있어서 다른 파일을 import 해올수있다. 윈도우에서는 import 할때 대문자 소문자 구별을 잘 안한다.
    윈도우 환경에서 import from 'First.ts";를 해도 first.ts의 파일을 불러 올 수 있다. 리눅스나 mac에서는 파일을 못 불러온다. 그래서 대소문자 지켜서 import를 할 수 있게 "forceConsistentCasingInFileNames": true, 항상 지키라고 설정
  • "skipLibCheck": true 는 라이브러리 체킹을 건너 뛰어라 다른패키지들을 앞으로 다운받아서 사용 할텐데 그 패키지들에 전부다 .d.ts라는 파일이 있는데 그 패키지에 타입을 정리를 싹 해둔 파일이라고 생각하면 된다. 그런것들이 수도 없이 많은데 그것을 다 검사하려면
    컴파일러가 너무 느려지니깐 우리가 실제로 쓰는 타입만 검사하도록 안쓸거면 검사하지마라 라는 뜻

정리

1.타입스크립트를 왜 배워야 하는지?
2.타입스크립트 기본 지식
3.타입스크립트 기본 세팅
4.타입스크립트 tsconfig.json 설정 방법

profile
개발을 진정성 있게 다가가겠습니다.

0개의 댓글