TypeScript Interface (2)

✅ Interface 란?

인터페이스는 상호 간에 정의한 약속 혹은 규칙을 의미한다. 타입스크립트에서는 아래와 같은 약속들은 정의한다.

• 객체의 스펙 (속성과 속성의 타입)
• 함수의 파라미터
• 함수의 스펙 (파라미터, 반환 타입 등)
• 배열과 객체를 접근하는 방식
• 클래스

let users:object;

users={
    name : '이진경',
    age : 37
}

console.log(users.name) //오류 발생

object에는 특정 속성값에 대한 정보가 없기 때문에 위처럼 객체 안에 접근은 불가능하다.
객체 안에 접근하기 위해서는 interface를 사용해야 한다.

interface User{
    name : string,
    age: number
}

let user : User={
    name : '이진경',
    age : 37,
}

//같은 타입으로 값 변경은 ok
user.age = 10

console.log(user.age) // 10

📍 Interface의 속성

1️⃣ 옵션 속성

인터페이스를 사용할 때 인터페이스에 정의되어 있는 속성을 모두 다 사용하지 않아도 된다.

interface 인터페이스의 이름{
  속성? : 타입;
  }

⭐️ 이렇게 속성의 끝에 ?를 붙이면 가능하다.

interface User{
    name : string,
    age: number,
    gender? :string
    //입력을 해도되고 안해도되는건 ?로 표현
}

let user : User={
    name : '이진경',
    age : 37
}

//같은 타입으로 값 변경은 ok
user.age = 10
user.gender = "male"

2️⃣ 읽기전용 속성

interface 인터페이스의 이름{
  readonly 속성 : 타입;
  }

⭐️ 인터페이스로 객체를 선언하고 나서 수정하려고 하면 오류를 발생시킨다! (const와 같은 기능)

interface User{
    name : string,
    age: number,
    gender? :string
    //입력을 해도되고 안해도되는건 ?로 표현
    readonly birthYear :number
    //읽기기능만 적용시키고 싶을때
}

let user : User={
    name : '이진경',
    age : 37,
    birthYear : 2000,
}

//같은 타입으로 값 변경은 ok
user.age = 10
user.gender = "male"
user.birthYear = 1997 //오류발생

👉 읽기 전용 배열

배열을 선언할 때 ReadonlyArray<T> 타입을 사용하면 읽기 전용 배열을 생성할 수 있다.

let arr: ReadonlyArray<number> = [1, 2, 3]

⭐️ 이것 또한 선언하고 나서 수정은 불가능하다.

3️⃣ 문자열 index 설정

type Score = 'A' | 'B' | 'C' | 'F'

interface User{
    name : string,
    age: number,
    gender? :string
    //입력을 해도되고 안해도되는건 ?로 표현
    readonly birthYear :number
    //읽기기능만 적용시키고 싶을때
    [grade : number] : Score
    //문자열 index 설정
}

let user : User={
    name : '이진경',
    age : 37,
    birthYear : 2000,
    1 : 'A'
    2: 'b' //오류발생
 }

⭐️ [grade : number]로 index를 지정할 수 있게 설정한 후 값으로는 지정한 배열만 입력할 수 있게 지정한다.

그 외 interface 예제들

(숫자 더하기)

interface Add {
    (num1:number, num2:number) :number
}

const add :Add = function(x,y){
    return x + y;
}

add(10, 20)

(성인인지 확인)

interface isAdult {
    (age :number):boolean
}

const a:isAdult =(age) =>{
    return age>19;
}

a(33)