TypeScript

Part.1

chapter.1

1.1 자바스크립트의 역사

언어 확장이나 프레임워크 없이 자바스크립트를 사용하는 순수한 자바스크립트를 바닐라라고 부른다.
자바스크립트는 코드를 구성하는 방법에 제한이 없기 때문에 어떠한 함수가 인자를 받아서 사용한다고 했을 때, 만약 인자의 데이터가 다른 타입으로 변경되거나 메서드 이름이 변경되는 상황이 발생한다고 해도, 자바스크립트는 충돌 가능성을 확인하지 않고 실행된다.
- 이러한 자유는 코드의 안정성을 떨어뜨린다고 할 수 있다.

1.2 바닐라 자바스크립트의 함정

자바스크립트에는 함수의 매개변수, 함수 반환, 변수 또는 다른 구성 요소의 의미를 설명하는 표준화된 내용이 없다.
따라서 주석을 이용하여 함수와 변수를 설명하는 JSDoc 방식을 사용한다.
- JSDoc은 코드의 잘못 작성된 코드의 근본적인 문제를 해결할 수 없으며, 코드의 변경 사항에 따라 모든 주석의 설명을 수정할 수 없다.
- 또한 복잡한 객체를 설명할 때는 설명이 장황해지며 다수의 주석이 필요하다는 근본적인 문제점은 해결할 수 없다.
C# 등 다른 프로그램언어에서 클래스의 이름을 변경하거나 인수의 타입이 선언된 곳으로 바로 이동할 수 있는 기능이 없기 때문에 변경되는 코드에 대한 사항을 모두 확인하기 어렵다.
- VS Code에서 Ctrl + 마우스 클릭을 통해 코드로 바로 이동할 수 있는 개발 도구를 제공하지만, 이는 타입스크립트 코드만큼 안정적이지 않다.

1.3 타입스크립트

타입 스크립트는 자바스크립트의 상위 집합 혹은 타입이 있는 자바스크립트라고 설명된다.
- 프로그래밍 언어 : 자바스크립트의 모든 구문과 타입을 정의하고 사용하기 위한 고유 구문이 포함된 언어이다.
- 타입 검사기 : 자바스크립트 및 타입스크립트로 작성된 일련의 파일에서 생성한 변수, 함수 등의 구성 요소를 이해하고, 잘못 구성된 부분을 알려주는 프로그램이다.
- 컴파일러 : 타입 검사기를 실행하고 문제를 보고한 후 이에 대응되는 자바스크립트 코드를 생성하는 프로그램이다.
- 언어 서비스 : 타입 검사기를 사용해, 텍스트 편집기에서 개발자에게 유용한 유틸리티 제공법을 알려주는 프로그램이다.

1.4 타입스크립트 플레이그라운드

타입스크립트는 텍스트 편집기인 플레이그라운드를 제공한다.

  
const firstName = "George";
const nameLength = firstName.length();
// Error: This expression is not callable

자바스크립트 구문으로 작성된 코드인데, 위 코드를 타입스크립트 타입 검사기로 실행하면 문자열의 길이 속성이 함수가 아니라 숫자라는 지식을 활용해 주석으로 오류 사항을 알려준다.
이 코드를 플레이그라운드 혹은 편집기에 넣으면 오류가 발생하는 코드에 빨간 물결선이 표시되며 오류에 대한 내용을 알 수 있다.

예를 들어 함수의 매개변수 개수를 변경했을 경우, 변경된 함수를 호출하는 코드를 업데이트하지 않았다면 타입스크립트가 알려준다.

  
// 이전 코드 : sayMyName(firstName, lastName){}
function sayMyName(firstName) {
console.log(`You acting kind of shandy, ain't callin me ${firstName}`);
}
sayMyName(firstName, lastName);
// Error: Expected 1 argument, but got 2

위 코드는 자바스크립트에서 오류 없이 실행되지만 잘못된 수의 인수를 사용한 함수 호출을 타입스크립트가 제한한다.

1.4.3 정확한 문서화

paintPainting 함수의 타입스크립트 버전 예시

  
interface Painter {
  finish(): boolean;
  oenMaterials: Material[];
  paint(painting: string, materials: Material[]): boolean;
}

function paintPainting(painting: string, materials: Material): boolean {}

타입스크립트로 작성된 인터페이스와 함수이다.
인터페이스 Painter는 finish(), ownMaterials, paint(...) 이 3개의 속성과 메서드를 가지고 있다.
- finish() : 해당 작업을 끝냈는지를 나타내는 boolean 값을 반환한다.
- ownMaterials : Painter가 소유하고 있는 배열이다.
- paint(...) : 해당 Painter가 두 가지 인자를 받는데, painting은 string타입, materials는 배열을 가진 Material이라는 것을 의미한다.
  - 이 함수는 boolean 값을 리턴한다.
