Typescript의 함수,배열, 튜플 인터페이스

이대희·2021년 4월 17일

함수의 기본적인 타입 선언

//JS
function sum(a, b) {
  return a + b;
}

//TS
function sum(a: number, b: number): number {
  return a + b;
}

각 인자마다 타입을 정해주며 ()뒤에 리턴받을 값에 타입을 정해준다.

function sum(a: number, b: number):void {
  console(a + b);
}

리턴받을 값이 없다면 void로 정해준다.

옵셔널 파라미터

함수에서 받을 인자의 갯수를 확신하지 못했을 때 옵셔널 파라미터를 쓴다.
아래 함수에서 b?: number는 b라는 인자를 써도되고 안써도된다는 뜻으로 인자를 받지않아도 오류가 나지 않는다

function sum(a: number, b?: number): number {
  return a + b;
}
sum(10, 20); // 30
sum(10, 20, 30); // error, too many parameters
sum(10); // 10

default 파라미터

함수에서 값을 주지않으면 특정한 값을 디폴트로 주거나 값을 주면 값이 바뀔때 사용한다.

function sum(a: number = 123123): number {
  return a;
}
sum(); // 123123
sum(100); // 100

Rest 파라미터

함수에서 받을 인자의 갯수가 몇개인지 모를때 spread연산자를 사용하여 배열로써 인자를 받는다.

function sum(...nums: number[]): number {
  return nums.reduce((a,b) => a+b);
}

console.log(sum(1,2,3)) // 6
console.log(sum(1,2,3,4,5)) //15

Array

const scores:number[] = [100,90,80];
const scores:Array<number> = [100,90,80];

위 두가지 방법 사용하면 배열에 타입을 적용할 수 있다.
두가지 방법에 차이는 불변성에서 나타난다.

scores: readonly number[]

readonly는 scores배열을 변경할 수 없고 읽을 수만 있게하는 불변성을 적용할 때 사용한다. 하지만 <>을 사용한 배열 표기에선 불변성을 지원하지 않기때문에 첫번째 타입을 이용한 배열표기가 더 많이 사용된다.

Alias

type Text = string;
const name: Text = 'foo';

string타입을 text로 정해서 name에 string타입을 줄 수 있다.

type Text = foo;
const name: Text = 'poo'; //error
const name: Text = 'foo'; //done

alias에 타입이 아닌 값을 주게되면 그 타입을 준 변수에는 타입에 해당되는 값만줄수 있다.
(union 타입을 활용할 때 사용된다)

type Student = {
	name: string,
	age:number
}

const foo:Student = {
	name:'poo',
	age:21
}

객체에 타입을 적용시킬 수 있다. 객체타입에 없는 키을 선언하게되면 에러가 난다.

union type

type Direction = 'left' | 'right' | 'up' | 'down';
function move(direction : Direction){
	console.log(direction);
}
move(down);

Direction타입에는 4개의 문자열만 쓸 수 있게 정의할 때 union 타입을 사용한다.

type Success = {
	response: {
    body: string;
    };
};
type Fail = {
    reason: string;   
};
type LoginState = Success | Fail;
function login():LoginState{
	return{
    	response: {
    		body: 'logged in';
  		},
    };
   }
}

타입을 Success | Fail로 지정해서 성공,실패중에 하나를 리턴하게 할 수 있다.

    ## 인터페이스란

인터페이스는 일반적으로 타입 체크를 위해 사용되며 변수, 함수, 클래스에 사용할 수 있다. 인터페이스는 여러가지 타입을 갖는 프로퍼티로 이루어진 새로운 타입을 정의하는 것과 유사하다.

인터페이스를 타입으로 가지는 값은 인터페이스의 구조를 값으로 갖도록 강제한다.

변수 인터페이스 활용

interface Todo {
  id: number;
  content: string;
  completed: boolean;
}

let todo: Todo;

todo = { id: 1, content: 'typescript', completed: false };

인터페이스 첫글자는 대문자이며 todo변수에 Todo라는 인터페이스 타입을 지정해주었다.
Todo인터페이스 타입에 맞는 프로퍼티를 사용할 수 있다.

todo = { id: 1, content: 'typescript' }; //error

위 처럼 completed프로퍼티를 사용하지 않고 객체를 선언하면 에러가난다.

이럴땐 옵셔널을 사용하여 인터페이스를 선언해주어 선택적으로 프로퍼티를 활용한다.

함수 인터페이스 활용

interface UnitFunc {
  (name: string, attack: number, defense?: number): void;
}
 
const setUnit: UnitFunc = (name: string, attack: number): void => {
  console.log(`name: ${name}, attack: ${attack}`);
};

함수에 인터페이스를 사용할 경우 파라미터와 타입, 반환값과 타입 등을 포함하여 안터페이스를 정의해야한다.