TypeScript에 대한 이해

TypeScript

마이크로소프트에서 구현한 JavaScript의 슈퍼셋 프로그래밍 언어

확장자는 .ts이며 컴파일 결과물은 JavaScript 코드이다

 

TypeScript 특징

• 정적 타입을 명시할 수 있음 → 변수나 함수의 목적 명확히 전달 가능
• 코드 자동 완성이나 잘못된 변수/함수 사용에 대한 에러 알림 등의 풍부한 피드백 받음
• 자바스크립트를 실제로 사용하기 전에 있을만한 타입 에러들을 미리 잡을 수 있음
• 순수 자바스크립트에 비해 생산성이 뛰어남
• API의 Input과 Output이 무엇인지 명확하게 표현 가능

 

TypeScript 개발 환경

설치 명령어

npm i -g typescript

Windows의 파워셸에서 오류 발생시 관리자 권한 파워셸에서 명령어 입력

Set-ExecutionPolicy RemoteSigned

express 환경 구축

tsc --init	//tsconfig.json 생성

tsconfig.json → 나머지는 인터넷 참조

{
  "compilerOptions": {
    "target": "es5",                                /* 컴파일 ECMAscript대상 지정 */
    "module": "commonjs",                           /* 모듈 코드 생성 지정 */
    "outDir": "./dist",								/* 컴파일 경로 지정 */
    "rootDir":"./src",								/* 컴파일 대상의 root 경로 지정 */
    "strict": true,                                 /* TypeScript 엄격한 유형 검사 활성화 여부 */
    "skipLibCheck": true,                           /* Skip type checking of declaration files. */
    "forceConsistentCasingInFileNames": true        /* Disallow inconsistently-cased references to the same file. */
  }
}

확장자 .ts인 타입스크립트 파일을 자바스크립트로 변환하는 방법 (1)

tsc 파일이름(확장자 제외)

확장자 .ts인 타입스크립트 파일을 자바스크립트로 변환하는 방법 (2)

1. tsc --init
2. 1번 실행 후 생성되는 tsconfig.json 수정
3. tsc

 

JavaScript와 차이

* 타입 선언 기능 존재 *

기존 자바스크립트

const a = 3;
const b = '5';
console.log(a*b);
// 결과 : 15

타입스크립트

const a:number = 3;
const b:string = '5';
console.log(a*b);
//결과 : 에러 메세지

 

TypeScript 알아보기

JavaScript의 가장 큰 장점이자 단점은 타입 선언 기능이 없다는 것이다

타입 선언 기능이 없으면 코드 작성이 간결해져 개발함에 있어서 편리하지만

어떤 것을 나타내고 있는지 명확하게 알 수 없고, 어느 부분이 문제인지 한눈에 보기 어렵다

TypeScript를 사용하면 언제 코드를 다시 봐도 어떤 목적으로 변수와 함수를 이용하여

코드를 작성했는지 알 수 있을 것 같아서 찾아보았다.

---

[참조]

블로그 : https://helloinyong.tistory.com/124

나무위키 : https://namu.wiki/w/TypeScript