타입 어노테이션(Type Annotation)

1. 타입 어노테이션(Type Annotation)

• 변수, 함수의 매개변수, 함수의 반환값 등에 사용
• 해당 식별자(변수명)의 타입을 명시적으로 선언
• 보통 식별자 뒤에 콜론을 사용하여 직접 명시

let number;
let anyNumber: any;
// any 타입의 변수로 명시하지 않은 경우 값을 할당할 때마다 해당 값의 타입의 변수로 재지정

• 변수에 초기화가 되는 경우

  number = 123.456;
  anyNumber = 123.789;
  console.log(number.toFixed(2)); // 사용 가능
  console.log(anyNumber.toFixed(2)); // 사용 가능

  number = '전화번호';
  anyNumber = '전화번호';
  // console.log(number.toFixed(2)); // Error
  // 'toFixed' 속성이 'string' 형식에 없습니다.

 

2. 타입 별칭 (Type Alias)

• 새로운 타입 이름을 생성하여 기존 타입을 참조할 수 있게 하는 기능
• 코드의 가독성과 재사용성을 향상
• 타입 별칭은 대문자로 시작!
• 기본 사용 방법
  • type 키워드를 사용하여 정의
  • type 타입별칭 = 타입; (콜론이 아닌 =(할당 연산자)를 사용)

1. 변수 타입 별칭

• 변수의 경우 별칭 사용을 거의 하지 X

type Text = string;
let message: Text = '텍스트 메시지'; // 가능은 하지만 별칭 대신 string 사용 권장
let message2: Text = '텍스트 메시지2'; // 가능은 하지만 별칭 대신 string 사용 권장

 

2. 객체 타입 별칭

• 타입 별칭 내에서도 선택적 프로퍼티와 읽기 전용 속성 사용 가능
• 타입 별칭 명 지정 시 '데이터 변수명+Type'을 주로 사용

type UserType = {
name: string;
height: number;
};
const user1: UserType = {
name: '테드',
height: 177,
};
const user2: UserType = {
name: '테드친구',
height: 167,
};

 

3. 함수 타입 별칭

• User 타입인 매개변수를 받아 boolean 타입의 반환값을 생성하는 함수

type User = {
  id: string;
  name: string;
};
type ValidateUserType = (user: User) => boolean;

 

• 함수 사용 예제
• 사용가 입력되었을 때
  사용자의 아이디가 null인 경우(입력하지 않은 경우) false
  사용자의 아이디가 입력된 경우 true

const isValidUser: ValidateUserType = (user) => user.id !== '';

let userA: User = {
  id: 'qwe',
  name: '테드',
};
let userB: User = {
  id: '',
  name: '테드친구',
};
console.log(isValidUser(userA)); // true
console.log(isValidUser(userB)); // false

 

• void 타입 사용 예시

  type VoidReturnType = (x: number) => void;
  const add: VoidReturnType = (x) => console.log(x + x);
  add(2); // 4

 

3. 함수 타입 별칭 예제

1. 함수 타입 별칭 정의

type GreetFunction = (name: string) => string;

 

2. 위의 타입 별칭을 사용하는 함수 구현

const greet: GreetFunction = (name) => {
	return `Hello, ${name}`;
};

 

3. 일반 선언적 함수에서 타입 명시 - 타입 별칭 사용 불가능

function greet2(name: string): string {
  return `Hello, ${name}`;
}

 

연습 문제

문제 1 - 타입 어노테이션 사용

변수 age를 선언하고 숫자 타입으로 어노테이션을 지정
변수 isStudent를 선언하고 불리언 타입으로 어노테이션을 지정
위 두 변수에 적절한 값을 할당하고, 콘솔에 출력

정답

let age: number;
let isStudent: boolean;
age = 30;
isStudent = true;
console.log(`Age: ${age}, isStudent: ${isStudent}`); // Age: 30, isStudent: true

 

문제 2 - 타입 별칭 사용

ProductType이라는 타입 별칭을 생성
객체, id (문자열 타입), name (문자열 타입), price (숫자 타입) 속성 포함
ProductType 타입을 사용하여 product라는 이름의 변수를 선언하고, 적절한 값을 할당
product 객체의 내용을 콘솔에 출력

정답

type ProductType = {
  id: string;
  name: string;
  price: number;
};
const product: ProductType = {
  id: 'd2',
  name: '모션 데스크',
  price: 800000,
};
console.log(product); // { id: 'd2', name: '모션 데스크', price: 800000 }
console.log(`${product.id}, ${product.name}, ${product.price}`);
// d2, 모션 데스크, 800000

 

 

노션으로 보고 싶다면?

https://short-echidna-b16.notion.site/Type-Annotation-a76fc7eb5b734e228591340906090c38?pvs=4

타입 어노테이션(Type Annotation) | Notion