[TypeScript] Type Annotation

Type Annotation

• TypeScript는 type이 있는 언어 (※ JavaScript는 loosely typed 언어, dynamic 언어 - 타입 지정이 필요 없고, 같은 변수에 여러 타입의 값을 넣을 수 있음)
• 변수나 함수, 객체 속성의 데이터 타입을 지정
• 변수명, 함수명, 객체 속성명 뒤에 : type 을 써서 데이터 타입을 지정
• TypeScript는 JavaScript의 primitive type(number, string, boolean)을 사용 가능
• Type annotation을 사용하여 type 검사를 수행
• 필수사항 X

사용 시 장점

• 컴파일러가 type을 확인하는 데에 도움
• data type을 처리하는 오류 방지에 도움
• 협업을 할 때 읽기 쉬운 코드가 됨
• 유지보수에 장점

 

예제

// 변수에 타입 지정하기
let age: number = 32; // number variable
let name: string = "John";// string variable
let isUpdated: boolean = true;// Boolean variable

// 함수 파라미터에 타입 지정하기
function display(id:number, name:string)
{
    console.log(`Id = ${id}, Name = ${name}`);
}

// 객체 속성에 타입 지정하기
let employee : { 
    id: number; 
    name: string; 
}; 

employee = { 
  id: 100, 
  name : "John"
}

 

- 지정한 데이터 타입과 다른 값을 선언하면 다음과 같은 에러가 발생

error TS2322: Type '{ id: string; name: string; }' is not assignable to type 
'{ id:number; name: string; }'.Types of property 'id' are incompatible.
Type 'string' is not assignable to type 'number'.

 

Primitive Type (원시 타입)

• Boolean
• Null
• Undefined
• Number
• String
• Symbol (ECMAScript 6에 추가)

Reference Type (참조 타입)

• Object

 

출처

https://developer.mozilla.org/ko/docs/Web/JavaScript/Data_structures

https://www.tutorialsteacher.com/typescript/type-annotation