TYPEscript란? 본캠프 01/20

타입스크립트는 자바스크립트가 보완된 버전이라고 생각하시면 됩니다. 

자바스크립트에 무슨 문제가 있길래 보완해야하는 걸까요?

 

JavaScript는 개발자가 실수를 저지른 것을 프로그램을 실행할 때 알려줘요!

이게 무슨 뜻이냐 하면....

 

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 출력

보통 이러한 실수는 컴파일러가 잡아줘야 하지만, JavaScript에서는 그렇지 않습니다. 결과적으로 NaN 같은 예상치 못한 값이 나올 수 있습니다.

 

객체라는 개념은 명확한 성질을 가져야 합니다. 예를 들어, 붕어빵 틀에서 붕어빵만 나오는 것이 정상일 것입니다. 그런데 JavaScript에서는 프로그래머가 의도적으로 객체의 속성을 수시로 변경할 수 있습니다. 이런 특성은 강력하면서도 위험합니다. 만약 조심성 없는 프로그래머가 객체를 잘못 다루게 된다면, 예상치 못한 결과를 초래할 수 있습니다.

 

구세주 TypeScript의 등장!

TypeScript의 탄생 배경

1) TypeScript란?

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

 TypeScript는 왜 등장했을까요?

TypeScript는 JavaScript의 단점을 보완하기 위해 탄생했습니다. 본격적으로 TypeScript가 어떤 문제를 해결하는지 알아보기 전에, 먼저 JavaScript의 단점을 간략히 정리해 보겠습니다.

 

2) JavaScript의 단점 요약

 많은 분들이 한 번쯤 “undefined” 에러를 경험하며 고생했던 기억이 있을 겁니다.

• 실행 시간에 결정되는 변수 타입
• 약한 타입 체크
• 지나치게 유연한 객체 구조

3) TypeScript가 들어오고 이렇게 바뀌었습니다!

 실행 시간에 결정되는 변수 타입 → 컴파일 시간에 변수의 타입을 체크

• JavaScript 코드의 문제점:

function add(a, b) {
    return a + b;
}
console.log(add(5, "10")); // 결과: "510"

 

• 우리는 숫자의 합계를 기대했지만, 문자열이 결과로 나옵니다. 이러한 코드가 많아지면 디버깅이 매우 어려워질 수 있습니다.
• TypeScript 코드 도입 후 변화:[컴파일 시간에 오류 캐치]
  실행 전, 컴파일 단계에서 변수 타입을 확인하여 잘못된 코드가 실행되지 않도록 막아줍니다.
• [VS Code에서 오류 캐치]
  코드를 입력하는 순간 에러 메시지가 표시되어 실수를 사전에 방지할 수 있습니다.
•  

약한 타입 체크 → 코드를 입력하는 순간 에러 메시지 발생

TypeScript는 변수와 함수의 타입을 명확히 지정하기 때문에, 서버가 실행되기 전에 오류를 파악할 수 있습니다.

---

지나치게 유연한 객체 → 코드를 입력하는 순간 에러 메시지 발생

정의되지 않은 프로퍼티를 연산하는 실수를 방지하고, 불필요한 디버깅을 줄여줍니다. 예를 들어, 붕어빵 틀에서 붕어빵만 나오도록 보장할 수 있습니다.

---

4) TypeScript의 매력은 이게 끝이 아닙니다!

객체 지향 프로그래밍(OOP)에서의 장점

• JavaScript 객체 지향 프로그래밍 예시:

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

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

const person = new Person("John", 30);
person.age = 25; // 외부에서 속성을 마음대로 변경 가능
person.growOlder();
console.log(person.age); // 결과: 26

 

 

• 객체 속성이 외부에서 무분별하게 변경될 수 있어, 설계 의도가 지켜지지 않을 위험이 있습니다.
• TypeScript 객체 지향 프로그래밍 예시:

class Person {
    private name: string;
    private age: number;

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

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

const person = new Person("John", 30);
person.age = 25; // 오류 발생: 'age'는 private 속성입니다.

 

• TypeScript는 private와 같은 접근 제어자를 통해 속성의 직접적인 접근을 제한하고, 설계 의도를 지킬 수 있도록 돕습니다.

---

외부 모듈의 타입 정보 제공

TypeScript는 d.ts 확장자를 가진 선언 파일을 통해 외부 모듈의 타입 정보를 제공합니다. 이를 통해 JavaScript 라이브러리도 TypeScript에서 안전하게 사용할 수 있습니다.

 

다음에 직접 사용한 느낌을 작성하도록 하겠습니다!