📖 타입스크립트 개요

🔎 타입스크립트란?

TypeScript는 Microsoft에서 개발한 JavaScript를 확장해 만든 언어입니다.

• 정적 타입 검사를 지원하여 코드 실행 전 오류를 미리 발견할 수 있습니다.
• 최신 ECMAScript 표준(ES6+) 기능도 지원하며 기존 JavaScript 코드와 완전 호환됩니다.
• 타입스크립트 코드는 반드시 컴파일러가 JavaScript로 변환(트랜스파일)되어 실행됩니다.

TypeScript

= JavaScript + Type 문법

JavaScript Superset

 

 

https://ts.winterlood.com/7250edd7-a3fd-4662-b756-f11f927c73f2

 

빠른 사용을 위해 설계되었으며 어플리케이션들을 작성하기 위해 JavaScript를 사용하지만 모든 언어는 이상한 점과 놀랄만한 점이 있으며 JavaScript 도 역시 많은 문제가 있습니다.

 

🤔 왜 타입스크립트를 사용?

 

⚠️ 자바스크립트의 문제

if ('' == 0) {
  console.log('true');
}
let x = '';
if (1 < x < 3) {
  console.log('x');
}

console.log(5 - '3');

 

💡 자바스크립트는 동적 타이핑(Dynamic Typing), 타입 강제 변환(Type Coercion)을 제공해주는 언어이기 때문에 가능!

• 이런 점들은 자유도가 높고 유연성을 제공해주지만 프로젝트가 커질수록 단점이 됩니다.
• 프로그램의 안정성을 떨어뜨리는 단점

 

타입스크립트를 사용하게 되면 이런 것들을 에러로 잡아줍니다.

• 타입스크립트는 타입을 엄격히 검사

 

💬 에러 메시지

자바스크립트는 에러가 발생했을 때 에러메시지를 추상적으로 알려주는데 타입스크립트는 타입을 엄격히 검사하기 때문에 정확하게 에러메시지를 나타내줍니다.

 

 

💻 동작 원리

1️⃣ 코드 작성: .ts 또는 .tsx 파일로 코드를 작성

 

2️⃣ 컴파일러(tsc) 실행

• 타입스크립트 컴파일러는 코드를 파싱하여 AST(추상 구문 트리) 생성 후 정적 타입 검사 수행
• 타입 오류 경고 발생

 

3️⃣ 트랜스파일링: 타입 정보를 제거하고 표준 JavaScript 코드로 변환

 

4️⃣ 실행: 변환된 JavaScript 코드는 브라우저나 Node.js 등 자바스크립트 런타임 환경에서 실행

 

⭐ 타입스크립트의 타입 검증 방법

https://ts.winterlood.com/d67c7b28-c191-46ee-9bdc-2ae8643c2028

 

타입스크립트는 실제 코드 실행없이 코드를 해석해 타입 오류를 찾아내는 정적 분석기능을 통해 타입을 검증합니다.

 

1️⃣ 파싱

타입스크립트는 코드 파일을 먼저 읽고 AST(Abstract Syntax Tree, 추상 구문 트리) 구조로 변환합니다.

 

이 후 AST를 기반으로 타입 검사를 수행합니다.

타입 오류가 발견되면 컴파일 에러를 발생시키고 타입 오류가 없다면 타입 정보를 제거하고 AST를 자바스크립트 코드로 변환합니다.

 

📖 트랜스파일링

• 소스코드를 비슷한 추상화 수준의 다른 언어로 변환하는 것

 

2️⃣ 타입 추론

타입스크립트는 명시된 타입이 없더라도 초기 값이나 코드 문맥을 보고 자동으로 타입을 추론합니다.

let x = 3;

 

이처럼 x에 대한 타입을 따로 지정하지 않더라도 x는 number로 간주됩니다.

 

이렇게 변수를 선언하거나 초기화 할 때 타입이 추론됩니다.

• 변수, 속성, 인자의 기본 값, 함수의 반환 값 등을 설정할 때 타입 추론 발생

 

👍 가장 일반적인 타입 (Best Common Type)

 

보통 몇 개의 표현식을 바탕으로 타입을 추론합니다.

