[Typescript] Typescript Essentials1

타입스크립트 기본

01. Typescript란?

Typescript가 나오게 된 배경

Javascript는 원래 클라이언트 측 언어로 도입되었다. 그런데 Node.js의 개발로 인해서 JS를 클라이언트 측 뿐만이 아니라 서버 측 기쉴로도 활용하게 만들었다. 그러나 JS의 코드가 커질 수록 소스코드가 더 복잡해져서 코드를 유지관리하고 재사용하기가 어려워졌다. 더욱이 Type 검사 및 컴파일시 오류검사의 기능을 수용하지 못하기 때문에 JS가 본격적인 서버 측 기술로 엔터프라이즈 수준에서 성공하지 못한다. 이 간극을 메우기 위해 Typescript가 제시되었다.

Typescript란?

타입스크립트는 자바스크립트에 타입을 부여한 언어. 자바스크립트의 확장된 언어(superset)라고 볼 수 있다. 타입스크립트는 자바스크립트와 달리 브라우저에서 실행하려면 파일을 한번 변환해주어야 한다. 이 변환 과정을 컴파일이라고 부른다.

타입시스템 (Definitely Typed, Type Alias, generic, interface, assertion, Utilities, ... )

자바스크립트는 동적 타입
타입스크립트는 정적 타입 -> 안정성

Type System

• 개발환경에서 에러를 잡는 걸 도와준다.
• type annotations를 사용해서 코드를 분석할 수 있다.
• 오직 개발환경에서만 활성화 된다.
• 타입 스크립트와 성능 향상과는 관계가 없다.

TypeScript 사용하는 이유?

• TS는 JS코드를 단순화하여 더 쉽게 읽고 디버그할 수 있도록 한다.
• TS는 오픈소스이다.
• TS는 정적검사와 같은 JS IDE 및 사례를 위한 매우 생산적인 개발도구를 제공한다.
• TS를 사용하면 코드를 더 쉽게 읽고 이해할 수 있다.
• TS를 사용하면 일반 JS보다 크게 개선할 수 있다.
• TS는 ES6의 모든 이점과 더 많은 생산성을 제공한다.
• TS는 코드유형검사를 통해 JS를 작성할 때 개발자가 일반적으로 겪는 버그를 피하는데 도움이 될 수 있다.

02. Typescript Type

타입이란, 그 value가 가지고 있는 프로퍼티나 함수를 추론할 수 있는 방법이다.

예

let string = "Apple"
string.length; // 5
string.toLowerCase(); // apple

Property
string.length는 문자열의 속성인 문자열의 길이를 제공.
Method
string.toLowerCase()는 문자열을 소문자로 변환한다. 즉 문자열에 작업을 수행한 다음 반환한다.

Types in Typescript

Typescript는 Javscritp에서 기본으로 제공하는 기본 제공 유형(bulit-in types)을 상속한다. Typescript의 유형은 다음과 같이 분류된다.

• Primitive Types
• Object Types

Primitive Types

Name	Description
string	문자열을 나타냄
number	숫자값을 나타냄
boolean	true와 false 값을 가짐
null	하나의 값을 가짐: null
undefined	하나의 값을 가짐: undefine. 초기화되지 않은 변수의 기본값.
symbol	고유한 상수값을 나타냄

Object Types

Name	Description
function	함수
array	배열
classes	클래스
object	객체

03. Typescript 추가 제공 타입

Any

애플리케이션을 만들때 잘알지 못하는 타입을 표현해야 할 수 있음. 이 값들은 사용자들로부터 받은 데이터나 서드파티 라이브러리 같은 동적인 컨텐츠에서 올 수 있음. 이 경우 타입검사를 하지 않고, 그 값들이 컴파일 시간에 검사를 통과하길 원한다. 이를 위해 any타입을 사용할 수 있다.

하지만 이 타입은 최대한 쓰지 않는게 좋다.
그래서 noImplicitAny라는 옵션을 주면 any를 썼을때 오류가 나오게 할 수 있다.

Enum

enum은 enumerated type(열거형)을 의미한다.
enum은 값들의 집합을 명명하고 이를 사용하도록 만든다.
여기서 PrintMedia라 불리는 집합을 기억하기 어려운 숫자 대신 친숙한 이름으로 사용하기 위해 enum을 활용할 수 있다. 열거된 각 PrintMedia는 별도의 값이 설정되지 않은 경우 기본적으로 0부터 시작한다.

enum PrintMedia {
  Newspaper,  // 0
  Newsletter, // 1
  Magazine,   // 2
  Book        // 3
}

