엘리스 SW 엔지니어 트랙 5주차(1)

오늘은 타입스크립트에 대해 정리하고자 블로그를 작성한다.

타입스크립트란?
타입스크립트는 자바스크립트에 타입을 부여한 언어다. 자바스크립트의 확장버전이라 볼 수 있다.
자바스크립트와는 다르게 브라우저에서 실행하려면 파일을 한번 변환해주어야하는데 이 과정을 컴파일(compile)이라고 부른다.

타입스크립트의 장점

타입스크립트는 오류를 사전에 미리 예방이 가능하다.

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

자바스크립트 코드

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

타입스크립트 코드

우리는 a와 b를 더해준 값을 원한다.
예를 들어 a가 10이고 b가 20이라 했을 때 10 + 20 하면 30이란 값을 원하지만
만일 자바스크립트에서 파라미터가 문자열 10 문자열 20이라면 30이 아닌 2030을 반환한다.
하지만 타입스크립트에서 문자열 10 20을 파라미터로 넣을 경우 number타입이 아니기 때문에 오류가 나게 된다.

타입스크립트 타입

기본타입에는 크게 12가지가 있다.
-Boolean
-Number
-String
-Object
-Array
-Tuple
-Enum
-Any
-Void
-Null
-Undefined
-Never

1.String
자바스크립트 변수 타입이 문자열인 경우 아래처럼 선언해 사용한다.

let str: string = "hi";

2.Number
타입이 숫자면 아래처럼 선언해 사용한다.

let num: number = 10;

3.Boolean
타입이 불리언인 경우에는 아래처럼 선언해 사용한다.

let isLoggedIn: boolean = false;

4.Object
타입이 객체면 아래처럼 선언해서 사용한다.

let obj: object = { name: "NAME", age: 29 }

5.Array
타입이 배열이면 아래처럼 선언해서 사용한다.

let arr:number[] = [1, 2, 3];

아래처럼 제네릭을 사용할 수도 있다.

let arr: Array<number> = [1, 2, 3];

6.Tuple
튜플은 배열의 길이가 고정되고 각 요소의 타입이 지정되어있는 배열 형식을 의미한다.

let arr: [string, number] = ["hi", 10];

만약 정의하지 않은 타입, 인덱스로 접근할 경우 오류가 난다.

7.Enum
이넘은 C, Java 같은 언어에서 흔하게 쓰이는 타입으로 특정 값(상수)들의 집합을 의미한다.

enum Avengers {Capt, IronMan, Thor}
let hero: Avengers = Avengers.Capt;

인덱스 번호로도 접근 가능하다.

enum Avengers {Capt, IronMan, Thor}
let hero: Avengers = Avengers[0];

이넘의 인덱스를 사용자 편의로 변경해서 사용할 수도 있다.

enum Avengers { Capt = 2, IronMan, Thor }
let hero: Avengers = Avengers[2]; // Capt
let hero: Avengers = Avengers[4]; // Thor

8.Any
기존 자바스크립트로 구현되어 있는 웹 서비스 코드에 타입스크립트를 점진적으로 적용할 때 활용하면 좋은 타입이다. 모든 타입에 대해 허용한다는 의미를 가지고 있다.

let str: any = "hi";
let num: any = 10;
let arr: any = ["a",2, true];

9.Void
변수에는 undefined와 null만 할당하고, 함수에는 반환 값을 설정할 수 없는 타입이다.

let unuseful: void = undefined;
function notuse(): void {
	console.log("sth");
}

10.Never
항상 오류를 발생시키거나 반환이 없는 함수의 타입이다.

function neverEnd(): never {
	while(true){
    
    }
}