- 최종적으로 paintPainting이 실행됐을 때, boolean을 리턴한다.

1.4.4 강력한 개발자 도구

자바스크립트의 자동완성 기능과 마찬가지로 타입스크립트에서도 자동 완성을 재공하고, 만약 문자열 test를 입력 후 뒤에 내장 코드 .을 사용할 시, 문자열의 모든 내장 코드를 제안받는다.

1.5 구문 컴파일하기

Node.js가 설치되어 있다면 타입스크립트를 설치, 실행할 수 있다. npm i -g typescript
설치가 완료됐다면 명령줄에서 tsc(타입스크립트 컴파일러) 명령어로 타입스크립트를 실행할 수 있다. tsc --version
tsc --init을 입력하여 tsconfig.json구성 파일을 생성한다.
- tsconfig.json 파일은 타입스크립트가 코드를 분석할 때 사용하는 설정을 선언한다.
- tsc를 실행하여 폴더의 모든 파일을 컴파일하도록 지시할 수 있고, 타입스크립트가 모든 구성 옵션에 대해 json파일을 참조할 수 있다.

예시

index.ts파일을 만든다.
console.blub("Noting is wort") 를 작성하고 tsc index.ts를 입력하면 오류가 출력된다.
1 2 3 index.ts:1:9 - error ... 'blub' does not exist on type 'Console". Found 1 error.
- console에는 blub이 존재하지 않는다.
타입스크립트를 정상적으로 작동시키기 위해 코드를 수정하기 전에,tsc가 console.blub을 포함해 index.js를 생성한다.
- 코드에 오류가 있지만 구문은 여전히 유효하며, 타입스크립트 컴파일러는 타입 오류와 상관없이 입력 파일로부터 자바스크립트를 생성한다.

1.5.2 편집기 기능

tsconfig.json 파일은 편집기에서 특정 폴더를 열었을 때 해당 폴더를 타입스크립트 프로젝트로 인식한다.
- VS Code에서 폴더를 열면 코드를 분석하는 데 tsconfig.json 설정을 따르게 된다.

1.6.2 자바스크립트로의 확장

타입스크립트는 자바스크립트 작동 방식을 변경하지 않는다.
자바스크립트와 충돌할 수 있는 새로운 코드 기능을 추가하지 않는다.

1.6.3 자바스크립트보다 느린 타입스크립트

타입스크립트는 Node.js와 브라우저에서 실행되기 전에 자바스크립트로 컴파일되어야 하기 때문에 시간이 조금 더 걸린다.

chapter.1 정리

자바스크립트
- 자바스크립트는 잘못 작성된 코드도 일단 실행시킨다는 큰 함정이 있다.
- 인자를 전달하는 함수의 인자의 타입이 바뀌거나, 인자가 삭제되는 경우, 그 함수를 사용하는 모든 코드를 수정해야 한다.
- 작성한 코드에 대해 설명할 수 있는 수단이 주석처리로, 매우 제한적이다.
- 어떠한 값이 틀렸는지에 대한 정보 등에 대한 접근성이 떨어져 부족한 개발자 도구를 제공한다.
타입스크립트
- 자바스크립트와 반대로, 함수를 사용하는 모든 코드에 대한 오류를 명확하게 나타낸다.
- 값이나 함수의 타입을 지정할 수 있어 명시적인 코드 작성이 가능하다.
- 값에 대한 정보와 높은 개발자 도구를 제공한다.
- 자바스크립트로 컴파일 하는 과정을 거치기 때문에, 자바스크립트와 비교하여 다시 느리다.

chapter.2 타입 시스템

2.1 타입의 종류

타입스크립트는 자바스크립트에서 다루는 값의 형태를 다룬다.
- 자바스크립트의 typeof 연산자
타입스크립트는 일곱 가지 원시 타입을 파악한다.
- null
- undefined
- boolean
- string
- number
- bigint
- symbol
선언한 변수 이름 위에 마우스를 가져다 대면 원시 타입을 알 수 있다.

2.1.1 타입 시스템

타입스크립트의 타입 시스템은 프로그래밍 언어가 가질 수 있는 타입을 이해하는 방법에 대한 규칙이다.
- 코드를 읽고 존재하는 모든 타입과 값을 이해한다.
- 각 값이 초기 선언에서 가질 수 있는 타입을 확인한다.
- 각 값이 추후 코드에서 어떻게 사용될 수 있는지 모든 방법을 확인한다.
- 값의 사용법이 타입과 일치하지 않으면 사용자에게 오류를 표시한다.
  1 2 3 4 let firstName = "choi"; firstName.length(); // Error : This expression is not callable. // Type "Number" has no call signatures
