TypeScript - 함수, 리터럴, 유니온, 교차 타입

 

함수

 

파라미터의 타입과 리턴값의 타입을 지정해 줄 수 있다(필수 아님) 

function hello(name : string) : string {
	return `Hello, ${name}`';
}

const result = hello("YJ");

string타입인 name을 파라미터로 받고 string을 return하는 함수

|를 이용해서 여러 타입을 받을 수도 있다.

function hello(name : string | number) : string {
	return `Hello, ${name}`';
}

const result = hello(1);
const result2 = hello("yj");

number를 받을 수도 있다. 

 

 

파라미터의 속성

파라미터에 속성을 줄 수 있다.

속성 4가지 예시 

interface User {
	name : string;
	gender ? : string; //optional : 필수로 입력하지 않아도 되는 값
	readonly birthYear : number; //선언 후 변경이 불가능한 값
	[grade:number] : string; //key(number) : value(string) property 
}

 

예시)

파라미터는 필수가 아닌 option으로, 파라미터인 이름이 들어오지 않으면 hello world를 리턴하는 함수이다

function hello(name? : string) : string {
	return `Hello, ${name || "world"}`';
}

const result = hello();// 파라미터값이 없으므로 hello world가 리턴될 것

 

 

... 의 활용

개수의 제약을 받지 않고 매개변수를 받아올 수 있다

function add(..nums: number[]) : string {
	return nums.reduce((result,num) => result + num, 0);
   
}

//파라미터 수의 제약이 없음 -> array로 받아짐
add(1,2,3);
add(1,2,3,4,5,6,...10);

 

 

this

interface User {
	name : string;
}

const Sam : User = {name: 'Sam'}

function showName(){
	console.log(this.name)
}

const a = showName.bind(Sam);
a(); // "Sam"

 

function showName(this : User){
	console.log(this.name)
}

다음과 같이 this에 type을 지정해 줄 수 있다. ( 이 값은 매개변수로 받지 않는 값이며, 다른 매개변수가 추가된다고 할 때 this는 제외하고 생각하면된다.) 

 

 

 

함수 overload

동일한 함수 이지만, 매개변수의 갯수나 타입 등에 따라 다른 타입의 변수를 반환해주어야 할 때 사용할 수 있다.

interface User {
	name : string;
    	age : number;
}

//age가 string으로 올 경우 string을 리턴 
function join(name: string, age: string): string;
//age가 number로 올 경우 User를 리턴 
function join(name: string, age: number): User; 

function join(name: string, age: number | string):User | string {

	if(typeof age === "number") {
    	return{
        	name,
            	age,
        };
    } else {
    	return "나이는 숫자로 입력해주세요.";
    }
}

const sam: User = join("Sam", 30);
const jane: string = join("Jane", "30");

다음 예제는 

age로 숫자를 입력받은 경우 user를 생성하여 반환하고

string을 받은 경우 경고 문구(string)을 반환하는 예제이다. 

 

다음과 같이 입력 매개변수에 따라 반환값이 달라지기 때문에 함수를 오버로드 하여 사용한다.

 

 

Literal Type

 

const : 변할수 없는 값  

let: 변할 수 있는 값

 

문자열 리터럴 타입

const userName1 = "Bob";

userName1은 Bob이라는 문자열(string)을 가지고 이는 변할 수 없는 값이다.

이를 "문자열 리터럴 타입"이라고 한다.

 

 

 

union 타입

 

A또는B.. 처럼 or의 느낌으로

|를 사용하는 데이터 타입을 모두 union type이라고 할 수 있다. 

let no: string | number;

 

인터페이스 유니온 타입

interface Car {
	name : "car";
    color: string;
    start(): void;
}

interface Mobile {
	name : "mobile";
    color: string;
    call(): void;
}


function getGift(gift: Car | Mobile) { //두가지를 가질 수 있음(유니온타입)
	console.log(gift.color); //두가지 타입 모두 color를 가지기 때문에 사용가능
    
    //두가지 타입 중 하나만 가지는 것들에 대해서는 처리가 필요함
    if(gift.name === "car"){
    	gift.start();
    } else {
    	gift.call();
    }

}

다음과 같이 두가지 다른 타입을 구분할 수 있다면, 식별가능한 유니온 타입이라고 한다.

 

 

Intersection type(교차타입)

 

&의 의미를 가진 타입, 여러개의 타입을 하나로 합쳐주어 필요한 모든 기능을 가진 타입을 만들 수 있음

interface Car {
	name: string;
    start(): void;
}

interface Toy {
	name: string;
    color: string;
    price: number;
}


const toyCar: Toy & Car = { //toy와 car의 속성을 모두 가져야함
	name: "타요",
    start() {},
    color : "blue",
    price: 1000,
}