[TypeScript] TypeScript 알아보기

 

TypeScript 알아보기

 

---

 

# 타입스크립트란

 

 자바스크립트의 확장된 언어로, 자바스크립트에 타입이 부여된 언어이다. 자바스크립트는 동적인 언어로, 변수 선언 시 타입을 따로 지정하지 않고 런타임할 때 타입이 결정된다. 따라서 유연하게 이용할 수 있다는 편리함이 있지만 그만큼 에러 발생의 위험이 높다.

 

 개인적으로 타입스크립트의 필요성을 정말 느꼈던 적이 있다. 프로젝트를 제작할 때, 아이템의 index를 지정해주고 버튼을 클릭할 때마다 index를 더하거나 빼서 다른 아이템을 보여주는 기능이 있었다. index가 1일 때는 1번 아이템, index가 2일 때는 2번 아이템, 이런 식으로! 그래서 index를 +하는 버튼과 -하는 버튼을 구현했는데, 자꾸 제대로 동작하지 않는 것이다. 한참을 헤매던 결과 타입이 문제였다. 자바스크립트가 index의 타입을 number가 아닌 string으로 생각하고 있었던 것...😑 그래서 1+1을 2가 아닌 11이라고 출력하고 있었다. 난 1번 아이템 다음에 2번 아이템을 보여주고 싶은데, 자바스크립트는 1번 아이템 다음에 11번 아이템을 보여주고 있었다😮

 

타입스크립트를 사용한다면 위와 같은 에러를 사전에 방지할 수 있다. 이를 계기로 타입스크립트를 공부하게 되었다.

 

 

# 타입스크립트의 기본 타입

 

 타입스크립트의 기본 타입은 크게 12가지로 구분할 수 있다. String, Number, Boolean, Null, Undefined, Array, Tuple, Enum, Object,  Any, Void, Never이다.

 

 

1. String, Number, Boolean, Null, Undefined

 

string, number, boolean, null, undefined은 다음과 같이 간단하게 선언할 수 있다.

 

let name: string = 'kim';
let age: number = 20;
let isLoggedIn: boolean = true;
let example1:null = null;
let example2:undefined = undefined;

 

 

2. Array

 

배열 속의 원소의 타입과 같이 작성해주면 된다.

 

let arr: number[] = [1,2,3];
let arr2: string[] = ['a', 'b', 'c'];

 

 

3. Tuple

 

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

 

let arr: [string, number] = ['hello', 10];

 

 

4. Enum

 

특정 값(상수)들의 집합을 의미한다.

 

enum Alphabet { Aa, Bb, Cc }
let text: Alphabet = Alphabet.Aa;
let text: Alphabet = Alphabet[0]; // Aa

 

 

5. Object

 

5.1. object로 정의

 

object로 타입을 정의하면 모든 타입의 값을 할당할 수 있다.

 

let example: object = { name: 'kim', age: 20 };

 

 

5.2. interface로 정의

 

interface로 타입을 정의하면 구체적으로 타입을 지정할 수 있다.

 

interface User {
  name: string,
  age : number
}

let example: User = { name: 'kim', age: 20 };

 

 

5.3. type으로 정의

 

interface와 유사한 type으로도 객체 타입을 지정할 수 있다.

 

type User {
  name: string,
  age : number
}

let example: User = { name: 'kim', age: 20 };

 

 

6. Any

 

 모든 타입을 허용한다. Any를 많이 사용할 경우, 자바스크립트와 차이가 없어지니 많이 사용하지 않는 것이 좋다.

 

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

 

 

7. Void

 

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

 

let example: void = undefined;

function example2(): void {
  console.log('hello');
}

 

 

8. Never

 

 함수 표현식이나 화살표 함수 표현식에서 항상 오류를 발생시키거나 절대 리턴하지 않는 타입으로 쓰인다. 특정 타입 값을 할당받지 않도록 하거나, 매개변수의 제한을 거는 경우에 사용된다.

 

function errorMsg(msg: string): never {
  throw new Error(msg);
}

 

---

 

참고 자료

 

https://www.typescriptlang.org/docs/handbook/basic-types.html#never

https://joshua1988.github.io/ts/intro.html

https://mine-it-record.tistory.com/580