Typescript 도입 배경

지리·2025년 9월 7일

자바스크립트 개발 배경

Javascript는 원래 웹 페이지에 동적인 효과를 주기위해 만들어진 스크립트 언어이다. 웹페이지의 부드러운 상호작용을 위해 HTML과 CSS와 함께 사용되었다.

시간이 지나면서 Javascript의 성능을 높이고자 하는 니즈가 있었고 구글에서 V8엔진을 만들게 된다. 이후 V8엔진을 기반으로 Node.js라는 플랫폼이 나오면서 백엔드로 Javascript를 통해 개발할 수 있게 되었다.

타입스크립트의 등장

이런 Javascript에는 치명적인 오류가 있었는데, javascript는 동적 타입언어로 런타임에 타입이 결정된다는 것이다. 이는 개발당시의 오류를 알아차리지 못한채로 런타임에 오류가 발생되어 서버가 다운되는등의 문제를 발생할수 있게 만든다. 이를 해결하기 위해 Typescript가 탄생하게 되었다.

Typescript는 Microsoft에서 개발한 오픈소스 프로그래밍 언어이다.
자바스크립트의 단점(동적 타입언어, 약한 타입체크등)을 해결할수 있게 해준다.

타입스크립트 사용의 이점

함수의 추상화를 쉽게 해준다.

함수의 추상화는 복잡한 코드를 더 작고 관리 가능한 단위인 함수로 나누어, 상세한 구현 내용을 감추고 입력과 출력의 관계만 알도록 만드는 과정이다. 이를 통해 코드를 모듈화하고 재사용 가능하게 만들며, 전체 시스템을 더 쉽게 이해하고 관리할 수 있게 된다.

function fetchUser1(){
	return {name:'NAME', age:100}
}
// -> 위의 함수는 return 값이 한눈에 보이기 때문에 어떤값이 return 되는지 바로 알수 있다

function fetchUser2(){
  const person = {
    ...
  }
    
  const developer = {
    ...
  }
  
  const result = {...person, ...developer}
  returlt.nickname = 'NICKNAME'
  ...             
  
  return result
}
// -> 하지만 위의 함수의 경우엔 어떤값이 return되는지 알기가 힘들다

const user:{name:string; nickname:string; age:number} = fetchUser2()
// -> 타입스크립트를 사용할 경우 fetchUser2내부의 로직이 어떻게 되어있든지 user값에 할당되는 fetchUser의 return 값이 어떤형식일지 알수가 있다.

컴파일시에 변수타입을 체크하여 코드오류를 미연에 방지할 수 있다.

	function sum1(a,b){
      return a+b
    }

	sum(10, 20) //30
	// -> 인수에 둘다 숫자가 들어가면 문제없다

	sum(10, '20') // 1020
	// 하지만 인수에 문자가 들어가도 Javascript는 오류를 발생시키지 않으면 이는 예기치못한 결과를 가져오게 만든다.

	function sum2(a:number, b:number):number{
      return a+b
    }
	sum2(10, '20') //TypeError
	// Typescript로 type을 명시한다면 오류를 방지할 수 있다.

OOP시 클래스 프로퍼티에 public, private등의 접근 제어자를 통해 클래스의 캡슐화를 보장 할 수 있다.

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

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

const person = new Person('NAME', 30);
person.age = 25; // 외부에서 클래스 내부값을 마음대로 바꿀수 있음
person.growOlder();
console.log(spartan.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('NAME', 30);
person.age = 25; // Error: Property 'age' is private and only accessible within class 'Person'.
person.growOlder();
console.log(person.age); // Error: Property 'age' is private and only accessible within class 'Person'.

// private 접근자를 붙였기 때문에 수정은 물론 접근도 제한된다.
// 접근을 하고싶다면 getter 함수를 따로 작성하며 된다.