표현식을 이용하여 가장 근접한 타입을 추론하게 되는데 이런 타입을 Best Common Type이라고 합니다.

 

const arr = [0, 1, null]; // (number | null)[]

 

위 arr의 타입을 추론하기 위해서 배열의 각 아이템을 살펴본 후 배열의 각 아이템의 타입은 크게 number와 null로 구분되는 것을 통해 Best Common Type 알고리즘으로 가장 잘 호환되는 타입을 선정합니다.

 

✅ 문맥상 타이핑

 

타입스크립트에서 타입을 추론하는 다른 방식은 문맥상으로 타입을 결정하는 것입니다.

• 코드의 위치(문맥)를 기준으로 일어납니다.

window.onmousedown = function(mouseEvent) {
  console.log(mouseEvent.button);   //<- OK
  console.log(mouseEvent.kangaroo); //<- Error!
};

 

타입스크립트 타입 검사기는 window.onmousedown함수의 타입을 추론하기 위해

할당문의 함수 표현식의 타입을 추론하여 매개변수의 타입인 mouseEvent 를 추론해낼 수 있는데 mouseEvent 매개변수에 button 속성은 포함되어 있지만 kangaroo 속성은 포함되지 않는다고 추론합니다.

 

 

3️⃣ 타입 검사

타입스크립트는 타입을 검사할 때 값이 실제로 어떤 구조를 가지고 있는지를 기준으로 판단합니다.

• 이 값이 어떤 속성과 메서드를 가지고 있는가? 에 초점을 맞춥니다.

🐤 Duck Typing

"오리처럼 걷고 오리처럼 소리 내면 오리다"

객체의 속성 / 메서드 만으로 객체의 타입을 결정하는 방식

 

Duck Typing 예시 (동적 타이핑 언어 - JavaScript)

function makeSound(animal) {
  if (animal.quack) {
    animal.quack(); // quack() 메서드가 있으면 '오리'로 간주
  }
}

const duck = {
  name: "Duck",
  quack: () => console.log("꽥꽥!"),
};

const person = {
  name: "John",
  quack: () => console.log("사람도 꽥꽥!"),
};

makeSound(duck);   // 꽥꽥!
makeSound(person); // 사람도 꽥꽥!

 

duck과 person은 전혀 다른 객체지만

• 둘 다 quack() 메서드를 가지고 있기 때문에 makeSound 함수 입장에서는 둘 다 "오리처럼 행동한다"고 판단

 

🧱 Structural Subtyping

 

Duck Typing을 정적 타입 시스템에서 구현한 개념입니다.

 

두 타입이 같은 구조(속성과 메서드의 타입 포함)를 가진다면

그 두 타입은 서로 호환 가능하다고 판단

 

ex1) 구조가 같으면 타입 호환 가능

interface User {
  name: string;
  age: number;
}

interface Person {
  name: string;
  age: number;
}

const user: User = { name: "Beomsic", age: 20 };
const person: Person = user; // 구조가 같으므로 호환 가능

 

두 타입의 이름은 다르지만 name과 age라는 같은 속성을 가지고 있으므로 Structural Subtyping에 의해 서로 대체 가능합니다.

 

 

ex2) 일부 속성만 있어도 동작 가능

interface User {
  name: string;
  age: number;
}

const obj = { name: "Beomsic", age: 30, location: "Seoul" };

const user: User = obj; // 가능

• obj에는 location이 추가로 있어도 필요한 속성(name, age)만 있으면 타입 호환이 가능

 

💡 타입스크립트는 Structural Subtyping 기반으로 타입 검사 수행

 

이를 통해 코드 실행 전에 아래와 같은 에러를 확인할 수 있습니다.

• 잘못된 메서드 호출
• 잘못된 타입 할당
• null 또는 undefined 오류

 

📚 Ref.

https://www.typescriptlang.org/ko/docs/handbook/intro.html

https://www.typescriptlang.org/ko/docs/handbook/2/basic-types.html

https://www.typescriptlang.org/docs/handbook/type-inference.html

https://dev.to/bilelsalemdev/abstract-syntax-tree-in-typescript-25ap

https://ts.winterlood.com/d67c7b28-c191-46ee-9bdc-2ae8643c2028