JavaScript 는 프로그래밍 커뮤니티에 도입된 지 20년이 지난 지금 가장 널리 퍼진 cross-platform 언어 중 하나이다.

웹 페이지에 사소한 상호작용을 추가하기 위한 작은 스크립팅 언어로 시작하여 규모와 상관없이 프론트엔드와 백엔드 에플리케이션에 선택 가능한 언어로 성장하였다.

JavaScript(JS) 로 작성된 프로그램의 크기 범위 복잡성은 기하급수적으로 커졌지만 다른 코드 단위 간의 관계를 표현하는 JS 언어의 능력은 그렇지 못하다.

TypeScript(TS) 의 목표는 JS 프로그램의 정적 타입 감시자 이다. 코드가 실행되기 전에 실행하고 프로그램 타입이 정확한지 확인하는 도구 (타입 검사) 이다.

두 영역으로 나뉜다.

• 핸드북

  TS 핸드북은 프로그래머들에게 TS 를 설명하는 종합적인 문서이다. 각 장 또는 페이지가 주어진 개념에 대한 자세한 설명을 제공할 것이다.

  실습을 완료한 독자는 다음을 수행할 수 있어야 한다.

  • 일반적으로 사용하는 TS 구문 및 패턴을 읽고 이해하기
  • 중요한 컴파일러 옵션의 효과 설명하기
  • 대부분의 경우에서 타입 시스템 동작을 올바르게 예측하기
  • 간단한 함수, 객체 또는 클래스에 대한 .d.ts 선언 작성하기

핸드북의 주요 내용은 명확성과 간결성을 위해 모든 엣지 케이스 또는 세부 사항을 탐구하지 않는다.

• 핸드북 래퍼런스

핸드북 래퍼런스는 TS 특정 부분이 어떻게 작동하는지 풍부한 이해를 제공하기 위해 작성되었다. 위에서 아래로 읽을 수 있지만 연속적으로 설명하는 것이 아니라 각 섹션은 단위 개념에 대한 깊은 설명 제공을 목표로 한다.

핸드북은 몇 시간 안에 편하게 읽을 수 있는 간결한 문서로 제작되었다. 간결함을 유지하기 위해 특정 주제를 다루지 않는다.

JS 의 함수 클래스 클로저와 같은 핵심 개념을 소개하지 않는다.

핸드북은 언어 명세를 대체하기 위함이 아니다. 대략적이고 이해하기 쉬운 설명을 위해 예지 케이스나 동작의 형식적인 설명을 생략할 수 있다.

TS가 다른 도구와 어떻게 상호작용하는지 다루지 않는다.

JS는 처음에 브라우저를 위한 스크립트 언어로 만들어졌다. JS 가 처음 나왔을 때 수십 줄 이상의 코들르 작성하는 것은 다소 이례적인 일이었기 때문에 웹 페이지 속 짧은 코드들을 위해 사용할 것이라 여겨졌다.

웹 브라우저 개발자들은 위와 같은 늘어나는 JS 사용량에 대하여 실행 엔진을 최적화 시키고 최적화 된 것을 이용해 할 수 있는 일을 확장하여 웹 개발자가 더 많이 JS를 사용 가능하도록 하였다.

현대 웹사이트에서는 수십만 줄의 코드로 구성된 어플리케이션을 자주 실행한다. 이는 정적 페이지의 간단한 네트워크로 시작해서 모든 종류의 만족스러울만한 어플리케이션을 이한 플랫폼으로 성장한 웹의 길고 점진적인 성장이다.

JS 만을 이용하여 전체 스택을 프로그래밍 하고있다.

JS 의 코드가 많아지면서 많은 문제가 발생하였다.

• JS 동일 연산자는 (==) 인수를 강제로 변환하여 예기치 않은 동작을 유발한다.

if ("" == 0) {
    // true
}
if (1 < x < 3) {
    // x 값에 상관없이 true
}

• JS는 존재하지 않는 프로퍼티 접근을 허용한다.

const obj = { width: 10, height: 15 };

// 오타
const area = obj.width * obj.heigth;

