4. 타입스크립트(TypeScript) - Alias(별칭) & return 타입 지정

const player : {
	name: string,
	age?: number
} = {
	name: "hello"
}
const player2 : {
	name: string,
	age?: number
} = {
	name: "Bye",
	age: 12
}

• Player과 Player2는 타입이 같고 내용이 다르다
  • 같은 코드가 반복되며 번거로워진다.
• 이러한 번거로움을 줄이기 위해 사용하는 것이 Alias(별칭)이다

 

1. Alias 작성 규칙

type Player = {
	name: string,
	age?: number
}

• 첫 글자는 대문자로 작성한다
• Alias는 오브젝트에만 적용할 수 있는것이 아니다. 사용하고자 하면 어떠한 형식에서도 사용할 수 있다
• 단, 과하게 사용하면 좋지 않고 코드가 깔끔하고 명확해질 때 까지만 사용하는 것이 좋다

type Age = number;
type Player = {
	name: string,
	age?: Age
}

const player : Player = {
	name: "hello"
}
const player2 : Player = {
	name: "Bye",
	age: 12
}

이와 같이 반복되는 코드를 줄일 수 있다

 

2. 함수의 return 타입 지정

function playerMaker(name: string) {
	return {
		name: name
	}
};

const a = playerMaker("hello");
a.age = 12;

// 이렇게 작성한다면 TS에서 오류를 반환한다.
// age라는 요소가 없고 TS에서 이것에 대해 모르기 때문이다.

위의 코드에서 발생하는 문제를 해결하기 위해 아래와 같이 작성할 수 있다

type Age = number;
type Player = {
	name: string,
	age?: Age
}

function playerMaker(name: string) : Player {
	return {
		name: name
	}
};

const a = playerMaker("hello");
a.age = 12;

이와 같이 함수의 인자 값을 지정하는 곳 뒤 (괄호 뒤, 중괄호 앞)에 return 타입을 지정해주면 된다

 

화살표 함수를 사용하는 경우

type Age = number;
type Player = {
	name: string,
	age?: Age
}

const playerMaker = (name: string) : Player => ({name: name});

const a = playerMaker("hello");
a.age = 12;

이와 같이 return의 타입을 지정해주면 된다