TypeScript 타입 정리 기록

💡 Type 종류

타입스크립트는 변수,객체 등에 : Type 형태로 타입을 지정 할 수 있다.

---

📗 기본적인 타입

- Boolean

let bool01: boolean = true;
let bool02: boolean = false;

- Number

let num01: number = 5;
let num02: number = 3.14;
let num03: number = NaN;

- String

let str01: string = 'text';
let str02: string = `my name is ${val}`;

- Array

// 문자열만 가지는 배열
let arr01: string[] = ['a', 'b', 'c'];
let arr02: Array<string> = ['a', 'b', 'c'];

// 숫자형만 가지는 배열
let arr03: number[] = [1, 2, 3];
let arr04: Array<number> = [1, 2, 3];

// Union 타입(다중 타입)의 문자열과 숫자를 동시에 가지는 배열
let arr05: (string | number)[] = [1, 'a', 2, 'b', 'c', 3];
let arr06: Array<string | number> = [1, 'a', 2, 'b', 'c', 3];

// 배열이 가지는 값의 타입을 추측할 수 없을 때 any를 사용할 수 있다.
let arr07: (any)[] = [1, 'a', 2, 'b', 'c', 3];
let arr08: Array<any> = [1, 'a', 2, 'b', 'c', 3];

- Function

파라미터에 각 타입을 지정하고 우측에 return 값의 타입을 지정

function sum(a: number, b: number): number {
  return a + b;
}
console.log(sum(2, 3)); // 5

- Object

let user: { name: string, age: number } = { name: 'a', age: 20 };

---

📘 연산자를 이용한 타입

- Union Type

자바스크립트의 OR 연산자(||)와 같이 A이거나 B이다 라는 의미의 타입

let name: string | number = 'kim'; // string OR number
let age: (string | number) = 100; // string OR number

let array: (number | string)[] = [1,'2',3]
let object: {data : (number | string) } = { data : '123' }

---

📙 선택적 프로퍼티(Optional Properties)

프로퍼티를 필수가 아닌 선택적으로 할당하도록 정의할 수 있다

// 둘이 표현하고자 하는 타입 구조는 같다.

interface IUser {
   name: string;
   age?: number;
}

type TUser = {
   name: string;
   age: number | undefiened;
}

---

📗 Type Narrowing

typeof 오퍼레이터를 사용하여 더 좁고 정확한 타입으로 재정의 해주는 방식

typeof 가 리턴값으로 가질 수 있는 타입 (모두 string type으로 return)

• string
• number
• bigint
• boolean
• symbol
• undefined
• object
• function

function double(item: string | number) {
    if (typeof item === "string") {
        return item.concat(item);  // item이 string 타입
    } else {
        return item + item;     // item이 number 타입
    }
}

---

📘 타입 단언(Type Assertion)

데이터의 타입을 명시 ⇒ 데이터 타입에 영향을 안 준다

let someValue: unknown = "this is a string";
let strLength: number = (someValue as string).length; // someValue 를 string 타입으로 정의 (직접적인 타입변경 X)

---

📙 타입 별칭 (Type Aliases)

type 키워드를 사용하여 타입에 이름을 설정하는 방법
복잡하고 길어지는 코드를 키워드를 지정하여 설정할 수 있다

관습적으로 대문자로 시작

type Person = {
  name: string; 
  age: number; 
  isDeath?: boolean;
};

const tomPerson: Person = {
  name: "Tom",
  age: 20
};

const joelPerson: Person = {
  name: "Joel",
  age: 40
};

키워드를 합치는 것도 가능하다

type Name = string;
type Age = number;
type NewOne = Name | Age; // OR

type PositionX = { x: number };
type PositionY = { y: number };
type XandY = PositionX & PositionY // AND
let 좌표 :XandY = { x : 1, y : 2 }