타입스크립트 문법(2)

목차

1. Array   1.1 배열안의 타입이 모두 같을 경우   1.2 배열안의 타입이 각각 다를 경우(tuple)

2.인터페이스(Interface)   2.1  선택적 프로퍼티(Optional Properties)   2.2 읽기 전용 프로퍼티(readonly Properties)   2.3 인터페이스(Interface) 상속

3, Class   3.1 상속   3.2 다형성   3.3 캡슐화   3.4 추상화   3.5 접근 제한자   3.6 클래스와 인터페이스

 

1. Array

 

 

배열 또한 크게 보면 Object 타입이다.

 

하지만, 배열의 타입을 지정할 때에는, 배열안에 들어있는 요소들의 타입들도 모두 지정해주어야 한다.

 

타입을 지정하는 방법은 크게 두 가지로 나타낼 수 있다.

 

 

1.1 배열안의 타입이 모두 같을 경우

 

타입이 모두 같을 경우에는 변수 옆에 타입과 배열을 표시해 주면 된다.

 

{
    const numArr: number[] = [1, 2, 3]
    const strArr: string[] = ["a", "b", "c"]
}

 

 

---

1.2 배열안의 타입이 각각 다를 경우(tuple)

 

배열 안의 타입이 각각 다를 경우에는 튜플(tuple) 타입이라고 하며 다음과 같이 나타낸다.

 

{
    const tuple: [string, number] = ["a", 1]
}

 

---

2. 인터페이스(Interface)

 

인터페이스는 실제로 구현을 위해서 사용하는 것은 아니다.

 

즉, 추상적인 내용을 담고있는 것이다.

 

인터페이스는 타입스크립트에서 컴파일을 진행했을 때 자바스크립트로 변화시켜주지 않는다.

 

VScode 같은 에디터가 인지하고 있는 부분이다. 

 

객체를 선언할 때 직접 Object라는 속성을 주게되면,

 

Object가 더 상위 개념이기 떄문에 점 표기로 그 안의 메서드를 보려고 할 때 상위에 있는 Object 메서드만 알려준다.

 

따라서 각 프로퍼티(속성)마다 모두 타입을 지정해주어야 한다.

 

하지만, 객체 프로퍼티의 양이 많아지면 모두 쓸 수가 없기 때문에 interface를 사용한다.

 

즉, interface는 객체의 구조를 정의하는 타입이라고 할 수 있다.

 

이제 interface의 생김새에 대해 한 번 알아보자.

 

 

Interface

 

interface IProduct {
    name: string
    price: number
}

// interface를 사용하지 않았을 경우
const product:{ name: string, price: number } = { name: "맥북", price: 1_000 }

// interface를 사용할 경우
const product:IProduct = { name: "맥북", price: 1_000 }

 

위의 코드에서는 단 2가지 프로퍼티 임에도 길이 차이가 조금 난다.

 

객체에는 더 많은 속성을 담는 경우가 많은 데 그럴 경우에 저렇게 interface로 선언해서 사용하면,

 

좀 더 수월하게 코드를 작성할 수 있다.

 

---

2.1 선택적 프로퍼티(Optional Properties)

 

interface에서 프로퍼티는 반드시 프로퍼티를 가져야 하지만, 선택적 프로퍼티를 사용하면,

 

일부 프로퍼티는 있어도 되고 없어도 된다고 명시할 수 있다.

 

선택적 프로퍼티는 '?' 기호(옵셔널)를 프로퍼티 이름 뒤에 붙여서 사용한다.

 

"key" ?: value

 

interface IBoard {
    id: number
    subject: string
    contents: string
    writer: string
    date: string
    hit: number
    like?: number
}

const board: IBoard = {
    id: 1,
    subject: "첫번째 글제목",
    contents: "첫번째 글내용",
    writer: "첫번째 글 작성자",
    date: "2023-04-19",
    hit: 20230419,
}

 

위의 board 객체처럼 like 속성이 없더라도 에디터에 에러 표시를 해주지 않는다.

 

like를 제외한 나머지 속성들은 모두 있어야한다.

---

2.2 읽기 전용 프로퍼티(Readonly Properties)

 

 

인터페이스에서 읽기 전용 프로퍼티를 정의할 수 있다.

 

읽기 전용 프로퍼티는 객체가 생성된 이후에는 값을 변경할 수 없다.

 

후에 나올 class의 private은 해당 클래스 내에서만 접근이 가능하지만,

 

인터페이스의 읽기 전용 프로퍼티(readonly)는 객체를 생성한 후에 값을 변경할 수 없다.

 

 

읽기전용 프로퍼티는 다음과 같이 프로퍼티 이름 앞에 'readonly' 를 붙여서 사용한다.

 

readonly [ key ] : value

 

readonly에 접근하려고 하면 에러를 감지한다.

 

interface IUser {
  name: string;
  readonly age: number;
}

const user: IUser = { name: "char1ey", age: 30 }

user.name = "char2ey"
user.age // 에러감지

 

---

2.3 인터페이스(interface) 상속

 

인터페이스 상속이란 인터페이스에서 다른 인터페이스를 상속받는 것이다.

 

