TS | 인터페이스

| 인터페이스

인터페이스

만약 아래와 같이 프론트와 백엔드가 있다고 가정하자

const man = {
    name: "jae",
    age: 25,
};

// 웹 앱
/// 경계선 //
// 서버

function prt(params: any){
    console.log(params.city ?? 'default city');
}
prt(man);

인터페이스는 일반적으로 타입 체크를 위해 사용되며 변수, 함수, 클래스에 사용할 수 있다. 인터페이스는 여러가지 타입을 갖는 프로퍼티로 이루어진 새로운 타입을 정의하는 것과 유사하다. 인터페이스에 선언된 프로퍼티 또는 메소드의 구현을 강제하여 일관성을 유지할 수 있도록 하는 것이다. ES6는 인터페이스를 지원하지 않지만 TypeScript는 인터페이스를 지원한다.

 

인터페이스는 프로퍼티와 메소드를 가질 수 있다는 점에서 클래스와 유사하나 직접 인스턴스를 생성할 수 없고 모든 메소드는 추상 메소드이다. 단, 추상 클래스의 추상 메소드와 달리 abstract 키워드를 사용하지 않는다.

interface IPerson{
    name: string;
    age: number;
    city?: string; //city가 넘어올수도있고 넘어오지않을수도 있을때 ?
}
const man = {
    name: "jae",
    age: 25,
};

// 웹 앱
/// 경계선 //
// 서버

function prt(params: IPerson){
    console.log(params?.city ?? 'default city'); //city가 있는지 없는지 모르니까 명시적으로 ?를 붙여줘서 에러가 항상 안나게해준다 
}
prt(man);

city:값이 있다면

interface IPerson{
    name: string;
    age: number;
    city?: string; //city가 넘어올수도있고 넘어오지않을수도 있을때 ?
}
const man = {
    name: "jae",
    age: 25,
    city: "seoul",
};

// 웹 앱
/// 경계선 //
// 서버

function prt(params: IPerson){
    console.log(params?.city ?? 'default city'); //city가 있는지 없는지 모르니까 명시적으로 ?를 붙여줘서 에러가 항상 안나게해준다 
}
prt(man);

 

익명인터페이스

인터페이스도 익명 인터페이스가 가능하다

자주쓰는 인터페이스가 아닌 일회용으로 쓸 인터페이스 같은 경우

const man: { name: string; age: number; city?: string; } = {
    name: "jae",
    age: 25,
    city: "seoul",
};

// 웹 앱
/// 경계선 //
// 서버

function prt(params: IPerson){
    console.log(params?.city ?? 'default city'); //city가 있는지 없는지 모르니까 명시적으로 ?를 붙여줘서 에러가 항상 안나게해준다 
}
prt(man);