TS 타입 명시

📃 타입 명시

변수를 선언할 때, 변수 값의 타입을 명시함으로써 변수 값의 데이터 타입을 지정합니다.

타입을 명시하고 다른 타입의 벨류를 입력한다면 컴파일 에러가 발생합니다.

✔ Syntax
대부분의 경우 변수 이름뒤에 :을 적고 변수의 데이터 타입을 정해줍니다. 아래 예제의 값은 string 값만 지정할수 있습니다.

let x : string = "코딩 공부중"

함수의 매개변수에도 타입을 지정할수 있습니다.
함수의 결과값 즉 return 값에도 가능합니다.
반약 함수가 아무 값도 반환하지 않는다면 :void 타입을 명시할수 있습니다.
void란 이 함수는 아무것도 반환하지 않는다 라는 의미로 생각하시면 됩니다.
만약 함수가 어떠한 특정값을 반환한다면 void 대신 해당 타입을 명시하시면 됩니다.

function getStudentDetails(studentId: number): void {}

✔ 반환되는 객체의 디테일

타입스크립로 코드를 만들때 타입에 관한 많은 정보를 타입스크립트에게 줄수록 좋습니다.
더 많은 정보가 제공될수록 타입스크립트는 우리가 코드를 조금더 깔끔하고 효과적이게 작성하고 유지보수를 할수있도록 도와줄수 있기 때문입니다. 단순히 반환값을 적는것도 좋지만 조금더 디테일하게 반환타입을 지정해줄수 있습니다. 하지만 코드가 조금 복잡해 보일수 있기때문에 인터페이스를 사용하여 조금더 깔끔하게 사용하는 방법을 알아보겠습니다.

function getStudentDetails(studentId: number):  {
  studentId: number;
  studentName: string;
  age: number;
} {}

✔ interface

인터페이스를 타입으로 사용하기 위해서 먼저 생성해주겠습니다.
interface 인터페이스이름 { 타입 } 이름의 첫글자는 대문자로 생성합니다. 생성된 인터페이스는 리턴값 타입에 넣어주시면 사용가능합니다.

컴파일된 자바스크립트를 보시면 인터페이스는 보이지 않습니다. 코드가 랜더링될때 인터페이스를 코드에서 지워버립니다.
즉 인터페이스는 작성중인 코드에 대한 더 많은 정보를 타입스크립트에 제공하기 위해 존재합니다.

interface Student {
  studentId: number;
  studentName: string;
  age: number;
}

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

인터페이스를 타입으로 가지는 값은 인터페이스의 구조를 그 값으로 가지도록 강제됩니다. 즉 getStudentDetails() 메서드의 반환값은 반드시 Sturnt 인터페이스의 정의된 프로퍼티를 가져야합니다.

// 에러를 반환합니다.
function getStudentDetails(studentId: number): Student {
  return "hello";
}

반환값으로는 반드시 인터페이스의 정의된 프로퍼티가 있어야합니다.
하나라도 빠진다면 에러를 반환합니다. 더 유연하게 사용하고 싶다면 선택적 프로퍼티를 구현합니다.

function getStudentDetails(studentId: number): Student {
  return {
    studentId: 10,
    studentName: "sim",
    age: 32,
  };
}

✔ 선택적 프로퍼티
조금더 유연하게 사용하기 위해서는 인터페이스의 원하는 타입에 이름뒤? 넣어주면 구현가능합니다.
아래 예제를 보시면 반환값으로 age값이 없어도 에러가 발생하지않습니다. 즉 있어도 되고 없어도 되는 값으로 설정되었습니다.

interface Student {
  studentId: number;
  studentName: string;
  age?: number;
}

function getStudentDetails(studentId: number): Student {
  return {
    studentId: 10,
    studentName: "sim",
  };
}

✔ 인터페이스 재사용
만들어진 인터페이스는 재사용이 가능합니다. 아래 예제는 만들어진 Student 인터페이스를 stdent 매개변수의 타입으로 설정해주었습니다. 반환값은 아무것도 반환하지 않기 때문에 void 타입으로 설정해주었습니다. 반복되는 코드를 피하고 좋은 코드를 위해 사용합니다.

function saveStudentDetails(student: Student): void {}

saveStudentDetails({ studentId: 10, studentName: "sim", age: 32 });

✔ 오브잭트를 아규먼트로 사용 가능합니다.

오브잭트를 밖에 생성하고 생성된 오브잭트를 아규먼트로 넣어줌으로써 아규먼트로도 사용이 가능합니다.

let student1 = {
  studentId: 10,
  studentName: "sim",
  age: 32,
};

function saveStudentDetails(student: Student): void {}

saveStudentDetails(student1);

✔ 인터페이스와 메소드

메소드도 인터페이스 속에서 정의할수 있습니다.
메소드를 인터페이스에서 정의하기 위해서는 2가지 방법이 있습니다. 두가지 신텍스는 같은 일을 하며 표현 방법만 다릅니다. addComment라는 이름의 메소드를 정의하고 comment라는 string 매개변수를 받고 string 값을 반환하는 메소드입니다.

interface Student {
  studentId: number;
  studentName: string;
  age?: number;
  addComment(comment: string): string;
  addComment: (comment: string) => string;
}

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

인터페이스에서 읽기 전용이여야 하는 값의 앞에 readonly라는 읽기전용 속성을 지정해줍니다.

Student 타입의 파라미터를 받는 함수로 가서 readonly로 설정된 값을 바구려하면 에러가 발생합니다.
Cannot assign to 'studentId' because it is a read-only property.

interface Student {
  readonly studentId: number;
  studentName: string;
  age?: number;
  addComment(comment: string): string;
  addComment: (comment: string) => string;
}


function saveStudentDetails(student: Student): void {
  student.studentId = 11112;
}

saveStudentDetails(student1);