[TS] 변수와 함수의 타입 정의

본 포스트는 인프런의 타입스크립트 입문-기초부터 실전까지 강의(링크)를 듣고 정리한 내용입니다.

기본 타입

문자열, 숫자, 진위값

const str: string = 'hello';
const num: number = 10;
const show: boolean = true;

배열

const arr: Array<number> = [1, 2, 3];
const heroes: Array<string> = ['Capt', 'Thor', 'Hulk'];

const items: number[] = [1, 2, 3];

• 대문자 Array를 사용하고, 각괄호 안에 내부 요소들의 type을 지정

• literal 방식으로 [] 자체가 Array를 의미
• 내부 요소의 type을 [] 앞에 표시

튜플

튜플: 배열의 특정 인덱스의 타입을 명시

모든 인덱스의 type이 각각 정의

const address: [string, number] = ['gangnam', 100];

객체

const obj: object = {};

const person: {name: string, age: number} = {
  name: 'thor',
  age: 1000,
};

• Array와 달리 object 소문자로 type 정의
• 객체 내부의 특정 속성의 type을 지정 가능

함수 타입

params와 return값의 type 정의

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

• return 값의 type 명시가 된다면 return의 type 뿐만 아니라 return의 유무도 확인
• return이 없다면 오류 발생

params의 엄격한 제한

JS의 경우 params의 인자 개수에 대한 유연함이 존재

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

sum(10, 20, 30, 40, 50) // 30

TS로 params의 type이 정의되면 이런 유연함을 불허

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

sum(10, 20, 30, 40); // 2개의 인수가 필요한데 4개를 가져왔습니다.

30, 40 인자에 대해 오류 발생

optional parameter

여러 params를 쓸 때도 있고, 안 쓸 때도 있는 경우에 사용

인자의 type을 미리 정의한 후, 필요한 경우 인자 생략을 허용

function log(a: string, b?: string): string {
  
}

log('hello world');
log('hello ts', 'abc');

• ’?’를 params 옆에 바로 붙여 표시
• 만약 해당 param이 있다면 type은 ~~라는 의미