TypeScript 배열 타입, 함수 타입 예제

타입스크립트 배열 타입과 함수 타입 데이터형 사용 방법과 예제를 알아보겠습니다.

 

배열

배열을 사용하기 위해서는 []를 사용합니다.

const foo: number[] = [0, 1, 2, 3];
foo.push(4);

 

TypeScript에는 제네릭이 도입되어 있기 때문에 Array<number> 로도 작성할 수 있습니다.

 

함수 타입

JavaScript에서 중요한 것 중 하나가 함수입니다.

TypeScript에서도 함수 타입이 있습니다.

함수 타입은 (foo: string, bar: number)=> boolean 처럼 작성한 것을 말합니다.

사용법은 다음과 같습니다.

const f: (foo: string)=> number = func;

function func(arg: string): number {
	return Number(arg);
}

 

함수 타입에는 부분 타입 관계가 있습니다.

interface MyObj {
	foo: string;
	bar: number;
}

interface MyObj2 {
	foo: string;
}

const a: (obj: MyObj2)=>void = ()=>{};
const b: (obj: MyObj)=>void = a;

 

(obj: MyObj2)=>void 타입의 값은 (obj: MyObj)=>void 타입의 값으로 사용할 수 있습니다.

이것은 MyObj가 MyObj2의 부분 타입이기 때문에 MyObj2를 가지고 MyObj에서 처리를 할 수 있는 것입니다.

a와 b의 타입을 반대로 하게 되면 당연히 에러가 발생합니다.

함수의 경우 파라미터 개수에 대해서도 부분 타입 관계가 발생합니다.

const f1: (foo: string)=>void = ()=>{};
const f2: (foo: string, bar: number)=>void = f1;

 

(foo: string)=>void 타입의 값을 (foo: string, bar: number)=>void 타입의 값으로 사용할 수 있습니다.

즉, 파라미터를 하나만 받는 함수에 파라미터를 2개 지정해서 사용할 수 있습니다.

이것은 함수에서 필요 없는 파라미터는 무시하기 때문입니다.

단, 일반적으로 함수를 호출할 때 필요 없는 파라미터를 붙여서 호출하는 것은 안됩니다.

const f1: (foo: string)=>void = ()=>{};

// 에러: Expected 1 arguments, but got 2.
f1('foo', 3);

 

 

가변 인수

JavaScript에는 가변 인수라는 기능이 있습니다.

(foo, …bar)=> bar 처럼 작성하는 것을 말합니다.

const func = (foo, ...bar)=> bar;

console.log(func(1, 2, 3)); // [2, 3]

 

배열의 2번째 이후의 값이 bar에 저장되어집니다.

TypeScript에서도 가변 인수를 사용할 수 있습니다.

가변 인수를 사용할 때 타입은 배열을 사용합니다.

const func = (foo: string, ...bar: number[]) => bar;

func('foo');
func('bar', 1, 2, 3);

// 에러: Argument of type '"hey"' is not assignable to parameter of type 'number'. 
func('baz', 'hey', 2, 3);

 

예제에서는 …bar에 number[] 타입이라고 지정하고 있기 때문에 2번째 이후의 값은 숫자여만 합니다.

2번째 이후의 값이 숫자가 아니면 에러가 발생하게 됩니다.

 

void 타입

void 타입은 주로 함수의 반환 값 타입으로 사용을 많이 하며 아무것도 반환하지 않는 것을 의미합니다.

JavaScript에서는 아무것도 반환하지 않는 경우 함수 마지막 부분에 return을 사용하지 않는다던가 return에 공백을 설정하던가 하기도 합니다.

또는 undefined 반환하기도 하죠.

void 타입은 undefined만을 값으로 사용합니다.

void 타입을 가진 변수에 undefined를 대입할 수도 있습니다.

하지만 반대로 undefined 타입네 void 타입을 대입할 수 없습니다.

const a: void = undefined;

// 에러: Type 'void' is not assignable to type 'undefined'.
const b: undefined = a;

 

void 타입을 반환하는 함수는 아무것도 반환하지 않는 함수이기 때문에 반환된 void는 사용하지 않겠다는 의미를 가집니다.

function foo(): void {
	console.log('hello');
}

댓글