대부분의 프로그래밍 언어는 이런 종류의 오류들이 발생하면 오류를 표출하고 코드가 실행되기 전인 컴파일 중에 오류를 표출해준다. 작은 프로그램을 작성할 때에는 이런 이상한 점들이 화를 돋구지만 관리가 가능하다.

그러나 수많은 줄의 코드를 작성할 때는 지속적으로 문제가 된다.

앞서 몇 언어는 버그가 많은 프로그램을 아예 실행시키지 않는다고 말했다. 프로그램을 실행시키지 않으면서 오류를 검출하는 것을 정적 검사 라고 한다.

어떤 것이 오류인지와 어떤 것이 연산 되는 값에 기인하지 않음을 정하는 것이 정적 타입 검사 이다.

정적 타입 검사자인 TS는 프로그램을 실행시키기 전에 값의 종류를 기반으로 프로그램의 오류를 찾는다.

// @error: 2551
const obj = { width: 10, hegith: 15};
const area = obj.width * obj.hegiht;

타입이 있는 JS의 상위 집합 (A Typed Superset of JS)

TS 는 JS 와 어떤 관계인가.

TS는 JS의 구문이 허용되는 JS 의 상위 집합 언어이다. 구문은 프로그램을 만들기 위해 코드를 작성하는 방법을 의미한다.

TS는 다른 종류의 값들을 사용할 수 있는 방법이 추가된 타입이 있는 상위 집합이다. 위의 obj.height 오류는 구문 오류가 아닌 다른 값의 종류를 사용해서 생긴 오류이다.

console.log(4 / []);

구문적으로 옳은 위 코드는 JS 에서는 NaN 을 출력한다. 하지만 TS 는 배열로 숫자를 나누는 연산이 옳지 않다고 판단하여 오류를 발생시킨다.

// @error: 2363
console.log(4 / []);

TS 의 타입 검사자는 일반적인 오류를 최대한 많이 검출하면서 프로그램을 만들 수 있도록 설계 되었다.

TS 는 JS 의 런타임 특성을 가진 프로그래밍 언어이다. JS 에서 0으로 나누는 행동은 런타임 예외로 처리하지 않고 Infinity 값을 반환한다. TS는 JS 코드의 런타입 특성을 절대 변환시키지 않는다.

즉 TS 가 코드에 타입 오류가 있음을 검출해도 JS 코드를 TS 로 이동시키는 것은 같은 방식으로 실행시킬 것을 보장한다.

JS 와 동일한 런타임 동작을 유지하는 것은 프로그램 작동을 중단시킬 수 있는 미묘한 차이를 걱정하지 않고 두 언어 간에 쉽게 전환 가능하도록 한 TS의 기본적인 약속이다.

개략적으로 TS의 컴파일러가 코드 검사를 마치면 타입을 삭제해서 결과적으로 컴파일된 코드를 만든다. 코드가 한 번 컴파일 되면 결과로 나온 일반 JS 코드에는 타입 정보가 없다.

타입 정보가 없는 것은 TS 가 추론한 타입에 따라 프로그램의 특성을 변환시키지 않는다는 의미다. 컴파일 도중에는 타입 오류가 표출될 수 있지만 타입 시스템 자체는 프로그램이 실행될 때 작동하는 방식과 관련이 없다.

TS 는 추가 런타입 라이브러리를 제공하지 않는다. TS 프로그램은 JS 프로그램과 같은 표준 라이브러리를 사용한다.

TS와 JS의 관계는 다소 독특하다 TS는 JS 위에 레이어로서 자리잡고 있는데 JS의 기능들을 제공하면서 위에 자체 레이어를 추가한다. 이 레이어가 TS 타입 시스템이다.

JS는 이미 string, number, object, undefined 와 같은 원시 타입을 가지고 있지만 전체 코드베이스에 일관되게 할당되었는지 미리 확인해 주지 않는다.

JS 코드는 동시에 TS 코드라는 의미지만 TS의 타입 검사기는 사용자가 생각한 일과 JS가 실제로 하는 일 사이에 불일치를 강조할 수 있다.