let mediaType: number = PrintMedia.Book; // 3

mediaType에 할당된 값은 3이다. 설정된 PrintMedia열거형 데이터의 Book의 값이 3이기 때문이다.
enum에 설정된 아이템에 값을 할당할 수도 있는데 값이 할당되지 않은 아이템은 이전 아이템의 값에 +1된 값이 설정된다.

enum PrintMedia {
  Newspaper = 1,
  Newsletter = 50,
  Magazine = 55,
  Book        // 55 + 1
}

let mediaType: number = PrintMedia.Book; // 56

let type: string = PrintMedia[55]; // Magazin

enum 타입의 편리한 기능으로 숫자값을 통해 enum 값의 멤버이름을 도출할 수도 있다.
또한 어떠한 언어코드를 정의하는 코드를 작성할 때 언어의 집합을 만들때도 enum을 사용할 수 있다.

export enum LanguageCode {
  korean = 'ko',
  english = 'en',
  japanese = 'jp',
  chinese = 'ch',
  spanish = 'es',
}

const code: LanguageCode = LanguageCode.english;

이렇게 enum을 이용해서 언어의 집합을 만들어주면 어떠한 코드가 어떠한 나라의 언어코드가 무엇인지 알지 못해도 쉽게 코드를 작성해 줄 수 있고 코드를 읽는 사람 입장에서도 가독성이 높아지게 된다.

이렇게보면 enum과 js의 object를 사용하는 것과 별 차이 없어보인다. 사실 enum은 그 자체로 객체이기도 하다.
그래서 Object.keys(LanguageCode)를 하면 실제 키값이 => ['korean', 'english'] 배열에 담겨서 나온다. Object.values(LanguageCode)를 하면 => ['ko', 'en'] 이렇게 나온다.

enum과 객체의 차이점

• object는 코드내에서 새로운 속성을 자유롭게 추가할 수 있지만, enum은 선언할 때 이후에 변경할 수 없다.
• object의 속성값은 JS가 허용하는 모든 타입이 올 수 있지만, enum의 속성값으로는 문자열 혹은 숫자만 허용된다.

Void

Java와 같은 언어와 유사하게 데이터가 없는 경우 void가 사용된다. 예를 들어 함수가 값을 반환하지 않으면 반환 유형으로 void를 지정할 수 있다.
타입이 없는 상태이며, any와 반대로 의미를 가진다.
void 소문자로 사용해야하며, 주로 함수의 리턴이 없을때 사용해주면 된다.

function sayHi(): void {
    console.log('Hi');
}
let speech: void = sayHi();
console.log(speech); // Output: undefined(함수의 리턴이 없어도 함수는 undefined를 결과물로 낸다)

Never

Typescript는 절대 발생하지 않을 나타내는 새 Type never를 도입했다.
Never유형은 어떤일이 절대 일어나지 않을 것이라고 확신할때 사용된다.
일반적으로 함수의 리턴 타입으로 사용된다. 함수의 리턴타입으로 never가 사용될 경우, 항상 오류를 리턴하거나 리턴값을 절대로 내보내지 않음을 의미한다. 이는 무한 루프에 빠지는것과 같다.

function throwError(errorMsg: string): never {
    throw new Error(errorMsg);
}

function keepProcessing(): never {
    while(true) {
        console.log('I always do something and never ends. ')
    }
}

void와 never의 차이
void유형은 값으로 undefined이나 null값을 가질 수 있으며
never은 어떠한 값도 가질 수 없다.

let something: void = null;
let nothing: never = null; // Error: Type 'null' is not assignable to type 'never'

Typescript에서 값을 리턴하지 않는 함수는 실제로 undefined를 반환한다.

function sayHi(): void {
    console.log('Hi');
}
let speech: void = sayHi();
console.log(speech); // Output: undefined

sayHi함수는 반환 유형이 void인 경우에도 내부적으로 undefined를 반환하기 때문에 speech는 undefined가 된다. Never유형을 사용하는 경우 void는 never에 할당할 수 없기 때문에 speech:never는 컴파일 시간오류를 발생시킨다.

Union

Typescript를 사용하면 변수 또는 함수 매개변수에 대해 둘 이상의 데이터 유형을 사용할 수 있다. 이것을 유니온타입이라고 한다.

let code: (string: number);
code = 123; // ok
code = "abc"; // ok
code = false; // compiler error

Tuple

튜플은 'number | string'은 숫자와 문자열 값만 저장할 수 있다.