[타입스크립트(TypeScript)] Types

// Types

- 원시 타입(Primitive Type)

1. number
2. string
3. boolean

- 참조 타입(Reference Type)

1. Object
2. Array
3. Tuple
4. Function

- 기타

1. enum
2. any
3. void
4. unknown
5. never
6. null, undefined
   
   

- 공식 문서: https://www.typescriptlang.org/docs/handbook/basic-types.html

Handbook - Basic Types

---

// number 

- 정수와 소수 등을 포함한 모든 숫자

- Integer, float이 따로 존재하지 않고 모두 number이다.

~ 1, 5.3, 10 ...

function addNumbers(
  n1: number,
  n2: number
) {
  const result = n1 + n2;
  return result;
}

---

// string

- 텍스트를 나타낸다.

- '(작은 따옴표), "(큰 따옴표), `(백틱) 세 가지로 string을 정의한다.

function addNumbers(
  n1: number,
  n2: number,
  phrase: string,
) {
  const result = n1 + n2;
  console.log(phrase + result);
}

---

/boolean

- 참(true) 또는 거짓(false)의 값을 나타낸다.

---

function addNumbers(
  n1: number,
  n2: number,
  showResult: boolean,
  phrase: string,
) {
  const result = n1 + n2;
  if (showResult) {
    console.log(phrase + result);
  } else {
    return result;
  }
}

---

// Object

- 생성자 함수를 기반으로 만들어진다.

// 추론
const person = {
  name: 'Hana',
  age: 27,
};

// 명시적
const person: { name: string; age: number } = {
  name: 'Hana',
  age: 27,
};

---

// Array

- 배열을 선언한 타입과 일치하는 값들만 배열에 push할 수 있다.

- 만약 여러 타입을 포함하고 싶다면 '|' 기호를 사용해서 유니언 타입으로 선언한다.

let favoriteActivities: string[];
favoriteActivities = ['Sports', 'Cooking'];

let favoriteActivities: (string | number)[];
favoriteActivities = ['Sports', 'Cooking', 2];

---

// Tuple

- 각 요소의 타입과 개수를 정의한 배열

- 길이와 타입이 고정된다.

let user: [string, number, string] = ['hana', 27, 'F'];

---

// Function

- 함수 포인터를 받도록 지정할 수 있다.

-  콜백 함수를 전달할 경우 자신이 전달되는 인수가 반환 값을 기대하지 않는 경우에도 값을 반환할 수 있다.

function add(n1: number, n2: number) {
  return n1 + n2;
}

let combineValues: Function;
combineValues = add;


//화살표 함수
let combineValues: (a: number, b: number) => number;
combineValues = add;

 

function sendRequest(data: string, cb: (response: any) => void) {
  return cb({data: 'Hi there!'});
}
 
sendRequest('Send this!', (response) => { 
  console.log(response);
  return true;
 });

---

// enum

- 특정 식별자를 몇 개 가지고 있고, application에서 사용하는 전역 상수

- 숫자로 표현하지만 숫자값 집합에 이름(라벨)을 붙인다.

- 중괄호 안에 식별자를 넣는 방식으로 사용한다.

enum Role {
  ADMIN,
  READ_ONLY,
  AUTHOR,
}

console.log(Role.ADMIN);

enum Role {
  ADMIN = 'ADMIN',
  READ_ONLY = 100,
  AUTHOR = 'AUTHOR',
}

---

//  any

- 어떤 유형의 데이터도 상관없는 유연한 타입

- 어떤 종류의 값이든 저장할 수 있다.

- 사용하지 않는 것이 좋다.(사용하면 바닐라 js랑 다른 게 없다..)

---

// Void 

- 아무것도 반환하지 않는다. (반환값X)

function printResult(num: number): void {
  console.log('Result: ' + num);
}

---

// unknown

- 어느 값이든 오류 없이 저장할 수 있다.

- unknown 타입 값을 타입이 정해진 변수에 할당하기 위해서는 변도로 확인 절차를 거쳐야 한다.
  > any보다는 제한적으로 사용된다.

---

// never

- 절대 반환값이 생기지 않는 타입

- 주로 예외를 발생시킬 때 사용된다.

function generateError(message: string, code: number): never {
  throw { message: message, errorCode: code };
}

---

※ Type Alias

- 기존 타입들을 조합하거나 새로운 타입을 정의한다.

- type 키워드를 사용한다.

type Combinable = number | string;

function combine(
  input1: Combinable,
  input2: Combinable
) {
  let result;
  if (
    (typeof input1 === 'number' && typeof input2 === 'number') ||
    resultConversion === 'as-number'
  ) {
    result = +input1 + +input2;
  } else {
    result = input1.toString() + input2.toString();
  }
}

 

type User = { name: string; age: number };
const u1: User = { name: 'Hana', age: 27 };