- length는 메서드가 프로퍼티이기 때문에 함수로 호출할 수 없다.
- 타입스크립트가 오류를 표시하는 순서는 다음과 같다.
  - 코드를 읽고 firstName이라는 변수를 이해한다.
  - 초깃값이 choi이므로 string타입이라고 결론짓는다.
  - firstName이 .length를 함수처럼 호출하는 코드인지를 확인한다.
  - string의 .length는 함수가 아닌 숫자라는 오류를 표시한다.
    - 즉 함수처럼 호출할 수 없다

2.1.2 오류의 종류

타입스크립트에서 가장 자주 접하는 오류는 다음과 같다.
- 구문 오류 : 타입스크립트가 자바스크립트로 변환되는 것을 차단한 경우
- 타입 오류 : 타입 검사기에 따라 일치하지 않는 것이 감지된 경우
구문 오류
- 코드로 이해할 수 없는 잘못된 구문을 감지할 때 발생한다.
- 잘못된 구문이기 때문에 자바스크립트로 컴파일 될 수 없도록 이를 차단한다.
  1 2 let let wat; // Error: ',' expected
- 사용하는 도구와 설정에 따라 자바스크립트 코드를 얻을 수도 있지만, 원하는 출력 결과가 아닐 수 있기 때문에 구문 오류를 수정하는 것이 좋다.
타입 오류
- 타입스크립트의 타입 검사기가 프로그램의 타입에서 오류를 감지했을 때 발생한다.
- 구문 오류와 달리, 오류가 발생했다고 해서 자바스크립트로 변환되는 것을 차단하진 않는다.
- 하지만 무언가 충돌하거나 예기치 않게 작동할 수 있음을 나타낸다.
  1 2 console.blub("Hello world!"); // Error : Property 'blub' does not exist on type 'Console'
- 타입 오류가 있음에도 자바스크립트 코드를 얻을 수 있지만 원하는 대로 실행되지 않을 가능성이 있다는 신호를 알려준다.
- 어떤 프로젝트에서는 구문 오류뿐만 아니라 타입 오류가 수정될 때까지 코드 실행을 차단하기도 해서 대부분의 프로젝트는 구성 옵션과 tsconfig.json 파일을 사용해 차단하지 않도록 설정한다.

2.2 할당 가능성

타입스크립트는 변수의 초깃값을 읽고 해당 변수가 허용되는 타입을 결정한다.
해당 변수에 새로운 값이 할당되면, 새롭게 할당된 값의 타입이 변수의 타입과 동일한지 확인한다.
처음에 string 타입을 가진 변수에 동일한 타입인 string값을 할당하는 것은 문제가 되지 않는다.
1 2 3 4 5 6 let firstName = "choi"; firstName = "kim"; let LastName = "rang"; LastName = true; // Error : Type `boolean` is not assignable to type `string'.
- 함수 호출이나 변수에 값을 제공할 수 있는지 여부를 확인하는 것을 할당 가능성이라고 한다.
- 전달된 값이 예상된 타입으로 할당 가능한지 여부를 확인하는 것이다.

2.2.1 할당 가능성 오류 이해하기

Type ... is not assignable to type... 형태의 오루는 우리가 마주할 가장 일반적인 오류 중 하나이다.
해당 오류에 언급된 첫 번째 type은 코드에서 변수에 할당하려고 시도하는 값이다.
두 번째 type은 첫 번째 타입, 즉 값이 할당하는 변수이다.

2.3 타입 애너테이션

때로는 변수에 타입스크립트가 읽어야 할 초깃값이 없는 경우도 있는데, 타입스크립트는 나중에 사용할 변수의 초기 타입을 파악하려고 시도하지 않는다.
기본적으로 변수를 암묵적인 any타입으로 간주하는데, 변수는 모든 것이 될 수 있음을 나타낸다.

초기 타입을 유추할 수 없는 변수는 진화하는 any라고 부른다.

특정 타입을 강제하는 대신 새로운 값이 할당될 때마다 변수 타입에 대한 이해로 발전시킨다.

  
let firstName = "choi";
firstName = true;
// Error : Type `boolean` is not assignable to type `string'.
let secondName;
secondName = "choi";
secondName = true;

위의 예시처럼, firstName의 타입은 string으로 할당됐기 때문에 Error를 출력하지만, secondName의 타입은 any로 할당됐기 떄문에 true로 재할당하더라도 오류가 발생하지 않는다.

하지만 타입스크립트의 타입 검사 목적이 쓸모없게 만든다.

  
let rocker;
rocker = "choi";
rocker.toUpperCase(); // Ok
rocker = 3.1234123; // type `number`
rocker.toPrecision(2); // Ok
rocker.toUpperCase();
// Error : 'toUpperCase' does not exist on type `number'.