TS는 JS 언어를 알고 있으며 대부분의 경우 타입을 생성해줄 것이다. 변수를 생성하면서 동시에 특정 값에 할당하는 경우 TS는 그 값을 해당 변수의 타입으로 사용할 것이다.

let HelloWorld = "Hello world";

JS가 동작하는 방식을 이해함으로써 TS는 JS 코드를 받아들이면서 타입을 가지는 타입 시스템을 구축할 수 있다. 이는 코드에서 타입을 명시하기 위해 추가로 문자를 사용할 필요가 없는 타입 시스템을 제공한다. 이것이 위의 예제에서 TS가 HelloWorld 가 string 임을 알게 되는 방식이다.

JS는 다야안 디자인 패턴을 가능하게 하는 동적 언어이다. 몇몇 디자인 패턴은 자동으로 타입을 제공하기 힘들 수 있는데 이러한 경우 TS는 TS 에게 타입이 무엇이 되어야 하는지 명시 가능한 JS 언어의 확장을 지원한다.

• name: string 과 id: number 을 포함하는 추론 타입을 가진 객체를 생성하고
• interface 로 객체의 형태를 명시적으로 나타낸다.
• 변수 뒤에 : TypeName 구믄을 사용해 JS 객체가 새로운 interface 의 형태를 따르고 있음을 선언 가능하다.

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

const user: User = {
    name: "Hayes",
    id: 0,
}

해당 인터페이스에 맞지 않은 객체를 생성하면 TS는 경고를 준다.

JS는 클래스와 객체 지향 프로그래밍을 지원하기 떄문에 TS 또한 동일하다. - 인터페이스는 클래스로도 선언 가능하다.

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

