타입 추론 & 명시 & 인터페이스

정승옥(seungok)·2021년 4월 11일
0

타입스크립트

목록 보기
2/4
post-thumbnail

1. 타입 추론

let a = 5;
a = 'hello'; // Type 'string' is not assignable to type 'number'.
  • 타입 표기가 없는 경우 타입스크립트에서 코드를 읽고 분석하여 타입을 유추한다.
  • 위 코드처럼 타입을 명시하지 않고 a 변수에 number 타입의 값을 할당한 후 밑에 줄에서 string 타입의 값을 할당하면 에러 메세지가 나타난다.
let student = {
  name: 'jake',
  cousre: 'script',
  codingIQ: 123,
  code: (score:number)=>{
    alert(score);
  }
}

student.name = 10;

function calculator(number){
  return 100 - number;
}
  • student 객체에 타입을 명시하지 않고 student.name 속성의 값을 number 타입의 값으로 할당하면 타입스크립트에서 에러메세지를 보낸다.
  • 함수 또한 마찬가지로 매개변수의 타입을 선언하지 않고 뺄셈 연산자를 통해 function calculator(number: any): number 반환되는 값이 number 타입인 것을 알고 있다.

2. 타입 명시

function getStudentDetails(studentID:number):{
  studentID: number;
  studentName: string;
  age:number;
  gender:string;
  subject:string;
  courseCompleted:Boolean;
}{
  return {studentID: 10, studentName: 'jeong', age: 20, gender:'male', subject:'javascript',courseCompleted:true}
}
  • 함수에서 매개변수와 반환되는 값의 타입을 명시할 수 있다.
  • 매개변수는 괄호 안에서 변수 옆에 타입을 명시하고 반환 값에 대한 타입 명시는 매개변 수 옆에 명시를 하고 반환되는 값이 없을 경우 void 를 작성해주면 된다.

3. 인터페이스

interface Student {
  readonly studentID: number;
  studentName: string;
  age? :number;
  gender:string;
  subject:string;
  courseCompleted:Boolean;
  addComment?: (comment:string) => string;
}

function getStudentDetails(studentID:number):Student{
  return {studentID: 10, studentName: 'jeong', age: 20, gender:'male', subject:'javascript',courseCompleted:true}
}

function saveStudentDetails(student: Student):void{
// Cannot assign to 'studentID' because it is a read-only property.
student.studentID = 10;
}
  • 인터페이스는 타입 체크를 위해 사용되며 변수, 함수, 클래스에 사용할 수 있다.
  • 인터페이스에 선언된 속성 또는 메소드의 구현을 강제하여 일관성을 유지할 수 있도록 한다.
  • 속성의 뒤에 ? 를 붙여 있어도 되고 없어도 되는 선택적 속성 으로 만들어 줄 수 있다.
  • 마지막 saveStudentDetails 함수처럼 매개변수의 타입을 인터페이스를 재사용 하여 타입을 정의할 수 있다.
  • readonly 속성은 새로운 값이 할당될 수 없다.
  • Interface 는 자바스크립트로 컴파일될 때 코드에서 지워진다.
profile
Front-End Developer 😁

0개의 댓글