[ TIL ] 01.16(월) 46일차

타입스크립트(TypeScript)란

 

타입스크립트(TypeScript)는 자바스크립트의 슈퍼셋인 오픈소스 프로그래밍 언어이다.

원하는 타입을 정의할수있고, 자바스크립트로 트랜스 파일해서 실행해야 한다.

모든 운영 체제, 브라우저, 호스트에서 사용 가능한 오픈소스

 

엄격한 문법을 지원한다.

typescript

엄격한 문법 예제
const a: number = 1;
const a: number = '1'; # error



javascript

엄격하지 않은 문법 예제
const a = 1;
const a = '1';

 

 

 

슈퍼셋(superset)

자바스크립트 + 알바

자바스크립트와 100% 호환되고 이 외에 클래스, 인터페이스 등 객체 지향 프로그래밍 패턴을 제공한다.

(자바스크립트의 단점을 줄여주고 대신 더 좋은 기능들을 감싼 형태)

 

 

자바스크립트, 타입스크립트 데이터 타입

 

💡 타입스크립트 컴파일러(tsc)는 타입스크립 파일(.ts)를 자바스크립트 파일로 트랜스파일링한다.

컴파일은 일반적으로 소스 코드를 바이트 코드로 변환하는 작업을 의미한다.

타입스크립트 컴파일러는 타입스크립트 파일을 자바스크립트 파일로 변환하므로 컴파일보다는 트랜스파일링이 보다 적절한 표현이다.

한줄 요약
타입스크립트는 자바스크립트에 타입을 부여한 언어!

 

타입스크립트 설정

필요한 모듈

//글로벌 모듈 확인
npm ls -g

//타입스크립트 글로벌로 설치
npm i typescript -g

//명령어 보기
tsc -help

//설치된 타입스크립트 버전 보기
tsc —version 

//tsconfig.json 생성(자동 셋팅)
tsc —init

 

필요 모듈 설치중 오류 발생(해결 방법)

 

참고 링크 : https://yuien.tistory.com/entry/tsc-%EC%9D%B4-%EC%8B%9C%EC%8A%A4%ED%85%9C%EC%97%90%EC%84%9C-%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8%EB%A5%BC-%EC%8B%A4%ED%96%89%ED%95%A0-%EC%88%98-%EC%97%86%EC%9C%BC%EB%AF%80%EB%A1%9C-tscps1-%ED%8C%8C%EC%9D%BC%EC%9D%84-%EB%A1%9C%EB%93%9C%ED%95%A0-%EC%88%98-%EC%97%86%EC%8A%B5%EB%8B%88%EB%8B%A4

PowerShell 창을 관리자 권한으로 열어서 Set-ExecutionPolicy Unrestricted 를 입력해서 해결하였다.

 

tsconfig.json

 

타입스크립트 설정 파일은 타입스크립트를 자바스크립트로 변환할 때의 설정을 정의해놓는 파일입니다. 프로젝트에서 tsc 라는 명령어를 치면 타입스크립트 설정 파일에 정의된 내용을 기준으로 변환 작업(컴파일)을 진행합니다.

{
  "compilerOptions": {
    "lib": ["ES2021", "dom"], 
    // esModuleInterop 속성이 위의 코드 처럼 true로 설정될 경우, ES6 모듈 사양을 준수하여 CommonJS 모듈을 가져올 수 있게 됩니다.
    // e.g. typescript-test.ts => import express from "express"
    "esModuleInterop": true,
    "target": "ES2021",
  }
}

 

타입스크립트를 사용해야하는 이유?

💡 
에러의 사전 방지
코드 가이드 및 자동 완성(개발 생산성 향상)