📌 Interface

사용법 📝

인터페이스의 이름은 대문자로 시작해야하며
다른언어의 경우 interface의 i 를 따와서 이름앞에 i를 붙혀주는 네이밍 컨벤션을 사용하고 있지만 ㄴ
타입스크립트에서는 i를 붙히지 않는것을 네이밍컨벤션으로 권장하고 있다.

타입스크립트 네이밍 컨벤션 문서
https://github.com/microsoft/TypeScript/wiki/Coding-guidelines

👇 이전 포스팅에서 작성한 코드를 가지고 interface를 만들었다.

interface Student {
	studentID: number;
    stundentName: string;
    age: number;
    gender: stirng;
}

function getStudentInfo(studentID: number): Student {
  //로직
}

완성된 인터페이스는 이제 타입으로써 사용이 가능해 진다.

인터페이스를 타입으로 가지는 값은 인터페이스의 구조를 그 값의로 가지도록 강제된다.

프로퍼티를 자유롭게 사용하는 방법(Feat... 선택적 프로퍼티 😎)

interface Student {
	studentID: number;
    stundentName: string;
    age: number;
    gender: stirng;
}

function getStudentInfo(studentID: number): Student {
  return {
    studentID: 123456;
    stundentName: "John Kim";
    gender: "male";
  }
}

위와 같이 age를 interface에 정의하였지만 실제 return 값에 age를 빼버리면

error가 발생하는데 이런경우 조금더 유연하게 사용하기 위해서 사용할 수 있는 방법이 있다.

interface Student {
	studentID: number;
    stundentName: string;
    age?: number;
    gender: stirng;
}

이렇게 age 프로퍼티 이름 뒤에 ?를 붙혀주면 있어도 되고 없어도 되는 선택적 프로퍼티가 되었다.
그리고 다시 실행하게 되면 error가 사라진다.

인터페이스 재사용!!

function saveStudentInfo(student: Student): void{

}

위에 코드에서 처럼 기존에 정의 했던 interface를 가지고 매개변수의 타입으로지정이 가능하며

아래 코드처럼 사용이 가능하다.

const student1= {
    studentID: number;
    stundentName: string;
    age?: number;
    gender: stirng;
}


saveStudentInfo(student1)

인터페이스와 메소드 (method) 🥴

메소드란 객체내에서 정의된 함수이다.

메소드를 인터페이스에서 정의하는 방법은 다음과 같다.

하나는 일반형식 다른 하나는 arrow 형식을 적용하였다.

표현방법만 다를 뿐 두가지 모드 addComment라는 메소드를 정의하고 comment라는 이름을 가지는 string 타입의 매개변수를 가지며, string 값을 반환하는 메소드이다.

interface Student {
	addComment (comment: string) : string ;
    addComment: (comment: string) => string
}

//실제로 프로젝트에 사용된 코드
 interface TodoServiceReturn {
  toggleStatus: (id: number) => void;
  toggleImportance: (id: number, nextImportance: number) => void;
  removeTodo: (id: number) => void;
  filterTodo: (filterName: string) => void;
}

ReadOnly 프로퍼티

readonly 프로퍼티는 읽기 전용 프로퍼티로 객체 생성시 할당된 프로퍼티의 값을 바꿀수 없다.

interface Student {
    readonly studentID: number;
    stundentName: string;
    age?: number;
    gender: stirng;
}

function saveStudentInfo(student: Student): void{
	student.studentId = 2222; //Cannot assign to 'studentID' because it is a read-only property
}

위의 코드의 studentID는 readonly 프로퍼티이기 때문에 새로운 값을 할당할 수 없다는 에러가 발생한다.

인터페이스 확장 🪢

extends 키워드를 사용하여 기존에 정의된 인터페이스를 확장해서 사용할 수도 있다.

interface BasicInfo {
	name: string;
	star: number;
}

interface DetailInfo extends BasicInfo {
	address: string;
	phone: string;
	position: number[];
}

const sipboon: BasicInfo = {
	name: "십분의일",
	star: 5,
};

const chroad3: DetailInfo = {
	name: "취향로3가",
	star: 5,
	address: "을지로3가",
	phone: "123-456-7890",
	position: [37.565496, 126.99142],
};

교차 타입(Intersection Types) 활용

interface ErrorHandling{
  success:boolean;
  error?:{message:string};
}
interface ArtworksData{
  artworks:{title:string}[];
}
interface ArtistsData{
  artists:{name:string}[];
}

type ArtworkResponse=ArtworksData & ErrorHandling;
type ArtistsResponse=ArtistsData & ErrorHandling;

const handleArtistsResponse=(response:ArtistsResponse) =>{
  if(response.error){
    console.error(response.error.message);
    return;
  }
  
  console.log(response.artists);
};

합쳐서 새로운 인터페이스를 만드는 것은 아니고, & 기호를 사용하여 기존에 정의했던 인터페이스를 합쳐서 새로운 타입을 만드는 것이다.

✅ 인터페이스 한줄평

인터페이스는 작성중인 코드에 대한 더 많은 정보를 타입스크립트에 제공하기 위해 존재한다.