Typescript

Typescript 란?

• Typescript는 자바스크립트의 슈퍼셋인 오픈소스 프로그래밍 언어입니다.

• 마이크로소프트에서 개발,유지하고 있으며 엄격한 문법을 지원하고 있습니다.

• 동적 타입 언어인 JavaScript의 단점을 보완하기 위해 Javascript 기반으로 만들어진 정적 타입 언어입니다.

Why Typescript

자바스크립트도 충분히 복잡하고 어려운데 왜 또 다른 언어를 배워야 할까요? 단지 최신 기술이라서? 혹은 다른 회사도 많이 사용하니까 우리도 써야 하는 걸까? 라는 고민을 하게 됩니다. 타입스크립트는 아래 2가지 관점에서 자바스크립트 코드의 품질과 개발 생산성을 높일 수 있습니다.

1. 에러 사전 방지

String, Number, Boolean

// 숫자 타입
let ddd: number = 10;
ddd = "철수"; // 에러발생!

// 불린 타입
let eee: boolean = true;
eee = false;
eee = "false"; // 문자열로 인식되기 때문에 에러 발생!

// 배열 타입
let fff: number[] = [1, 2, 3, 4, 5, "안녕하세요"]; // 에러 ! number타입에서 문자열이 들어가면 발생
let ggg: string[] = ["철수", "영희,", "훈이", 10]; // 에러 ! string타입에서 문자열이 들어가면 발생
let hhh: (string | number)[] = ["철수", "영희,", "훈이", 10]; // 타입을 추론해서 어떤 타입을 사용하는지 알아보기!

객체 타입

interface IProfile {
  name: string;
  age: number | string;
  school: string;
  hobby?: string; //있을수도 있고, 없었을 수도 있을때는 ? 를 붙혀준다.
}

const profile: IProfile = {
  name: "철수",
  age: 8,
  school: "다람쥐초등학교",
};
profile.hobby = "수영";
profile.name = "영희";

객체 같은 경우 보다 정확하게 타입 지정을 하기 위해 위와 같이 객체 속성들에 대한 타입을 개별적으로 지정해야 합니다.

함수 타입

함수는 파라미터에 각각 타입을 선언해 주며, 파라미터 우측에는 해당 함수의 리턴값 타입도 선언해 주셔야 합니다.

function sum(a: number, b: number): number {
  return a + b;
}
console.log(sum(2, 3)); // 5

리턴 값을 숫자형으로 선언하였는데 다른 값이 리턴된다면 에러가 발생합니다.

function sum(a: number, b: number): number {
  return null; // error
}

TypeScript 장단점

👍 장점

• 타입 스크립트를 활용하면 컴파일을 통해 사전 에러를 발결할 수 있습니다.

• 타입 스크립트는 타입을 강제화한다는 점에서 장점이 생깁니다.

• IDE에 타입 정보를 제공,코드 어시스트, 타입 체크, 리팩토링을 지원 받을 수 있습니다.

• 안정성 & 협업용이성이 좋습니다.

👎 단점

• 개발의 규모가 커질수록 타입 설정이 귀찮고 시간이 오래 걸릴 수 있다는 문제가 생길 수 있습니다.

• 코드의 가독성이 떨어질 수 있습니다.

• 타입스크립트를 활용해도 근본적인 자바스크립트 오류는 해결할 수 없습니다.