새소식

프론트엔드/typescript

Interface - 기본

  • -

안녕하세요 lika-7입니다

오늘은TypeScript의 inteface가 무엇인지 정리하였습니다

일반적으로 타입 체크를 위해 사용 합니다

변수, 함수, 클래스에 사용할 수 있습니다.

이를 통해 인터페이스에 선언된 프로퍼티 또는 메소드의 구현을 강제하여 일관성을 유지하도록 합니다.

1. 유사점

  • 프로퍼티와 메소드를 가질 수 있다는 점에서 클래스와 유사

2. 다른점

  • 직접 인스턴스를 생성 할 수 없음
  • 모든 메소드는 추상 메소드임, 추상 클래스의 추상 메소드와 달리 abstract 키워드를 사용하지 않음

interface

1. 특정 유형의 객체들이 동일한 속성을 가지고 있을 때 interface를 통해 쉽게 구현 할 수 있다 2. 타입 체크 용도라면 interface 사용이 좋다

class

1. constructor 또는 함수 구현시 class를 사용하는 것이 좋다
//TypeScript //인터페이스의 정의 interface User { name: String readonly age: Number isValid: boolean } //heropy 변수의 타입은 User 인터페이스를 선언하였다. const heropy: User = { name: 'Heropy', age: 85, isValid: true } //neo 변수의 타입은 User 인터페이스를 선언하였다. const neo: User = { name: 'Neo', age: 102, isValid: true }
💡
선택적 속성은 해당 타입을 선언해도 되고 선언 하지 않아도 되는 것을 의미합니다
선택적 속성의 키워드는 ? 를 씁니다

//TypeScript interface User { name: String age: Number isValid?: boolean } const heropy: User = { name: 'Heropy', age: 85, isValid: true } const neo: User = { name: 'Neo', age: 102 }

위의 예제에서 neo는 isValid 속성이 있어도 되고 없어도 됩니다.

💡
읽기 전용은 초기화 이후 새로운 값을 할당 할 수 없음을 의미합니다
읽기 전용의 키워드는 readonly 를 씁니다
//TypeScript interface User { name: String readonly age: Number isValid?: boolean } const heropy: User = { name: 'Heropy', age: 85, isValid: true } heropy.isValid= false heropy.age = 12 const neo: User = { name: 'Neo', age: 102 }

위의 예제에서 age 속성은 readonly로 선언되어 있기에

heropy.age = 12 로 초기화 한 문장이 코드상 에러가 나게 됩니다.

포스팅 주소를 복사했습니다

이 글이 도움이 되었다면 공감 부탁드립니다.