타입스크립트 사용 목적과 설정 방법

1.  자바스크립트 냅두고 타입스크립트를 사용하는 이유는 뭘까?

자바스크립트는 매우 유연한 언어.

let answer = 1 + [1,2,3] // 11,2,3

 

숫자 + 배열 을 실행해도 오류 없이 계산해준다.

프로젝트 규모가 작을때는 금방 오류를 찾을 수 있지만, 규모가 커질수록 위와 같은 오류들이 발생했을때 찾기 어려워진다.

​

이런 자바스크립트의 위험성에서 벗어나 더욱 안전하게 개발할 수 있도록 도와주는게 타입스크립트다.

 

2. 타입스크립트 사용의 이점

1. 정적 타입 검사: 타입스크립트는 코드를 작성할 때 변수, 함수 및 객체의 타입을 명시적으로 지정하므로 코드의 오류를 사전에 발견할 수 있다. 이로써 런타임 오류를 줄이고 안정성을 향상시킨다.
2. 코드 가독성과 유지 보수성 향상: 타입스크립트는 코드에 타입 정보를 포함하므로 다른 개발자가 코드를 이해하고 유지 보수하기 쉬워진다.
3. IDE 지원: 대부분의 통합 개발 환경 (IDE)은 타입스크립트를 지원하며, 코드 완성, 자동 오류 감지, 리팩터링 기능 등을 제공하여 개발자 생산성을 향상시킨다.
4. 대규모 프로젝트 관리: 타입스크립트는 대규모 프로젝트에서 특히 유용하며, 코드베이스의 규모가 커질수록 타입 안정성이 중요해진다. 이를 통해 협업과 유지 보수가 용이해진다.
5. JavaScript 생태계와의 호환성: 타입스크립트는 자바스크립트의 상위 집합으로, 기존 자바스크립트 코드를 그대로 사용하면서 점진적으로 타입스크립트로 마이그레이션할 수 있다.

3.  타입스크립트 시작하기

- 설치하기

npx create-react-app my-app --template typescript //타입스크립트
yarn create react-app my-app --template typescript 

//타입스크립트로 프로젝트 파일 생성

//typescript설치
npm i -D typescript

//package.json 초기화
npm init -y

//src 폴더 만들구 파일.ts 생성

touch tsconfig.json

//수동 설치

 

- tsconfig.json 파일 설정

{
  "include": ["src"],
  "compilerOptions": {
    "outDir": "build", //js파일 아웃풋 경로바꾸기
    "target": "ES6", // build js 버전
	"module": "commonjs", //무슨 import 문법 쓸건지 'commonjs','es2015'
    "lib": ["ES6", "DOM"], //어떤 환경에서 코드를 실행하는지 지정
	"allowJs": true, // js 파일들 ts에서 import해서 쓸 수 있는지
	"checkJs": true, // 일반 js 파일에서도 에러체크 여부
    "strict": true //엄격하게 검사
	"jsx": "preserve", // tsx 파일을 jsx로 어떻게 컴파일할 것인지 
	"declaration": true, //컴파일시 .d.ts 파일도 자동으로 함께생성
	"outFile": "./", //모든 ts파일을 js파일 하나로 컴파일해줌   
	"removeComments": true, //컴파일시 주석제거
    "rootDir": "./", //루트경로 바꾸기 (js 파일 아웃풋 경로에 영향줌)
	"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문 이상하면 에러내기
  }
}