• 타입스크립트로 자바스크립트(ex. 변수 or 함수) 코드에 타입 정의 가능

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

• Boolean
• Number
• String
• Object
• Array
• Tuple
• Enum
• Any
• Void
• Null
• Undefined
• Never

📌 String

JS 변수 타입이 문자열인 경우

let car:string = 'bmw';

// let으로 선언된 변수 수정
car = 'benz';

// string이 아닌 타입으로 재선언 시, 에러 발생
car = 3; // Type 'number' is not assignable to type 'string'.

📌 Number

타입 → 숫자일 경우

let num: number = 10;

📌 Boolean

타입 → 진위 값인 경우

let isLoggedIn: boolean = false;

📌 Array

타입 → 배열인 경우

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

// 제네릭 사용 가능
let arr: Array<number> = [1,2,3];

// 문자열
let week1:string[] = ["mon", "tue", "wen"];
let week2:Array<string> = ["mon", "tue", "wen"];

week1.push(3) // [에러 발생] 이유: 문자열 배열에 숫자 추가하려고 해서

📌 Tuple

요소의 타입과 개수가 고정된 배열 (index별로 타입이 다를 때 이용)

let b:[string, number];
/* 
- 의미:
첫 번째 요소: string
두 번째 요소: number
*/ 

b=['z', 1]
b=[1,'z'] // 불가

// 타입에 맞는 메소드 사용 가능
b[0].toLowerCase(); // 정상 동작. toLowerCase(문자를 소문자로 바꿈)
b[1].toLowerCase(); // 에러 발생.

// 정의하지 않은 타입 및 인덱스로 접근 시 -> 오류
b[1].concat('!'); // Error, 'number' does not have 'concat'
b[5] = 'hello' // Error, Property '5' does not exist on type '[string, number]'.

📌 Enum

특정 값(상수)들의 집합

• 사용하는 경우

  특정 값만 입력 가능하도록 강제하고 싶을 때 && 그 값들이 공통점이 있을 때
  

• JS에는 없는 타입

🔹 특징

◾ 이넘의 값

• 자동으로 0부터 1씩 증가하며 할당

  • 수동으로 값을 주지 않으면

    enum Os{
      Window, // (enum member) Os.Window = 0
      Ios, // (enum member) Os.Ios = 1
      Android // (enum member) Os.Android = 2
    }

• 문자열도 입력 가능

  • 단방향 맵핑만 가능

    이유: 숫자가 아니기 때문
    

  • 예시 코드
    

        enum Os{
          Window = "win",
          Ios = "ios",
          Android = "and"
        }
        
        // 실제 컴파일 (단방향 맵핑된 모습)
        var Os;
        (function (Os) {
            Os["Window"] = "win";
            Os["Ios"] = "ios";
            Os["Android"] = "and";
        })(Os || (Os = {}));
        
        // 이런 모습으로 컴파일된다는 뜻
        const Os = {
          Window: "win",
          Ios: "ios",
          Android: "and"
        }

◾ 양방향 맵핑

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

// 컴파일된 결과
var Os;
(function (Os) {
    Os[Os["Window"] = 3] = "Window";
    Os[Os["Ios"] = 10] = "Ios";
    Os[Os["Android"] = 11] = "Android";
})(Os || (Os = {}));
/*
- Os라는 객체가 만들어졌고
- Window는 3, Ios는 10, Android는 11이 들어와있음.
- Os 3은 Window, 10은 Ios, 11은 Android가 할당됨.
=> '양방향 맵핑'이 되어있다.
*/

// 확인(콘솔)
console.log(Os[10]) // "Ios"
console.log(Os['Ios']) // 10

◾ 이넘 내부 값만 입력 가능

enum Os{
  Window = "win",
  Ios = "ios",
  Android = "and"
}

// 'myOs의 타입은 Os이다.'라고 선언
let myOs: Os; 

// myOs에는 Os의 Window, Ios, Android만 입력 가능
myOs = Os.Window
console.log(myOs) // "win"

📌 Any

모든 타입에 대해서 허용

• 웹 서비스 코드(자바스크립트로 구현)에 타입스크립트를 점진적으로 적용할 때 활용하면 좋은 타입

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

📌 Void

변수 : undefined와 null만 할당
함수 : 반환 값 설정 x

let unuseful: void = undefined;

function notuse() : void {
    console.log('sth');
}

📌 Never

항상 에러를 반환하거나 영원히 끝나지 않는 함수의 타입

// 항상 에러 반환
function showError():never{
  throw new Error();
}

// 영원히 끝나지 않는 함수
function infLoop():never {
  while(true){
    // do something...
  }
}

📌 null, undefined

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

✍ TIPS

🔸 사용 가능한 메소드 → 쉽게 파악 가능

타입을 미리 알고 있기 때문에 typescript playground 이용 or 사용하는 에디터에 ts관련 extention이 설치되어 있으면 → .을 찍었을 때 (각 타입에 맞게) 사용가능한 목록이 뜸.

🔸 타입 추론

// string을 선언하지 않아도 할당된 값으로 타입 설정됨.
let car = 'bmw'; // let car: string

🔸 타입 표기(Type Annotation)

:를 이용하여 자바스크립트 코드에 타입을 정의하는 방식

---

• 참고:
  캡틴 판교 - 타입스크립트 핸드북
  코딩앙마 - 타입스크립트