포스트

2024.06.18 프로그래머스 - 타입스크립트 입문 2

게시
Preview Image
By ykdman
8 분읽는 시간

TypeScript 알아보기 2

리터럴 타입 지정

  • 특정 값 만을 허용하는 타입을 지정하는 방식

    1
2
3

      type Gender = "male" | "female"
    
  let gender : Gender = "male";

  • 리터럴로 지정한 타입은, 해당 값 과 정확하게 일치해야 한다.

    1
2
3
4
5
6

      // 올바르지 않은 리터럴 사용
  type Status = "success" | "error";
    
  let status : Status = "success" // 올바른 사용
  status = "error" // 올바른 사용
  status = "pending" // 올바르지 않은 사용

  • 리터럴 타입은 문자열, 숫자형, 불리언 등 다양한 리터럴타입을 사용할 수 있다.

객체 리터럴

  • 객체를 리터럴 타입으로 지정하여 사용하는 방식

  • 기본 리터럴 과 같이 값이 다르면 안된다.

    1
2
3
4
5
6
7
8
9
10
11
12
13
14

      type PesronsType = {
    name : "john",
    age : 30
  };
    
  let person : PesronsType = {
    name : "john",
    age : 30
  }; // 정상 사용
    
  person = {
    name : "kd",
    age : 23
  } // 올바르지않은 값 할당

리터럴 타입 사용의 장점

  • 코드의 가독성이 높아진다.
  • 잘못된 값이 들어오는 경우를 방지 할 수 있다.

유니온

  • 유니온의 본질 또한 사용자 정의 타입 이다.
  • 유니온은 타입으로 여러가지 의 타입에 대한 허용을 위해 사용되는 방법
  • 제한된 타입을 동시에 지정하고 싶을 때 사용

  • 논리 연산자 | (or 1개, 또는 파이프기호) 를 사용하여 , 다중 타입에 대한 사용을 허용한다.

    1
2
3
4
5

      type Status = string | number;
  let status1: Status = "string test"; // 정상
  let status2: Status = 123; // 정상
  status1 = 2; // 정상
  status2 = "string 허용"; // 정상

타입 별칭

  • type 키워드를 사용하여 재사용 가능한 type 지정자를 선언한다.

    1

      type Status = string | number;

타입 가드

  • JS의 typeof 연산자를 이요하여 타입 검증을 수행

Array 와 Tuple

Array

  • 특정 타입을 배열에 형태로 선언하기 위해 [] 또는 Array<> 문법을 사용한다.

  • 길이가 가변적이고, 동일한 타입의 요소로 구성 되어있다.

    1
2

      type numbers = number[]; // Array<number>
  type strings = string[]; // Array<string>

Array의 유니온 타입

  • 배열에 자료형이 다른 두 타입이 들어오는 것을 허용 하는 문법

    1
2
3
4
5
6

      type numAndStr = (number | string)[]; // Array<string|number>
    
  let numAndSTR : numAndStr = [
    "string",
    1,
  ]

Tuple

  • TS에서 튜플은 타입의 순서가 정해져 있는 배열의 형태이다.

  • 길이가 고정적, 각 요소의 타입이 정해져 있는 상태

    1

      let greet : [number, string, boolean] = [1, "test", true]

타입스크립트와 OOP

  • 클래스는 객체의 뼈대
    • 클래스는 설계도, 생산틀
    • 객체는 실체이다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

//일반적인 사원 정보

class Employee {
  empName: string;
  age: number;
  empJob: string;

  printEmp(): void {
    console.log(
      `${this.empName} 의 나이는 ${this.age} 이고, 직업은 ${this.empJob}이다.`
    );
  }
}

const emp1 = new Employee();
emp1.empName = "yoon";
emp1.empJob = "dev";
emp1.age = 27;
emp1.printEmp();

생성자 : Constructor

  • 다른 언어에서는 class에서 생성자를 사용하기위 자기 자신의 이름으로 function을 지정한다. (파이썬은 ‘init’)
  • JS, TS에서는 class 내의 constructor 를 사용하여 생성자를 사용한다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

//일반적인 사원 정보

class Employee {
// this 지정전 멤버 변수로의 선언이 필요하다.
  empName: string;
  age: number;
  empJob: string;

  constructor(empName: string, age: number, empJob: string) {
    this.empName = empName;
    this.age = age;
    this.empJob = empJob;
  }

  printEmp(): void {
    console.log(
      `${this.empName} 의 나이는 ${this.age} 이고, 직업은 ${this.empJob}이다.`
    );
  }
}

const emp1 = new Employee("yoon", 27, "dev");

emp1.printEmp();
  • JS와 다르게, constructor내에서 this로 지칭하는 키워드로 사용하기 위해 우선 멤버 변수로 타입정도는 선언해야 사용가능하다.

접근 지정자

  • public, private, protected 등의 키워드를 사용하여, 데이터 접근에 데한 제약을 걸기 위해 사용한다.
  • public
    • 어디에서나 접근할 수 있도록 허용하는 키워드
    • 생략 가능한 default 값
  • protected
    • 선언한 해당 클래스 또는 서브 클래스의 인스턴스에서만 접근 가능하도록 제한한다.
  • private
    • 해당 클래스의 인스턴스 에서만 접근 가능하게 제한한다.
    • 멤버 변수 앞에 underscore (_ ) 를 추가 작명하여, private 멤버 임을 명시적으로 지정한다.

getter와 setter

  • 접근을 제한한 class의 멤버에 대하여, get을 이용해 호출, 또는 set 키워드를 통한 값 할당 수행이 가능하다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

class Employee {
  private _empName: string;
  private _age: number;
  private _empJob: string;

  constructor(empName: string, age?: number, empJob?: string) {
    this._empName = empName;
    this._age = age;
    this._empJob = empJob;
  }

  printEmp(): void {
    console.log(
      `${this._empName} 의 나이는 ${this._age} 이고, 직업은 ${this._empJob}이다.`
    );
  }

  get empName() {
    return this._empName;
  }
  set empName(name: string) {
    this._empName = name;
  }
}

const emp1 = new Employee("yoon", 27, "dev");

// getter empName 호출
const empName = emp1.empName;
console.log(empName); // "yoon"

// setter empName을 통한 할당
emp1.empName = "setter Man~";
console.log(emp1.empName); // "setter Man~"

암…묵 적인 클래스 멤버 프로퍼티 선언

  • 이전과 다르게, constructor의 인수에 접근지정자를 사용하여 인수를 선언하면, 해당 인수가 클래스의 멤버 프로퍼티 값으로 선언된다.

    1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

      class Employee {
    constructor(
      private _empName: string,
      private _age: number,
      private _empJob: string
    ) {}
    
    printEmp(): void {
      console.log(
        `${this._empName} 의 나이는 ${this._age} 이고, 직업은 ${this._empJob}이다.`
      );
    }
    
    get empName() {
      return this._empName;
    }
    set empName(name: string) {
      this._empName = name;
    }
  }
TIL, 프로그래머스
TIL programmers TypeScript OOP
이 기사는 저작권자의 CC BY 4.0 라이센스를 따릅니다.