2. TypeScript

Keyword

1. REPL

2. TypeScript

   • 2-1 Interface vs Type

   • 2-2 타입 추론

   • 2-3 Union Type vs Intersection Type

   • 2-4 Optional Parameter

1. REPL

Read-Eval-Print Loop의 약자 인터프리터 언어에서 사용되는 대화형 개발 도구 또는 환경으로 터미널에 코드를 입력하면 즉시 실행 결과를 받을 수 있다.

---

2. TypeScript

TypeScript는 동적 타입 언어인 JavaScript에 정작 타입을 부여한 언어이다. 브라우저는 JavaScript 파일만 실행 가능하므로 변환 과정인 컴파일이 필요하다.

왜 타입스크립트를 사용해야할까?

1. 코드 레벨에서 에러의 사전 예방

2. 편집기의 코드 가이드 및 자동 완성 기능 (개발 생산성 향상)

   • 특정 변수에 타입이 지정되어 있을경우 해당 타입의 사용가능한 API를 미리 보기로 가이드 해준다.

진짜 2번이 진또베기

VSC 툴의 내부가 TS로 작성되어 있어 TS개발에 최적화되어 있다고 한다.

2-1 Interface vs Type

TypeScript에서 타입을 정의하는 방법들로 Type(Type alias)과 Interface의 결정적 차이는 타입의 확장(extends) 가능 여부에 있다.

1. Interface

• 객체 또는 클래스 같은 구조화된 타입을 정의할 때 유용하다.

2. Type alias

• 유연한 타입 정의 제공 (Union, intersection, tuple 등)

/* interface는 이러한 방법으로 직접 타입 연산자 사용이 불가능 */
type Color = 'white' | 'blue' | 'red';

/* 객체, 클래스 구조 타입 정의에 유용 */
interface Info {
  id: number;
  name: string;
}

2-2 타입추론 (Type Inference)

변수등에 타입을 따로 지정하지 않아도 타입스크립트가 코드를 분석해 타입을 추론하는 과정을 의미

const temp = 10;
// 변수 temp 타입은 number로 추론됨

Best Common Type

여러 표현식의 타입을 비교하여 가장 근접한 타입을 선택하는 규칙

const foo = [1, null]

• 타입을 명시적으로 지정하지 않았지만 Best Common Type 규칙을 통해 (number | null)[] 타입으로 추론된다.

2-3 Union Type vs Intersection Type

연산자를 이용해 타입을 정의하는 방법

1. Union Type

OR 연산자(||) 처럼 'A이거나 B이다'를 정의하는 타입

type Types = string | number;
let foo: Types;
foo = "Hello"; // 문자열 할당 가능
foo = 123; // 숫자 할당 가능

2. Intersection Type

합집합처럼 여러개의 타입을 모두 만족하도록 하나로 합칠 수 있다.

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

interface Job {
  name: string;
  job: string;
}

type Manager = Person & Job;

// 결과
{
  name: string;
  age: number;
  job: string
}

2-4 Optional Parameter

함수 호출 시 매개변수, 인터페이스를 사용할 때 정의 된 속성을 생략 할 수 있다. 또한 정의되어 있지 않은 속성에 대해 인지할 수 있다.

function foo(x: number, y?: number) {
  console.log(`x: ${x}, y: ${y}`);
}

foo(10) // x: 10, y: undefined (매개변수 y 생략가능)

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

const bar = {
  name: 'dongdong',
  age: 30,
};

console.log(bar.oo); // 오류

추가 키워드 정리

• d.ts(declaration)

  타입스크립트 코드의 타입 추론을 돕는 TS 선언 파일

• 유틸리티 타입

  Partial, Pick, Omit 등 기존에 정의된 타입을 가지고 재정의 할때 유용

• 제너릭

  타입을 마치 함수의 파라미터처럼 사용할 수 있다.