[TypeScript] Day 3 - TypeScript의 함수, Type Aliases

TypeScript에서 함수의 데이터 타입

방법 1 : 매개변수와 반환 값의 데이터 타입 지정

function add(a: number, b: number): number {

  return a + b;

}

 

함수 add를 생성할 때, number 타입인 a, b를 받고, a + b의 값을 반환한다.

a: number, b: number을 통해서 a, b의 데이터 타입을 선언하였고, : number을 작성함으로써 반환값의 데이터 타입을 지정하였다.

 

방법 2 : 선택적 매개변수 사용하기

일부 매개변수를 선택적으로 받고싶을때 매개변수 뒤에 '?'를 작성한다. 이렇게 하면 매개변수를 받을지 받지 않을지 선택할 수 있다.

function greet(name: string, greeting?: string): string {

  if (greeting) {

    return `${greeting}, ${name}!`;

  } else {

    return `Hello, ${name}!`;

  }

}

 

함수 greet를 생성할 때, name: string를 작성함으로써 name의 데이터 타입을 string으로 선언하였고, greeting?: string를 작성함으로써 greeting라는 값을 선택적으로 받아도, 받지 않아도 되는 string 타입으로 선언하였고, : string를 작성함으로써 반환값의 데이터 타입을 string로 지정하였다.

 

Type Aliases

1. 원시 데이터 타입의 별칭

TypeScript에서 원시 데이터 타입의 별칭을 사용하면 특정 데이터 타입을 내가 원하는 이름으로 표현할 수 있다.

type Age = number;

const myAge: Age = 30;

 

이렇게 하면 Age와 같은 숫자를 나타내는 변수를 다룰 때, 'number'타입 대신 미리 설정해둔 'Age'라는 별칭을 사용할 수 있다.

 

1.(1) Array에 적용한 사례

// Array

type Names = string[];

const myFriends: Names = ['Alice', 'Bob', 'Charlie'];

 

1.(2) Tuple에 적용한 사례

// Tuple

type Coordinates = [number, number];

const myLocation: Coordinates = [37.7749, -122.4194];

 

1.(3) 객체에 적용한 사례

// 객체

type User = {

  id: string;

  name: string;

  age: number;

};

const user: User = { id: '1', name: 'John Doe', age: 28 };

 

1.(4) 함수에 적용한 사례

// 함수

type GreetingFunction = (name: string) => string;

const greet: GreetingFunction = (name) => `Hello, ${name}!`;

 

 

2. 

type UserID = string;

type UserName = string;

type Age = number;

 

type User = {

  id: UserID;

  name: UserName;

  age: Age;

};

 

const user: User = { id: '1', name: 'John Doe', age: 28 };

 

이렇게 원시 데이터 타입의 별칭을 데이터 타입의 원소로 사용할 수도 있다.