Interface - 기본

@2023/09/17

안녕하세요 lika-7입니다

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

Interface란

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

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

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

인터페이스와 클래스

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 로 초기화 한 문장이 코드상 에러가 나게 됩니다.

인터페이스 함수