2023 - 07 - 18 타입스크립트 TypeScript의 장점, 자바스크립트의 약점 보완, 객체지향 프로그래밍 OOP

오늘 배운것 : 타입스크립트

 

 

1.  자바스크립트의 약점은, 자바스크립트는 "동적 타입언어"라는 것이다.

프론트엔드의 에러는 우리가 보는 뷰의 일관성을 해칠 수는 있으나, 전반적인 동작에 피해를끼치지는 않는다. 하지만, 예외처리가 제대로 되지 않은 백엔드의 단순한 에러 하나로 인해 서버가 다운될 수 있다. 

 

(약점1) 자바스크립트의 변수는 실행시간(런타임)에 결정되기 떄문에, 개발자가 실수를 한다고 하더라도 실행하는 순간 알 수 있기 때문에 오류를 찾기 까다롭다.

(약점2) 타입 체크가 let, const 같은 변수/상수를 구분하는 정도의 키워드만 지원이 되기때문에, 

let a = 1; 

a = “Hello”;

이런 식으로 a가 숫자인줄 알았는데 문자열로 바뀌어버릴수도 있다.

(약점3) 너무 물렁물렁한 객체

const obj = { latitude: 11.5, longitude: 47.1 };
const result = obj.latitude * obj.longitute; // 보통은 이런 실수는 컴파일러가 잡아줘야 되는데
console.log(result) // NaN이라는 엉뚱한 값 출현!

longitude를 longitute라고 오타를 쓰면 객체의 성질이 수시로 변화시킬수도 있다.

 

---

TypeScript 타입스크립트는 자바스크립트의 약점을 보완했다.

 

1. JavaScript: 실행시간에 결정되는 변수 타입 -> TypeScript: 컴파일 시간에 변수의 타입을 체크한다.

즉 컴파일러가, 실행시간 전에 문법적인 오류를 잡아준다.

(자바스크립트)

덧셈 함수를 만들었으므로 숫자 결과를 받아야 하는데, 엉뚱하게도 문자열이 결과로 나온다. 이러한 예상치 못한 코드가 쌓이면, 실제 서비스를 운영할 때 디버깅이 매우 힘들다.

 

(타입스크립트)

 

2. 자바스크립트의 약한 타입체크 -> 타입스크립트: VSCode에 코드를 입력하는 순간 에러메시지가 발생한다.

 

타입스크립트에서는 VSCode에서 위와 같이 코드를 입력하는 순간 에러메시지를 캐치해준다.

실제로 실행을 시키면 컴파일 시간에 변수의 타입을 체크하기 때문에 실행이 되지 못하고 컴파일 에러를 발생시켜서 쓸데없는 에러 걱정을 하지 않아도 된다.

 

3. JavaScript: 물렁물렁한 객체 -> TypeScript: VSCode에 코드를 입력하는 순간 에러메시지가 발생한다.

 

정의되지 않은 프로퍼티를 연산하여 NaN이 되는 현상을 미연에 방지할 수 있다.

---

객체 지향 프로그래밍 OOP 를 할 때, 타입스크립트가 자바스크립트에 비해 가지는 큰 메리트. 

 

ex) JavaScript 객체 지향 프로그래밍 예시

class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }

  growOlder() {
    this.age += 1;
  }
}

const spartan = new Person('Spartan', 30);
spartan.age = 25; // 외부에서 age 속성을 마음대로 조작할 수 있어요! 뜻밖에 회춘?
spartan.growOlder();
console.log(spartan.age); // 결국 1살을 더 먹었지만 르탄이는 26세

name을 Spartan으로 넣고, 초깃값 30에 growOlder로 1살씩 증가하게 했다.

하지만, spartan.age = 25로 외부에서 age속성을 마음대로 조작함으로써 마음대로 클래스 내의 속성의 값을 변경하는데, 이는 객체지향 프로그래밍 언어 (C++, Java 등)에서의 다양한 접근 제어자를 통해 클래스를 구성하는 프로퍼티의 캡슐화를 보장하지 않는다. 이렇게 외부에서 마음대로 속성을 변경하면 class를 설계하고 만든 사람의 의도대로 동작되지 않으며, 시스템의 근간이 헤쳐진다.

 

ex) TypeScript 예시

class Person {
  private name: string;
  private age: number; // age가 private인 것을 주목하세요!

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

  public growOlder(): void {
    this.age += 1;
  }
}

const spartan = new Person('Spartan', 30);
spartan.age = 25; // Error: Property 'age' is private and only accessible within class 'Person'.
spartan.growOlder();
console.log(spartan.age); // Error: Property 'age' is private and only accessible within class 'Person'.

spartan.age = 25라는, 외부에서 age속성을 마음대로 조작하지 못하게 한다. (에러처리나게 한다.)

그럼에도 불구하고 나이를 조회하고 싶게 하고 싶다면 getter함수를 따로 작성하면 된다.

 

 

외부 모듈의 타입 정보 제공.

TypeScript는 d.ts라는 확장자를 가진 선언 파일을 통해 외부 모듈 타입 정보를 제공할 수 있다. 이를 통해 나중에 @types라는 패키지를 배울 때 알 수 있다.