class UserAccount {
  name: string;
  id: number;

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

const user: User = new UserAccount("Arthur", 1);

인터페이스는 함수에서 매개변수와 리턴 값을 명시하는데 사용하기도 한다.

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

// ~~~~~~

function getAdminUser(): User {
    // ...
}

function deleteAdminUser(user: User) {
    
}

JS 에서 사용할 수 있는 원시 타입은 이미 있다. boolean, bigint, null, number, string, symbol, object, undefined

는 인터페이스에서 사용 가능하다. TS 는 몇 가지를 추가해 목록을 확장한다. 예를 들어 any, unknown, never, void 등이 있다.

객체들을 조합하여 더 크고 복잡한 객체를 만드는 방법과 유사하게 TS에 타입으로 이를 수행하는 도구가 있다.

여러가지 타입을 이용하여 새 타입을 작성하기 위해 일상적인 코드에서 가장 많이 사용하는 두 가지 코드는

Union 과 Generic 이 있다.

• 유니언 (Unions) 유니언은 타입이 여러 타입 중 하나일 수 있음을 선언하는 방법이다.

type MyBool = true | false;

TS는 코드가 시간에 따라 변수가 변경되는 방식을 이해하며 이러한 검사를 사용해 타입을 골라낼 수 있다.

typeof s === "string";
Array.isArray(a);

TS 제네릭 시스템에 대해 자세히 알아볼 수 있지만, 간단히 설명하면 제네릭은 타입에 변수를 제공하는 방법이다.

배열이 일반적인 예시이다.

type StringArray = Array<string>;
type NumberArray = Array<number>;
type ObjectWithNameArray = Array<{name: string}>;

제네릭을 사용하는 고유 타입을 선언할 수 있다.

// @errors: 2345
interface Backpack<Type> {
    add: (obj: Type) => void;
    get: () => Type;
}

// 이 줄은 TS에 'backpack' 이라는 상수가 있음을 알리는 지름길이며
// const backpack: Backpack<string>이 어디서 왔는지 걱정할 필요가 없다.
declare const backpack: Backpack<string>;

// 위에서 Backpack의 변수 부분으로 선언해서, object는 string 이다.
const object = backpack.get();

// backpack 변수가 string 이므로 add 함수에 number 를 전달할 수 없다.
backpack.add(23);

TS 의 핵심 원칙 중 하나는 타입 검사가 값이 있는 형태에 집중한다는 것이다. 이는 떄떄로 덕 타이핑 또는 구조적 타이핑 이라 한다.

구조적 타입 시스템에서 두 객체가 같은 형태를 가지면 같은 것으로 간주한다.

interface Point {
    x: number;
    y: number;
}

function printPoint(p: Point) {
  console.log(`${p.x}, ${p.y}`);
}

const point = { x: 12, y: 26 };
printPoint(point);

point 변수는 Point 타입으로 선언된 적이 없지만 TS 타입 검사에서 point 의 형태와 Point 형태를 비교한다. 둘 다 같은 형태이기 떄문에 통과한다.

형태 일치에는 일치시킬 객체의 필드 하위 집합만 필요하다.

// @errors: 2345
interface Point {
  x: number;
  y: number;
}

function printPoint(p: Point) {
  console.log(`${p.x}, ${p.y}`);
}

// -- cut --

const point3 = { x:12, y: 24, z:36 };
printPoint(point3); // prints "12 36"

const rect = {x:33, y:3, width:30, height: 30};
printPoint(rect); // prints "33 3"

const color = { hex: "#123123" };

printPoint(color); // Error

구조적으로 클래스와 객체가 형태를 따르는 방법에는 차이가 없다.

TS는 C#, Java 와 같이 정적 타이핑을 사용하는 언어에 익숙한 프로그래머에게 인기 있는 선택이다.

TS 의 타입 시스템은 더 나은 코드 완성, 오류의 조기 발견, 프로그램 부분 간의 더 명확한 통신과 같이 정적 타이핑이 가지는 많은 이점을 제공한다. TS는 이러한 개발자에게 친숙한 기능을 많이 제공하지만 JS가 기존의 객체 지향 프로그래밍 언어와 어떤 차이가 있는지 다시 살펴볼 필요가 있다. 이러한 차이점을 이해하는 것은 더 나은 JS 코드를 작성하는데 도움을 줄 것이고, C#/JAVA 에서 TS 로 바로 입문한 프로그래머가 겪는 흔한 함정을 피할수 있다.

만약 JS에 익숙하지만 주로 Java C# 을 사용하는 프로그래머라면 흔히 접할 수 있는 오해와 함정에 대한 설명이 될 것이다. TS 모델이 유형화 하는 방법 중 일부는 Java 나 C# 과 상당히 다르다. TS 학습하는 데에 있어 이 부분을 염두해 두는 것이 중요하다.

JS를 경험하지 않은 프로그래머라면 JS 런타임 동작을 이해하기 위해 우선적으로 타입을 제외한 JS 일부분을 배우는 것이 좋다.

TS는 코드를 실행하는 방식을 바꾸지 않기 떄문에 실제로 무언가 동작하는 코드를 작석하기 위해서는 여전히 JS가 어떻게 작동하는지 배워야 한다.

TS가 JS와 동일한 런타임을 사용하므로 특정한 런타임 동작을 구현하려는 리소스는 항상 TS 프로그램에 똑같이 잘 적용된다는 점을 기억하는 것은 매우 중요하다. TS에 특정된 리소스에만 제한을 두면 안된다.

C# 과 Java 는 의무적 OOP 언어라고 부른다. 이러한 언어에서 클래스는 코드 구성의 기본 단위일 뿐만 아니라 런타임 시 모든 데이터 그리고 동작의 기본적인 컨테이너이다. 기능과 데이터를 전부 클래스에 담도록 강제하는 것은 일부 문제에 대해선 좋은 도메인 모델이 될 수 있지만 모든 도메인이 이러한 방식으로 표현될 필요는 없다.

JS에서 함수는 어디에나 있을 수 있고, 데이터를 미리 정의한 class 나 struct 에 속하지 않고 자유롭게 전달할 수 있다.

이러한 유연성은 매우 강력하다. OOP 계층과 상관 없이 데이터를 처리하는 "자유로운" 함수는 프로그램을 JS 로 작성하는 모델로 선호된다.

추가적으로 C#과 Java 의 싱글턴과 정적 클래스 같은 특정 구조는 TS에서 필요없다.

원한다면 클래스를 사용해도 된다. 일부 문제는 기존의 OOP 계층으로 해결하기 적합하며 TS가 JS의 클래스를 지원하므로 이러한 모델을 더욱 더 효과적으로 만든다. TS는 인터페이스, 상속, 정적 메서드 구현과 같은 많은 일반적인 패턴을 지원한다.

TS의 타입에 대한 이해는 C#, Java 와 상당히 다르다 몇 가지 차이점을 살펴보자.

C#, Java 에서 런타임 타입과 해당 컴파일 타입 선언 사이의 일대일 대응관계는 중요하다. TS 에서 타입은 공통의 무언가를 공유하는 값의 집합으로 생각하는 것이 좋다. 타입은 집합에 불과하기 떄문에 특정한 값은 동시에 수많은 집합에 속할 수 있다.

타입을 집합으로 생각하기 시작하면 특정 연산이 매우 자연스러워진다. C# 에서는 string 과 int 둘 다 가능한 타입이 존재하지 않기 때문에 이 값을 인자로 전달하는 것은 이상하다.

TS에서 모든 타입이 단순히 집합이라는 것을 깨닫는 순간 이는 매우 자연스러워진다. string 집합 또는 number 집합에 속할 수 있는 값을 어떻게 설명할 것인가.

단순히 유니언으로 표현 가능하다. 'string' | 'union'

TS는 집합론에 의거해 타입을 이용하는 여러 방법을 제공하며 타입을 집합으로 생각하는 것이 더 직관적이다.

TS 에서 객체는 정확히 단일 타입이 아니다. 인터페이스를 만족하는 개체를 생성할 떄. 둘 사이의 선언적인 관계가 없더라도 인터페이스가 예상되는 곳에 해당 객체를 사용할 수 있다.

interface PointLike {
    x: number;
    y: number;
}
interface Named {
    name: string;
}

function printPoint(point: PointLike) {
  console.log(`x ${point.x}, y ${point.y}`);
}

function printName(x: Named) {
  console.log(`Hello ${x.name}`);
}

const obj = {
  x: 0,
  y: 1,
  name: "Origin"
};

printName(obj);
printPoint(obj);

TS 타입 시스템은 명목이 아닌 구조적이다. obj 는 숫자인 x,y 프로퍼티를 가지고 있으므로 PointLike 로써 사용될 수 있다. 타입간의 관계는 특정 관계로 선언되었는지가 아닌, 포함된 프로퍼티에 의해 결정된다.

TS의 타입 시스템은 또한 구체화되지 않았다. 런타임에 obj 가 PointLike 임을 알려주지 않았다. 사실 PointLike 타입은 런탕미에 어떤 형태로도 존재하지 않는다.

집합으로서 타입 개념으로 보면 obj를 PointLike 값 집합이나 Named 값 집합의 멤버로 간주할 수 있다.

객체지향 프로그래머는 종종 구조적 타입화의 두 가지 측면에 놀라곤 한다.

첫 번째로 빈 타입은 예상을 무시하는 것처럼 보인다.

class Empty {};

function fn(arg: Empty) {
    // some
}

// isEmpty???
fn({k: 10});

TS는 주어진 인수가 유효한 Empty 인지 확인하여 fn 의 호출이 유효한지를 검사한다. Empty 에 프로퍼티가 없으므로 Empty 가 수행하는 모든 프로퍼티가 속해있다. 그러므로 유효한 호출이다.

놀랍지만 최종적으로 명목적인 객체지향프로그래밍 언어와 매우 비슷하게 사용된다. 파생 클래스와 파생 클래스의 기본 사이의 자연스러운 하위 타입 관계가 파괴되기 때문에 하위 클래슨느 삭제할 수 없다.

구조적 타입 시스템은 호환 가능한 유형의 속성을 갖는 측면에서 하위 타입을 설명하므로 관계를 암시적으로 구별한다.

class Car {
    drive() {
        // ~~
    }
};

class Golfer {
    drive() {
        // ~~
    }
}

// No error?
let w: Car = new Golfer();

오류가 아닌 이유는 클래스의 구조가 동일하기 떄문이다.

객체지향 프로그래머는 제네릭을 포함하여 어떤 값의 유형이라고 다를수 있음이 익숙하다.