[TypeScript]

📌 타입스크립트의 사용이유

동적언어인 자바스크립트는 런타임시 타입이 결정되는데
런타임시 발생할수 있는 오류를
컴파일 타임에 타입이 결정되는 타입스크립트(정적언어) 사용시
오류를 미리 발견하여 에러를 방지할 수 있다.

위의 이미지 처럼 컴파일 에러를 잡아주는 친절한 타입스크립트 :)

✅ 타입 스크립트 사용 예시 (기본타입)

👉튜플 (Tuple)

let b:[string,number];
b = [ 'string', 3 ];

위와같이 배열의 index 별로 타입이 다를경우에도 지정이 가능하다
위의 코드처럼 선언한 경우에

b[1].toLowerCase();

와 같이 string 문자열이 사용 가능한 메서드 사용시 컴파일 에러를 확인 할 수 있다.
에러 문구또한 굉장히 친절하고 자세하게 나옴

👉 void, never

함수가 특정한 반환 값을 가지지 않는 경우

function method():void{
	console.log(' nothing to return ');
}

위의 코드와 같이 void를 타입으로 지정할 수 있다.

함수가 에러를 반환하거나, 무한루프를 도는 함수의 경우 타입을 never 지정할 수 있다.

function returnError():never{
	throw new Error();
}

function infiLoop():never{
	while(true){
    	//do someting...
    }
}

👉enum

enum Os{
	Window,
    Ios,
    Android
}

자바스크립트엔 존재하지 않는 enum 타입이 있다.
각각의 속성에 값을 지정해 주지 않을경우 순서대로 1,2,3....의 값이 주어지며

	enum Os{
	Window =3,
    Ios,
    Android
}

위와 같이 선언시엔 3,4,5.....순서대로 값이 주어진다

	enum Os{
	Window =3,
    Ios = 10,
    Android
}

위의 경우에 Android의 값은 11이 지정된다.
정리하자면 값을 지정해 주지않은 속성의 경우 가장 가까이 주어진 값이 있는 속성의
값에 영향을 받는다고 할수 있겠다.

값의 참조는 Os['Ios']의 경우 -> 10
Os[10] 의 경우 -> 'Ios'
가 가능하며 양방향 매핑이 되어있다.
하지만 이처럼 number를 사용하여 선언하였을 경우에 양방향 매핑이 성립되며,
Ios = 'ios' 와 같이 매핑한 경우엔 단방향으로만 참조가 가능하다.

👉 null, undefined

let a:null = null;
let b:undefined = undefiend;

위의 코드처럼 사용 가능하다.

✅interface

interface User{
	name : string;
    age : number;
    gender? : string;
    readOnly : birthYear : number;
    [grade:number] : string;
}

let userA : User = {
	name : 'Carl',
    age : 30,
    birthYear : 1994,
    1 : 'A'
}

위와 같이 인터페이스 선언 후 변수 선언시 타입으로 사용할 수 있다.
이때에 userA에 name과 age 를 누락할 경우 컴파일 에러를 확인 할 수 있다.
?기호를 붙여 선언한 속성은 기입하지 않아도 에러가 발생하지 않는다.
readOnly키워드를 사용하여 선언한 속성은 이후 값의 재할당이 불가하다.
[grade:number] : string; 의 경우엔 key값을 number 타입으로 value값을 string으로 받는 속성을 사용한다는 의미이며ex) 1:'A', 2:'B', 3:'C' 처럼 여러개 사용 가능하다.

👉함수의 interface

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

위처럼 정의하여 매개변수 2개를 number타입으로 받고 return 값이 number 타입인 함수의
interface를 선언할 수 있다.

const add : Add = function(x,y){
	return x+y;
}
add(10,20);
-> 30

👉interface를 활용한 class

interface Car{
	color : string;
    wheels : number;
    start() : void;
}

위의 interface를 활용하여

class Bmw implements Car {
	color;
	constructor(c:string){
    	this.color = c;
    }
    wheels = 4;
    start(){
    	console.log('start...')
    }
}

const newCar = new Bmw('green')

위의 class를 선언하여 new 연산자를 통해 객체를 생성 할 수 있다.

interface는 확장이 가능하며 예시는 아래와 같다

interface Benz extends Car {
	door : number;
    stop() : void;
}

const newBenzCar : Benz = {
	door : 5,
    stop(){
    	//do stop logic
    }
    color : 'black'
    wheels : 4;
    start(){
    	//do start logic
    }
}

위코드는 기존의 Car interface를 Benzinterface가 확장하여 사용한 예시이다.

✅type

위 interface 예제에서 grade value값을 string으로 받는다고 지정해 주었다
이때에 별도의 type을 지정하여 원하는 값만을 받을 수 있도록 지정할 수 있다.

type Score = 'A' | 'B' | 'C' | 'F' ;

interface User{
	name : string;
    age : number;
    gender? : string;
    readOnly : birthYear : number;
    [grade:number] : Score;
}

이렇게 type을 지정해 주면 기존의 모든 문자열을 허용했던 grade의 value값이
'A','B','C','F' 로 제한되게 된다.

ex)
let userA : User = {
	name : 'Carl',
    age : 30,
    birthYear : 1994,
    1 : 'A',
    2 : 'a'      <- 컴파일 에러 발생