4주 Project - Typescript

Typescript

 

 자바스크립트의 Superset격인 친구다. 자바스크립트를 기반으로 하기 때문에 자바스크립트의 모든 기능을 사용할 수 있으며, 자바스크립트가 가진 단점을 보완한 것으로 보면 된다. 주 기능으로는 이름에서도 알 수 있듯이 자바스크립트에 타입을 도입한 것이다. 타입스크립트는 변수를 정해야 할 때 변수 값에 데이터타입을 지정할 수 있다. 그로 인해 코드가 좀 더 예측 가능해지며 디버깅이 쉬워진다는 장점이 있다.

 

function add (a, b) { return a + b; }
console.log(add("1", "3"));

 만약 위와 같은 코드가 있다면, 우리가 원래 add라는 함수를 통해 얻고자 하는 것은 아마도 숫자끼리의 덧셈결과였을 것이다. 하지만 파라미터에 있는 1과 3이 문자열이기 때문에, 결과는 "13"이라는 string을 얻게 될 것이다.

 

function add (a: number, b: number): number { return a + b; }
console.log(add("1", "3"))

 

하지만 위와 같이 타입스크립트 형식의 코드로 바꾸게 된다면, 아래의 콘솔로그는 에러가 생겨 작동하지 않게 될 것이다. 타입스크립트는 이처럼 선언하는 것에 타입을 지정할 수 있다. 이렇게 되면 위의 add라는 함수에는 반드시 number타입의 데이터만 들어올 수 있다는 것과, return 값 또한 number라는 것을 예측할 수 있다.

 

 그리고 타입스크립트는 또한 class, interface, cunstructor, public, private 등등 객체지향의 프로그래밍을 지원하며, 언어임과 동시에 컴파일러이기도 하다. 타입스크립트 파일은 자바스크립트를 사용하는 환경에서 읽을 수 없기 때문에, ts파일을 js파일로 컴파일하는 기능을 제공한다. 그리고 컴파일된 js파일을 우리가 사용하게 되는 것이다.

 

 

---

 

타입 추론

 

 타입스크립트에서는 기본적으로 타입을 추론하는 기능이 존재한다.

let num = 1234;
num = "Ang";

 만약 위와 같은 코드가 있다면, 기존 자바스크립트에서는 num이 정상적으로 바뀌게 될 것이다. 하지만 타입스크립트에서는 타입 추론이 있기 때문에, num에 1234라고 할당했으면 num이 number값이겠구나 하고 예측하여, 그 뒤에 num에 "Ang"이라는 string를 넣고 싶어도 타입추론에 의해 넣을 수 없게 된다. 만약 이대로 컴파일을 하려 하면, 에러메시지가 뜨면서 컴파일이 불가능하게 된다.

 

 

---

 

타입 명시

 

 타입 명시는 타입스크립트의 가장 기본적이면서 메인이 되는 기능이라고 할 수 있다.

 

let userId: number = 1;
let name: string = "KSH";
let age: number = 29;
let gender: string = "male"

function userInfo (userId: number): {
  userId: number,
  name: string,
  age?: number,
  gender: string
} {
  return null;
}

 위의 코드에서 볼 수 있듯이, 모든 것에 : Type 의 형태가 붙어있는 것을 볼 수 있다. 그리고 함수 return값의 형태 또한 소괄호 옆에 명시를 할 수 있다. 그리고 함수 return 타입 안을 보면 age의 경우 ? 표시가 있는데 이 것은 선택적인 요소임을 표기할 때 쓴다.

 

 

---

 

인터페이스

 

interface User {
  userId: number,
  name: string,
  age: number,
  gender: string
}

function userInfo (userId: number): User {
  return null;
}

 타입 명시 부분에서 쓰인 userInfo라는 함수를 보면, return 타입이 명시되는 부분이 조금 깔끔하지 못한 부분이 있다. 하지만 인터페이스를 따로 지정해두면 위 코드와 같이 지정한 인터페이스를 타입에 명시 해줄 수 있게 된다. 하지만 인터페이스는 자바스크립트로 컴파일 될 때, 자바스크립트에는 없는 기능이기 때문에 찾아 볼 수 없게 된다. 인터페이스의 내용이 반드시 명시되어야 한다면 class를 사용하도록 하자.

 

 

---