[프로그래밍 언어] Typescript

 

0. 사용 목적

 

앞선 두 번의 프로젝트에서는 Javascript로 개발을 했다. 

JS로 개발 코드 작성 과정에서 오류가 발생해 디버깅해보니 JS type 문제였다. 

Javascript는 동적 언어로 런타임에 타입을 결정하고 오류를 발견한다.

 

그래서 typescript로 작성을 해보니 오류가 사라졌다. (단순 체크)

 

JS는 너무 관대하여 오류가 찾기 어렵다.

 

TypeScript는 정적 타입을 지원하므로 컴파일 단계에서 오류를 포착할 수 있는 장점이 생긴다. 명시적인 타입 지정은 개발자의 의도를 명확하게 코드로 기술할 수 있고, 코드의 가독성을 높이고 예측할 수 있게 하며 디버깅이 쉬워진다.

 

자 이제 간단하게 TS에 대해서 정리해보자.

 

👉 Typescript 튜토리얼 보러가기

 

---

1. What is TypeScript

자바스크립트의 슈퍼셋. 즉, 자바스크립트를 기반으로 하는 프로그래밍 언어이다.

 

• 특징
  • 브라우저는 타입스크립트를 실행할 수 없다.
  • 코드를 실행하여 타입스크립트 코드를 자바스크립트로 컴파일하는 강력한 컴파일러이다.
  • 타입을 추가하고, 브라우저 런타임에서 에러가 발생하기 전에 코드의 에러를 잡아낸다.

 

 

2. Typescript 설치 및 실행

 

1) node.js로 Typescript 설치

 

1) node.js 설치

2) typescript 설치

 

npm install -g typescript

 

최신버전 설치

 

 

 3) ts-node

    -  typescript를 바로 실행하기 위해서 설치

 

npm install -g ts-node

 

최신버전 설치

 

 

2) 실행

 

   1) 파일 컴파일 실행

 

• tsc (TypeScript Compiler)로 컴파일하고 node로 실행
• 브라우저는 타입스크립트를 실행할 수 없기 때문에!

 

• ts 를 js로 컴파일

tsc practice.ts

 

• 컴파일 됨

node practice.js

 

불편하다. 개발환경에서는 ts-node로 바로 ts를 실행할 수 있다. (tsc 와 node를 합친 기능을 한다.)

 

 

    2) 파일 직접 실행

 

•  ts-node로 바로 typescript 실행
• 하지만 개발 단계에서는 이렇게 실행해도 되지만 프로덕션 환경에서는 파일들을 웹 서버에서 호스팅 해야하기 때문에 주의해야한다.

      

ts-node practice.ts

 

 

3. 인터페이스 (interface)

 

- 사용 이유: 타입의 이름을 짓고 코드 안의 계약을 정의 

 

interface User {
  name: string;
  age: number;
  gender?: string; // 있어도 없어도 된다.
}

let user: User = {
  name: 'xx',
  age: 23,
};

 

* 선택적 프로퍼티 (Optional Properties)

: 어떤 조건에서만 존재하거나 아예 없을 수도 있다.

 

interface SquareConfig {
    color?: string;
    width?: number;
}

 

interface Add {
  (num1: number, num2: number): number;
}

const add: Add = function (x, y) {
  return x + y;
};

console.log(add(10, 20));