기존의 인터페이스에서 무언가를 더 확장하고 싶을 떄 상속을 사용한다.

 

인터페이스 상속을 사용하면 기존의 인터페이스에서 선언한 모든 프로퍼티와 메서드를 다시 선언하지 않아도 된다.

 

상속받은 인터페이스에서 추가적으로 선언하고 싶은 것만 추가해주면 된다.

 

interface User {
  name: string;
  age: number;
}

interface UserInfo extends User {
  address: string;
  birth: string;
}

const user: UserInfo = {
    name: "char1ey";
    age: 30,
    address: "korea",
    birth: "1900-01-01",
}

 

---

3. Class

 

 

타입스크립트에서 클래스는 자바스크립트보다 정의해야할 것들이 많다.

 

한번 살펴보도록 하자

 

class User {
    name: string
    age: number
    
    constructor(name:string, age:number){
        this.name = name
        this.age = age
    }
}

 

기존의 자바스크립트는 미리 어떤 변수를 사용할 지 적어주지 않아도 되었는데,

 

타입스크립트에서는 미리 변수의 타입을 지정하고, 생성자(contructor) 함수의 매개변수에도 타입을 설정해야한다.

 

 

---

3.1 상속

 

 

클래스는 상속을 통해서 부모 클래스에서 특성을 가져와서 사용할 수 있다.

 

이를 통해서 코드 재사용성과 유지보수성을 높일 수 있다.

 

 

아래의 코드는 부모 객체에 구현해놓은 메서드를 가져와서 사용하는 코드이다.

 

class User {
    name: string
    age: number
    constructor(name: string, age: number){
        this.name = name
        this.age = age
    }

    getName(): void{
        console.log(this.name)
    }
}

class UserInfo extends User {
    address:string
    constructor(name: string, age: number, address: string){
        super(name, age)
        this.address = address
    }
}

const userInfo = new UserInfo("char1ey", 29, "한국")
console.log(userInfo.getName()) // "char1ey"

 

---

3.2 다형성

 

 

다형성(Polymorphism)은 같은 이름의 메서드가 서로 다른 작업을 수행할 수 있는 것을 의미한다.

 

타입스크립트에서는 다형성을 이용해 코드의 재사용성, 가독성 등을 높일 수 있다.

 

 

아래의 글에 있는 할인율과 할인금액을 이용하는 부분은 같은 이름의 메서드가 서로 다른 작업을 수행하는 코드로 이루어져 있다.

 

이를 다형성이라고 한다.

 

https://char1ey.tistory.com/106

타입스크립트 실습코드(OOP) (230419)

---

3.3 캡슐화

 

 

캡슐화(Encapsulation)는 클래스의 내부 데이터와 메서드를 외부에서 접근할 수 없도록 보호하는 것을 의미한다.

 

타입스크립트에서는 접근 제한자(private, protected, public)를 이용해서 클래스의 내부 데이터를 캡슐화할 수 있다.

 

---

3.4 추상화

 

 

추상화는 클래스의 공통적인 특성을 추출하여 상위 클래스로 만드는 것이다.

 

추상 클래스(Abstract class)를 통해서 추상화를 구현할 수 있다.

 

 

 

---

3.5 접근 제한자

 

 

접근 제한자를 이용하면 클래스의 프로퍼티, 메서드 등에 접근을 제한할 수 있다.

 

접근 제한자에는 public, protected,  private세 가지가 있다.

 

public은 클래스의 외부, 내부에서 모두 접근이 가능하고 아무런 설정을 하지 않으면 디폴트로 설정된다.

 

protected는 클래스의 외부에서 접근이 불가능하나, 상속받은 하위 클래스에서는 접근이 가능하다.

 

private은 해당 클래스에서만 접근이 가능하다.

 

class User {
    private name: string
    protected age: number
    constructor(name: string, age: number){
        this.name = name
        this.age = age
    }

    private getName(): void{
        console.log(this.name)
    }

    protected getAge(): void{
        console.log(this.age)
    }
}

class UserInfo extends User {
    address:string
    constructor(name: string, age: number, address: string){
        super(name, age)
        this.address = address
    }

    getSuper(){
        super.getAge()
    }
}

const userInfo = new UserInfo("char1ey", 29, "한국")
userInfo.getSuper()

 

위에서 상위 클래스 User에 구현된 getName은 private이므로 접근할 수 없고

 

getAge는 protected이므로 하위 클래스에서 접근이 가능하다.

 

---

3.6 클래스와 인터페이스

 

 

위에서 객체의 타입을 정의하던 인터페이스를 이용하면, 클래스가 가져야 할 속성과 메서드를 미리 정의해 놓을 수 있다.

 

인터페이스를 클래스와 함께 사용하면 다른 클래스에서도 같은 이름의 속성과 메서드를 사용하여 객체를 만들 수 있어

 

코드의 재사용성이 높아진다.

 

이것도 마찬가지로 아래의 실습코드에 잘 구현되어있다.

 

https://char1ey.tistory.com/106

타입스크립트 실습코드(OOP) (230419)