[JS] TypeScript

타입스크립트란?

TypeScript(타입스크립트)란 JavaScript(자바스크립트)위에 레이어로써 자리잡는 언어이다.
JS는 String,Number, Object, undefined등등.. 원시 타입을 가지고 있지만
어떤 코드에 어떻게 할당되었는지 확인이 불가능하다.
TypeScript(타입스크립트)는 이 할당을 확인하는 레이어로써 동작한다.

타입스크립트의 타입 정의

기존 자바스크립트에서는 개발자의 의도를 추론해야지만 어떤 타입의 인수를 전달하는지, 어떤 타입의 반환값을 리턴받는지 명확하지가 않다.

function sum(a, b) {
	return a + b;
}

// 만약 문자열 '10', '20'이 넣어진다면 어떨까?
// 1020이라는 개발자의 의도와 맞지않는 결과값이 리턴될것이다.
// 자바스크립트엔진은 코드를 `Dynamic Typing(동적 타이핑)`으로 처리하기 때문이다.

위 함수를 TypeScript로 짠다면 아래와 같아진다.

function sum(a: number, b: number) {
	return a + b;
}
// '10', '20'을 넣는다면?
// Argument type is not assingable to type 'number'라는 에러가 뜰것이다.

타입스크립트에서의 객체지향 Interface

기존 JS에서는 객체(Object)를 만들때 타입을 지정하지 않았다.

const obj = {
	s1 : "i am String",
  	i1 : 123123,
  	b1 : true
}

하지만 이 객체의 형태를 명시적으로 나타내기위한 TS의 Interface가 존재한다.

interface obj = {
	s1 : string;
  	i1 : number;
  	b1 : boolean;
}

변수(객체선언)뒤에 : TypeName구문을 활용해 JS객체에대한 interface선언이 가능해진다.

interface Obj = {
	s1 : string;
  	i1 : number;
  	b1 : boolean;
}

const obj: Obj = {
	s1 : "i am String",
  	i1 : 123123,
  	b1 : true
}

// 만약 다른 타입을 넣는다면 TS에서 에러를 띄워준다.

// class로도 선언이 가능하다

interface Class{
	s1 : string;
    n1 : number;
}

class MyClass {
	s1 : string;
  	n1 : number;
  
  	constructior(s1: string, n1: number){
    	this.s1 = s1;
      	this.n1 = n1;
    }
}

const myclass: Class = new MyClass("strings", 123);

마무리

TS를 사용하게 된다면 JS의 애매한 타입추론관련 에러가 사라지고 만약 추후에 리팩토링을 하거나 추가적인 작업을 해야할때 개발과 유지보수가 편해질것이다,
물론 JS로만으로도 개발이 가능하지만 TS를 쓰는게 더 편해진다면 더 많은 장점을 얻을 수 있을것같다

참고한곳
Type Script DOCS
TypeScript란?