TypeScript / 타입 (1)

배열

배열의 모든 요소가 동일한 타입을 갖도록 명시

=> 배열 내부 요소의 타입 안정성 제공

 

표현 방식

1. 타입 어노테이션 : type[] (자주 사용되는 표현)
2. 제너릭 타입 사용 : Array<type>

// 배열 타입 방법 1 : type[]
let nums: number[] = [1, 2, 3, 4, 5];
let strs: string[] = ['a', 'b', 'c'];
let bools: boolean[] = [false, false, true];

nums.push(6);
nums.push(7);
bools.push(true)

// 문자열 타입을 숫자 타입에 할당할 수 없음
// nums.push('8');
// num[0] = '1';
// bools.push(1)

// 배열 타입 방법 2 : Array<>
let nums1: Array<number> = [1, 2, 3, 4, 5];
let strs1: Array<string> = ['a', 'b', 'c'];
let nums: number[] = [1, 2, 3, 4, 5]
let color: string[]

 

• 다차원 배열

let matrix: number[][] = [
  [1, 2, 3],
  [4, 5, 6],
  [7, 8, 9],
];

 

• 혼합 타입 배열

let mixedArray: (number | string)[] = [1, "two", 3, "four"];

 

 |  는 유니온 타입으로 number나 string 타입 중 하나임을 의미한다.

 

 

---

 

 

객체

객체의 구조 및 각 속성과 해당 속성의 타입을 명시적으로 정의

=> 객체의 형태/구조를 보장하고 예측해 예상치 못한 값이 들어가는 것을 방지

interface font {
  fontFamily: string;
  fontSize: number;
  fontUnit?: 'px' | 'rem' | 'em'; 
  fontweight?: number;
  color: string;
  isUnderline: boolean;
}

let monitor: { brand: string; price: number };
monitor = {
  brand: 'LG',
  price: 120,
};

// 타입 오류
// monitor.price="123"
// monitor.displaySize="12inch"

 

객체의 Property 타입

• optional(옵셔널) : 특정 속성이 필수가 아닌 선택적임을 표현, 속성 이름 뒤에  ?  추가
• readonly(읽기 전용) : 객체의 속성이 수정되지 않아야 할 때 사용, 속성 이름앞에 readonly 키워드 추가

// Optional property
let user: { id: string; name: string; age?: number };
user = {
  id: '12312',
  name: 'hykim',
  // age는 선택적 속성
};

// Readonly property
let user1: { readonly id: string; name: string; age?: number };
user = {
  id: '12312',
  name: 'hykim',
};
user1.name = 'John';
// user1.id = '123123344'; // id 속성은 Readonly이기 때문에 값 변경불가

let apiconfig: {
  readonly clientKey: string;
  readonly url: string;
};

 

타입 별칭(Type Alias)

객체의 구조를 정의하고 정의된 구조에 이름을 부여하는 방법으로 type 키워드 사용

// Type Alias
type UserType = {
  id: string;
  name: string;
  age: number;
};

let user1: UserType = {
  id: '1',
  name: 'John',
  age: 20,
};

let user2: UserType = {
  id: '2',
  name: 'Sarah',
  age: 25,
};

let users: UserType[];

users.push(user1);
users.push(user2);

// userType에 맞는 형식이 아니기 때문에 오류
users.push({});
users.push({ id: '1' });

 

• Nested 객체

// Nested 객체 (중첩 객체)
type Payload = {
  timestamp: number;
  type: string;
  user: {
    id: string;
    isActive: boolean;
  };
};

const payload: Payload = {
  timestamp: 190678689,
  type: 'event',
  user: {
    id: '1234',
    isActive: true,
  },
};

 

 

---

 

 

함수

함수의 파라미터(매개변수)와 반환값에 타입 지정

=> 예상치 못한 타입의 인자가 전달되거나 타입의 값이 반환되는 것을 방지

=> 함수 시그니처로 해당 함수의 사용법을 자연스럽게 문서화

 

함수의 타입 

Parameter 타입

함수에 전달하는 매개변수의 데이터 타입 및 올바른 개수 전달 확인

