Typescript - Basic Type-1

★코딩하는 인문학도 ☆·2022년 3월 12일

<TypeScript -Basic type>

타입스크립트와 타입스크립트의 타입에 대해서 알아보자.
드림코딩 타입스크립트와 문서를 보면서 정리하였습니다.

TypeScript

What is Typescript?

타입스크립트는 MS 사에서 개발한 프로그래밍 언어로서 2012년 10월에 출시되었다. 오픈 소스 프로젝트 프로그래밍 언어로서 어느 자바스크립트가 동작하는 어느 브라우저나 호스트 운영체제에서도 동작한다.

TypeScript는 ES5의 Superset이므로 기존의 자바스크립트(ES5) 문법을 그대로 사용할 수 있다. 또한, ES6의 새로운 기능들을 사용하기 위해 Babel과 같은 별도 트랜스파일러(Transpiler)를 사용하지 않아도 ES6의 새로운 기능을 기존의 자바스크립트 엔진(현재의 브라우저 또는 Node.js)에서 실행할 수 있다.

https://poiemaweb.com/img/typescript-superset.png

Why Typescript?

자바스크립트(Javascript)는 dynamcially typed의 언어로서 런타임 때 타입이 결정되며 유연한 반면에 타입스크립트(typescript)는 statically typed 언어로 한번 결정된 타입은 바뀔 수 없고, 컴파일 과정에서 타입에 대한 오류를 발견하며 에러를 찾아낼 수 있다. 타입스크립트가 뜨는 이유가 여러가지가 있겠지만 크게 보면 2가지로 나눠 볼 수 있다.

타입 시스템을 지원함으로 자바스크립트의 타입을 확장하고 안정성을 보장함으로서 에러를 사전의 방지 할 수 있다.

function sum(a,b){
  return a + b;
}

sum(10,20);  // 30
sum('10','20'); //1020

function sum(a: number, b: number) {
  return a + b;
}

sum(10,20); // 30
sum('10','20'); // 1번

위의 예시는 간단한 숫자의 합을 구하는 함수로 자바스크립트와 타입 스크립트로 작성한 예시이다.

자바스크립트의 위의 예를 보면 문자열이 파라미터로 들어온다면, 문자열을 더해 1020이라는 문자열의 값이 나오는데 , 이는 우리가 의도한 흐름이 아닐 것이다. 반면에 타입스크립트로 작성했 을 시에 1번의 결과는 어떻게 나올까?

error TS2345: Argument of type 'string' is not assignable to parameter of type 'number'. 이런 에러가 나올 것이다.

컴파일 과정에서 오류가 나오면서 우리가 의도치 않은 코드의 동작을 예방 할 수 있다. 이 예시는 간단하지만, 비교적 큰 프로젝트나 작업과정에 있어서 확실하게 타입이 보장되면 어떤 파라미터가 들어오는 지도 유추가 가능하고, 이러한 의도한 흐름되로 코드를 작성하는데 도움을 줄 수 있다.

즉 , 컴파일 단계에서 오류를 포착할 수 있는 장점이 있으며, 명시적인 타입 지정은 개발자의 의도를 명확하게 코드로 기술할 수 있고, 코드의 가독성을 높이고 예측할 수 있게 하며 디버깅이 쉬워진다는 장점이 있다.

타입스크립트를 활용하면 객체지향 프로그래밍 (OOP)에 있어서 효율성이 더 높기 때문이다.

OOP의 원칙에 따라 객 체 위주로 모듈성 있는 코드를 작성할 수 있고, 모듈별로 원하는 부분을 재사용이 가능하다. 그리고 객체 단뒤로 프로그래밍 하면서 객체 단위로 작성하여 확장성을 높이고 유지보수성을 높일 수 있다.

Typescript Basic Type

Primitive 타입(윈시형 타입)

1-1. number

const num: number = 2022;

1-2. string

const str: string = 'hello wrold';

1-3. boolean

const bool: boolean = false;

1-4. undefined

undefined 로 선언된 변수에는 undefined 외에는 지정이 불가하기 때문에, 단독으로undefined 타입 지정은 해주지는 않는다.

let name: undefined; // 💩 not good -> useless
name = 'nike' // error

이처럼 name에 문자열을 할당하면 에러가 발생한다.

타입이 string일 수도 있고, undefined일 수도 있다면 union type을 사용하자.

let age: number | undefined;
age = undefined;
age = 1;

// 함수의 경우를 예시로 보면 아래 함수는 number를 리턴할 수도 있고, undefined를 리턴할 수도 있다.
const onlyOne = function (): number | undefined {
  return 1 || undefined;
};

1-5. null

null 타입도 undefined와 마찬가지로null 타입 지정을 일반적으로 단독적으로 해주지는 않는다.
null 은 undefined 와 비슷한 맥락으로 값이 없다는 것이지만 명시적으로(의도적으로) 값이 없음을 나타낸다.

let person: null; // 💩 not good -> useless poop code!
let person2: string | null;
person = null;
person2 = 'hello';

OtherBasic Type

1-6. unknown

어떠한 타입인지 알 수 없음을 의미 → 그러므로, 어떤 타입이든 지정이 된다.
이름만 들어도 너무 추상적이기 때문에 가능한 사용을 지양해야 하며, 자바스크립트의 라이브러리르 이용하는 경우 리턴하는 타입을 모를 경우 사용 해볼 수는 있으나 unknown을 쓰기보다 구체적타입을 지정해주자 . 아예 쓰지말자라고 생각하고 사용을 하지 않는 것이 좋다.

let notSure: unknown = 0;
notSure = 'he';
notSure = true;

1-7. Any

어떠한 타입인지 알 수 없음을 의미하며 의미 그대로 아무 것이나 할당이 가능한 타입니다.
Unknown 타입과 비슷하게 사용을 지양하며, 함수의 경우 기본적으로 any타입이 할당된다.

let notSure: unknown = 0;
notSure = 'he';
notSure = true;

1-8. Void

함수의 경우 return 값이 없을때 void의 타입을 사용할 수 있다.
변수에 선언하는 경우는 극히 드물며 없다고 볼 수 있다.

  function print(): void {
    console.log('hello');
    return;
  }

let unusable:void = undefined; // 💩 not good -> useless poop code! void로 선언할 시 undefined만 할당이 가능하므로 활용도가 없다.

1-9. Never

void 타입과 다른 점은 return 자체를 하지 않는 다는 것이다.

// 예를 들어 에러 핸들링의 경우, 
function throwError(message: string): never {
    // message -> server (log)
    throw new Error(message);
    while (true) {} // 무한 반복문의 경우
  }

1-10. Object

Primitive 타입이 아닌 Object의 타입의 모두를 지정 할 수 있다.
object의 경우 광범위하며 추상적이기 때문에 좀 더 구체적으로 명시해서 타입을 지정 해주는 것이 좋다.

   // objet
  let obj: object; // 💩
	let objTest: objct = [1,2,3];
obj = { test: 'test'}
  function acceptSomeObject(obj: object) {}
  acceptSomeObject({ name: 'ellie' });
  acceptSomeObject({ animal: 'dog' });