TypeScript 4회차 - 인터페이스

https://youtu.be/jlzvXcDGZUU=5

인터페이스로 객체구조를 정의하는 법.

interface 인터페이스이름 {

}

1. 인터페이스의 이름은 대문자로 시작해야 한다.
   다른 언어들은 인터페이스 이름 앞에 i를 붙이는 네이밍 컨벤션을 쓰는데 ts는 그냥 대문자로 시작한다.

2. interface괄호 안은 정의할 객체의 구조를 넣어준다.

완성된 인터페이스는 string, number 처럼 타입으로써 사용 가능하다.

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

let studentID:number = 12345;
let studentName:string = 'Jenny Kim';
let age:number = 21;
let gender:string = 'female';
let subject:string = 'Javascript';
let courseCompleted:boolean = false;

interface Student {
    studentID: number;
    studentName: string;
    age?: number;
    gender: string;
    subject: string;
    courseCompleted: true;
}

function getStudentDetails(studentID: number): Student{
 	return null;
}

getStudentDetails 함수의 return 값이 Student 인터페이스의 구조와 같은 값을 가져야한다는 의미이다!

function getStudentDetails(studentID: number): Student{
 	return {
        studentID: 123456,
        studentName: 'Mark Jacobs',
        age: 20,
        gender: 'male',
        subject: 'Node JS',
        courseCompleted: true
    }
}

return 값에서 인터페이스의 속성들 중 하나만 빠져도 에러 발생.
Property 'age' is missing in type '{~}' but required in type 'Student'.

인터페이스에 선언한 속성(property)명에 물음표가 붙으면 해당 인터페이스를 타입으로 사용할 때 물음표가 붙은 속성은 return 값에 있어도 되고 없어도 된다.

function saveStudentDetails (student: Student): void {
    //인터페이스를 타입으로 재사용함으로써 반복되는 코드를 줄임
    
    //student.studentID = 11222;
}

//아래처럼 argument로 객체를 직접 적어줄 수도 있지만 선행하여 선언된 
//객체명을 넣어서 처리할 수도 있다.
saveStudentDetails({
    studentID: 121212,
    studentName: 'Janet Jackson',
    age: 30,
    gender: 'Female',
    subject: 'Mongo DB',
    courseCompleted: false
})

const student1 = {
    studentID: 121212,
    studentName: 'Janet Jackson',
    age: 30,
    gender: 'Female',
    subject: 'Mongo DB',
    courseCompleted: false
}

saveStudentDetails(student1)

인터페이스와 메서드(method)

인터페이스 내에서 메서드도 정의 가능하다!

addComment (comment: string) : string;
addComment : (comment: string) => string;
이렇게 두가지 방법으로 정의 가능한데 기능은 똑같음.
string 타입의 comment라는 매개변수를 가지고 string 타입의 값을 반환하는 함수.

Readonly 프로퍼티?

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

인터페이스 안의 studentID 속성에 readonly 설정을 해주었기 때문에 saveStudentDetails 함수에서 studentID 값을 변경하려 하면 에러가 발생한다.

여기서 정의된 인터페이스는 컴파일 된 js 파일에서는 보이지 않는데, 실제로 인터페이스는 렌더링 되는 데 아무런 영향력이 없기 때문에 컴파일 하면서 코드에서 삭제한다.

인터페이스는 그저 ts에게 작성중인 코드에 대한 더 많은 정보를 전달하기 위한 것.