타입 스크립트(TypeScript) 23.12.12

 

타입 스크립트... 아직 자바 스크립트도 잘 못하지만 어느새 타입 스크립트를 입문하게되었다

일단 뭔지나 알아보자

 

---

1.TypeScript 란 무었인가

 

TypeScript는 Microsoft에서 개발한 오픈 소스 프로그래밍 언어입니다

(TypeScript는 1) JavaScript의 모든 기능을 포함하고 2) 추가적인 기능을 제공합니다!)

 

1-1TypeScript는 왜 등장했을까?

자바 스크립트의 약점 을 보완하기위해 등장한게 타입스크립트 라고 합니다.

자바스크립트는 원래 HTML에 동적 상호작용을 위해 사용되는 언어였지만
구글의 V8 엔진이 나온이후 Node.js 라는 플랫폼이 등장 이때부터 JS만으로도 백엔드 작성이 가능해졌습니다

                                  하지만 우리는 JavaScript는 동적 타입 언어였다는 것을 잊고있었는데....

그럼 자바 스크립트의 약점은? 짧게 요약하자면 자바스크립트의 유연함이 오히려 독이된경우입니다

 

02. JavaScript의 약점 그리고 TypeScript 의 해결방식

 

*실행 시간에 결정되는 변수 타입

• JavaScript는 변수의 타입이 실행 시간에 결정되어요!
• 이에 따라 개발자의 실수로 인한 오류가 발생하기 쉽고 찾기도 까다로워요!
• 예를 들면, 변수에 잘못된 타입의 값이 할당되어 발생한 오류를 찾기 위해서는 실행 시간에 변수의 값과 타입을 모두 확인해야 하는 번거로움이 있어요!

우리는 덧셈 함수를 만들었으니 숫자 결과를 받아야 하는데 엉뚱하게도 문자열이 결과로 나와요. 이러한 예상치 않은 코드들이 쌓이면 실제 서비스를 운영할 때 디버깅을 매우 힘들게 할 수 있어요.

 

*약한 타입 체크

• JavaScript는 let, const와 같이 변수/상수를 구분하는 정도의 키워드만 지원이 되어요.
• 예를 들면, let a = 1; a = “Hello”;가 얼마든지 가능한 것이고 이렇게 되면 약간의 실수로 예상하지 않은 동작이 발생할 수 있어요! → 난 a가 숫자인 줄 알았는데 갑자기 문자열이 되어버렸네?

서버가 실행되기 전에는 막연히 두려웠던 부분에 대해 걱정하지 않아도 되어요!

 

*너무나도 물렁물렁한 객체

• 잘못된 코드 예시

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

 

• OOP 시간에 배울 예정이지만 객체라는 친구는 캐릭터가 확실해야 해요!
• 예컨대, 붕어빵을 찍는 틀에서 붕어빵만 나오는 것이 정상이겠죠?
• 그런데, 붕어빵을 찍는 틀에서 슈크림 빵이나 소보루빵이 나오면 어떨까요?
• JavaScript에서는 프로그래머가 마음만 먹으면 객체의 성질을 수시로 변화시킬 수 있어요.
• 만약, 조심성 없는 프로그래머가 해당 객체를 잘못 주무르기라도 하면…😱

 

---

이렇게 자바스크립트의 약점을 보완할수도 있고 추가적인 기능들도 많다

 

객체 지향 프로그래밍(OOP)을 할 때 JavaScript에 비해 가지는 큰 메리트

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세

 

• 객체 지향 프로그래밍 언어(C++, Java, C#, …)에서는 다양한 접근 제어자를 통해서 클래스를 구성하는 프로퍼티의 캡슐화를 보장하고 함수의 호출 범위를 조정할 수 있어요!
• 그런데, 지금 위의 예제에서는 아무나 속성에 직접 접근을 할 수 있고 마음대로 속성의 값을 변경할 수 있어요!
• 이렇게되면 코드설계자의 의도에 따라 사용이 어려워지게됩니다 원래대로라면 르탄이 나이가 30살부터 시작해야 하지만 갑자기 25부터 1살씩 먹어버리니까요

 

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'.

 

• TypeScript로 우리 르탄이를 회춘하려고 시도했는데 에러가 나요!
• spartan.age = 25; 코드에서 에러가 나고 있는 것 보이시죠?
• 사실은 이게 맞아요! Person이라는 클래스를 만든 사람은 그 어떤 객체도 나이가 마음대로 조작되길 원하지 않아요!
• 뿐만 아니라, 직접적으로 르탄이의 나이를 바로 파악할 수도 없어요.
• 우리는 처음 보는 사람이 마음대로 우리 나이를 조회할 수 있다면 너무 불쾌하잖아요!
• 하지만, 그럼에도 불구하고 나이를 조회하게 하고 싶다면 getter 함수를 따로 작성하시면 되어요!

 

외부 모듈의 타입 정보 제공

• TypeScript는 d.ts라는 확장자를 가진 선언 파일을 통해서 외부 모듈 타입 정보를 제공할 수 있어요!
• 이렇게 선언 파일을 설치하면 JavaScript 라이브러리도 TypeScript에서 안전하게 사용이 가능해요!

 

그 외에 타입 스크립트의 장점!!

1) 취업 시장에서 필수 기술 스택 보유하기!

2) 더 높아지는 생산성 & 안정성 경험하기!

• 처음에는 익숙하지 않아서 JavaScript를 쓸 때보다 시간이 더 걸릴 수 있어요.
• 조금만 익숙해지면 TypeScript로 작성하는 것이 더 편해집니다!

3) 자연스러운 고급 프로그래밍 개념 학습하기!

- 정적 타입 시스템, 객체 지향 프로그래밍, 디자인 패턴 등 다양한 고급 프로그래밍 개념들을 학습할 수 있어요!

4) 줄어드는 테스트 코드

• JavaScript에 비해 언어에서 보장되는 안정성을 바탕으로 여러분들의 테스트 코드는 줄어들 수 밖에 없어요.
• TypeScript는 JavaScript에 비해 테스트 코드보다 비지니스 로직 작성에 집중할 수 있게 해줘요!

---

일단 타입스크립트의 탄생 배경과 장점 그리고 왜 배워야 하는지에대해서도 알아보았다

설치 방법도 간단했는데

1.우선은 Node.js가 안깔려 있다면 Node.js를 깔아야 합니다

2,명령 프롬프트 실행

1. 명령 프롬프트는 Windows에서 시작버튼 누른 후 “cmd”라고 검색하면 바로 프로그램이 추천됩니다

3,명령 프롬프트에서 `npm install typescript -g`를 실행하여 TypeScript를 글로벌하게 설치해줍니다

4,명령어 실행이 끝나면 명령 프롬프트에 tsc 명령어를 실행해주세요! 명령어가 제대로 실행이 되면 TypeScript가 설치 완료되었습니다.