변수와 함수의 타입 정의

최종 수정 : 2024-05-27

타입 정의

타입스크립트의 장점을 극대화하려면 가급적 타입을 최대한 구체적으로 선언해야 한다. 변수에 타입을 선언하고 싶다면 변수 뒤에 ': 타입이름'을 추가한다. 클론( : )을 타입 표기(type annotation)이라고 한다.

let name: string = 'yeongtaek';

---

기본 타입

타입스크립트가 자체적으로 제공하는 타입. 즉, 내장 타입이라고 말할 수 있다.

 

타입트리(타입 계층도)

한 입 크기로 잘라먹는 타입스크립

1) 원시타입(Primitive Type)

하나의 값만 저장하는 타입

• 1) number : 숫자만 취급
  --> 음수, 정수, Infinity, -Infinity, NaN
• 2) string : 문자열
• 3) boolean : 진위 값만 취급
• 4) null : 의도적인 빈 값을 의미. 개발자가 의도적으로 값을 비어 두고 싶을 때 사용하는 값
• 5) undefined : 변수를 선언할 때 값을 할당하지 않으면 기본적으로 할당되는 초기값.
• 6) 리터럴 타입 : 값 하나만 타입이 된다. 복합적인 타입을 만들 때 유용하게 쓰인다.
  ex) let numA: 10 = 10;
  ex) let strA: "hello" = "hello";
  ex) let boolA: true = false;

타입스크립트에서는 null과 undefined를 타입으로 정의할 수 있다. 또한 타입스크립트 설정 파일의 strict 옵션에 따라서 사용 여부가 결정된다. strict 옵션이 꺼져 있을 때는 신경 쓰지 않아도 되는 타입이다.

자바스크립트에서는 let numA = null; 과 같이 선언해도 허용이 되지만, 타입스크립트에서는 null과 undefined라는 타입이 존재하므로 불가능하다.

하지만 tsconfig.json에서 "strictNullChecks" : false로 설정하면 가능하다.

---

2) 배열과 튜플 타입

• Array : 두 가지 방법으로 선언할 수 있다.
  1) Array<배열의 데이터 타입> : 제네릭 방식
  2) 배열의 데이터 타입[ ] - 이 방법이 타이핑도 쉽고 직관적이기에 추천한다.

// 문자열 배열
let books: Array<string> = ['A', 'B', 'C'];
let books: string[] = ['A', 'B', 'C'];

// 숫자 배열
let pages: Array<number> = [133, 144, 10];
let pages: number[] = [133, 144, 10];

// 배열에 들어가는 요소들의 타입이 다양할 경우
let multiArr: (number | string)[] = [1, "hello"];

// 다차원 배열의 타입을 정의하는 방법
let doubleArr: number[][] = [
  [1, 2, 3],
  [4, 5],
];

• tuple
  1) 특정 형태를 갖는 배열을 의미한다. 다양한 타입의 요소들로 배열을 만든다.
  2) 배열 길이가 고정되고 각 요소 타입이 정의된 배열이다.
  3) JS로 변환되면 배열로 나타난다.
  4) 인덱스의 순서를 강제시킬 수 있다.

// 튜플 : 길이와 타입이 고정된 배열
let tup1: [number, number] = [9, 21];
let tup2: [number, string, boolean] = [92, "year", true];

---

3) 객체 타입

• object : 객체 유형의 데이터를 취급

기존 방식처럼 접근하면 에러가 발생한다.

let user: object = {
  id: 1,
  name: '오영택',
};

user.id; '{}' 형식에 'id' 속성이 없습니다.

점 표기법으로 접근할 수가 없다. 그래서 객체 리터럴 타입을 사용해야 한다.

// 객체 리터럴타입
let product: {
  id: string;
  name: string;
  price: number;
  membersOnly?: boolean; // 필수가 아닌 프로퍼티 (선택적 프로퍼티 or 옵셔널 프로퍼티)
  sizes: string[];
} = {
  id: 'c001',
  name: 'computerMonitor',
  price: '149900',
  sizes: ['M', 'L', 'XL'],
};

// readonly
let config: {
  readonly apiKey: string;
} = {
  apiKey: "MY API KEY",
};

config.apiKey = 'lalala'; // 읽기 전용 속성이므로 'apiKey'에 할당할 수 없습니다.

---

4) 대수 타입

여러 개의 타입을 합성해서 새롭게 만들어낸 타입, 합집합 타입과 교집합 타입이 존재한다.

• 유니언(Union) 타입
• 인터섹션(Intersection) 타입

---

5) 기타 타입

• any
  - 특정 변수의 타입을 확실시 할 수 없을 때 사용
  - 아무 데이터나 취급하겠다는 의미이며, 타입스크립트에서 자바스크립트의 유연함을 취하려고 할 때 사용하는 타입
  - 타입스크립트를 처음 시작하는 사람들이 자바스크립트 코드를 타입스크립트로 변환할 때 사용하기 유용한 타입이다.
  - 타입스크립트의 장점을 사용하지 않겠다는 것과 같은 의미이므로 가급적 사용하지 않는 것이 좋다.
• unknown
  - 전체 집합으로써 모든 타입을 넣을 수 있다.
  
  
• void
  - 정말 return 문을 사용하고 싶지 않은 함수에 대해, 결과 타입을 정의하는 것
  - 만약, null 이나 undefined를 타입으로 정의하면 다음과 같이 작성해야 한다.

function func1(): null {
  console.log('hello');
  return null;
}

function func2(): undefined {
  console.log('hello');
  return; // or return undefined;
}

• naver
  - 공집합 개념이다.
  - 그 어떤 값도 저장할 수 없다.

function func4(): naver {
  while (trye) {}
}

function func5(): naver {
  throw new Error();
}

---

함수에 타입을 선언

함수의 반환값 타입은 함수 이름 오른쪽에 ' : 타입이름'으로 지정할 수 있다.

function sayWord(word): string {
 return word;
}

 

파라미터 오른쪽에 ' : 타입이름'을 넣으면 파라미터의 타입이 정의된다.

function sayWord(word: string): string {
 return word;
}

 

자바스크립트 함수에서는 파라미터와 인자의 개수가 일치하지 않아도 프로그래밍상 문제가 없었다. 하지만 타입스크립트에서는 에러가 발생한다. 그렇다면, 파라미터의 개수만큼 인자를 넘기고 싶지 않을 때는 어떻게 해야 할까? 바로 '옵셔널 파라미터'를 사용하면 된다.

 

옵셔널 파라미터(optional parameter)

함수의 파라미터를 선택적으로 사용하고 싶을 때 사용하며 ?로 표기한다. 선택적으로 사용하고 싶은 파라미터의 오른쪽에 붙이면 된다.

function sayMyName(firstName: string, lastName?: string): string {
 return 'my name : ' + firstName + ' ' + lastName;
}

---

참고 자료

쉽게 시작하는 타입스크립트(p.57-70)

한 입 크기로 잘라먹는 타입스크립트 강의