// Parameter
function add(x: number, y: number): number {
  return x + y;
}
add(1, 1);
const result = add(10, 5);

// quantity에 기본값 부여
function addToCart(name: string, price: number, quantity: number = 1) {
  return `${name}, ${price}, ${quantity}`;
}

addToCart('orange', 100); // 'orange, 100, 1' 반환
addToCart('greentea', 50, 4);

 

 

Optional Parameter 타입

함수에 필수가 아닌 선택적 매개변수 지정 가능

function addToCart(name: string, price: number, quantity?: number) {
  return `${name}, ${price}, ${quantity}`;
  // if문으로 quantity 값이 있을 경우와 없을 경우로 처리하거나
  // 아래처럼 quantity에 타입연산자로 처리해줄 수 있다.
  // return `${name}, ${price}, ${quantity || 1}`;
}

addToCart('orange', 100); // 'orange, 100' 반환
addToCart('greentea', 50, 4);

 

 

Contextual 타입

함수의 맥락에 따라 자동으로 타입을 추론

map(), reduce(), filter(), forEach() 같은 배열 메소드의 콜백함수에서 주로 사용하고,

콜백의 인자인 element의 타입은 배열의 요소 타입을 기준으로 자동 추론됨

const numbers: number[] = [1, 2, 3, 4, 5];
const letters: string[] = ['a', 'b', 'c', 'e'];

numbers.map((el) => {
  el.toFixed(2);
});

letters.forEach((letter) => {
  letter.toUpperCase();
});

 

 

Return 타입

함수가 반환하는 값의 데이터 타입 명시

function addTwoValue(x: number, y: number): string {
  return `${x}${y}`;
}

function addToNumbers(x: number, y: number): number {
  return x + y;
}

function isTen(x: number, y: number): boolean {
  return x + y === 10;
}

// 화살표 함수
const add = (x: number, y: number): number => {
  return x + y;
};

 

 

void 반환 타입

함수가 명시적으로 값을 반환하지 않음을 표현

 

never 반환 타입

함수가 값을 반환하지 않음을 엄격하게 표현

// void, never
function logMessage(message: string): void {
  console.log(message);
}

function throwError(message: string): never {
  throw new Error(message);
}

 

 

---

 

 

유니언 타입(Union Types)

여러 타입 중 하나가 될 수 있는 값을 표현하며, 집합 이론의 합집합과 동일한 개념

서로 다른 타입의 값을 하나의 변수에 할당할 수 있으며  |  를 사용

let userId: string | number;

userId = 1;
userId = '123129afds';

// 타입에러 발생
userId = true;
userId = {};

function printUserId(id:string|number){
    console.log(id)
}

printUserId("1") // "1"
printUserId(1) // 1

 

 

Type Narrowing

유니언 타입의 구체적인 하위 타입을 좁혀나가는 방식, 타입 좁히기라고도 함

function processValue(value: number | string) {
    // 문자열의 경우
    if (typeof value === 'string') {
        return value.toUpperCase()
    }
    // 숫자의 경우
    return value.toString().toUpperCase();
}

 

 

배열

서로 다른 타입의 요소를 포함할 수 있는 배열을 정의해 유연성 증가

// 배열 예시
let mixedValues: (string | number)[] = [];
mixedValues.push("100")
console.log(mixedValues)
mixedValues.push(100)
console.log(mixedValues)

 

 

리터럴

제한된 값을 가진 타입(특정 문자열 / 숫자의 집합)을 표현

const toggle = (option: "on" | "off") => {
    console.log(option)
}

toggle("on")
toggle("off")
// toggle("adfasdf") // 타입에러

// ---------------------------

type Size = "xs" | "s" | "m" | "l" | "xl"
let tShirtSize: Size;
tShirtSize = "m"
// tShirtSize = "xxl" // 타입에러

// 함수 파라미터 사용
function setSize(size: Size) {
    switch (size) {
        case "xs": break;
        case "s": break;
        case "m": break;
    }
}

// ---------------------------

type SuccessCode = 200 | 201 | 202
type ErrorCode = 500 | 501 | 503

let responseCode: SuccessCode | ErrorCode
responseCode = 200
responseCode = 503
responseCode = 404 // 타입 에러