타입스크립트는 초깃값을 할당하지 않고도 변수의 타입을 선언할 수 있는 타입 애너테이션을 제공한다.
- 변수 이름 뒤에 배치되며 콜론:과 타입 이름을 차례대로 기재하면 any 타입에 대한 오류 설정을 구성할 수 있다.
  1 2 3 4 let rocker: string; rocker = "choi"; rocker = 3.1234123; // Error : Type 'Number' does not exist on type 'string'
- 타입스크립트에만 존재하며 런타임 코드에 영향을 주지도, 유효한 자바스크립트 구문도 아니다.
tsc 명령어를 실행해 타입스크립트 소스 코드를 자바스크립트로 컴파일하면 해당 코드가 삭제된다.

2.3.1 불필요한 타입 애너테이션

타입 애너테이션은 타입스크립트가 자체적으로 수집할 수 없는 정보를 타입스크립트에 제공할 수 있다.
타입을 즉시 유추할 수 있는 변수에도 타입 애너테이션을 사용할 수 있다.
1 let firstName: string = "choi"; // 타입 시스템은 변경되지 않는다.
초깃값이 있는 변수에 타입 애너테이션을 추가하면 변수에 할당된 값의 타입이 일치하는지 확인한다.
만약 string타입으로 선언된 firstName에, number 값인 42로 초기화 시, 자바스크립트가 호환되지 않는다는 오류가 발생한다.
1 2 let firstName: string = 42; // Error : Type 'number' is not assignable to Type 'string'.
아무것도 변하지 않는 변수에는 타입 애너테이션을 추가하지 않는 것이 좋다.
- 코드를 명확하게 문서화하는 경우나, 실수로 변수 타입이 변경되는 것을 방지하는 목적으로 사용되는 것은 경우에 따라 유용할 수 있다.

2.4 타입 형태

타입스크립트는 변수에 할당된 값이 원래 타입과 일치하는지 확인하는 것뿐만 아니라, 객체에 어떤 속성이 존재하는지도 파악한다.
1 2 3 4 let firstname = "choi"; firstname.length; // OK firstName.push("1"); // Error : Property 'push' does not exist on type 'string'.

객체에 키의 존재 여부 또한 파악하여 오류를 표시한다.

  
let name = {
  firstName: "choi",
  lastName: "choi",
};

name.middleName;
// Error : Property 'middleName' does not exist on type
// '{ firstName: string, lastName: string }'.

2.4.1 모듈

자바스크립트는 최근까지 서로 다른 파일에 작성된 코드를 공유하는 방법에 관한 사양을 제공하지 않았지만, ECMA 스크립트 2015에는 파일 간에 import,export구문을 표준화하기 위해 ECMA스크립트 모듈(ESM)을 추가했다.
모듈(export 또는 import가 있는 파일) 파일에 선언된 모든 것은 해당 파일에서 명시한 export문으로 내보내지 않는 한 모듈 파일에서만 사용할 수 있다.

한 모듈에서 다른 파일에 선언된 변수와 동일한 이름으로 선언된 변수는 다른 파일의 변수를 가져오게 되면 전역 스코프로 간주되어 오류가 발생한다.

  
// shared.ts
export const shared = 1;

// examxam.ts
import { shared } from "./shared";
// Error : Import declaration coflicts with local declaration of 'shared'
export const shared = "One";
// Error : Individual declarations in merged declaration
// 'shared' must be all exported of all local

a파일과 b파일 모두에 const shared선언되어 있으면, a,b파일에 모듈 스타일의 export나 import 가 없기 때문에 스크립트 파일(모듈 파일을 제외한 모든 파일)로 간주되고, 동일한 이름의 변수가 동일한 파일에 선언된 것처럼 서로 충돌한다.
1 2 3 4 5 // a.ts const shared = "shared"; // b.ts const shared = "shared"; // Error : Cannot redeclare block-scope variable 'shared'
- 타입스크립트 파일에 Cannot redeclare..라는 오류가 표시되면 파일에 export또는 import를 추가하지 않았기 때문일 수 있다.
- ECMA스크립트 사양에 따라 export, import문 없이 파일을 모듈로 만들어야 한다면, 파일의 아무 곳에나 export{}를 추가해 강제로 모듈이 되도록 만든다.

chapter.2 정리

타입스크립트는 원시 타입을 인식한다.
타입스크립트는 변수에 할당된 값의 형태를 기억한다.
타입스크립트는 타입 애너테이션으로 any 타입으로 선언할 수 있다.
타입스크립트는 변수 할당 가능성을 예상할 수 있다.
스크립트 파일과는 다른 모듈 파일로 만들어 줄 수 있다.
타입 시스템으로 타입스크립트가 코드를 이해하여 오류를 출력한다.
타입 오류는 실행 차단, 구문 오류는 실행을 차단시키진 않는다.

TypeScript 2장 - 러닝 타입스크립트(1)