타입스크립트(typeScript) 정의, 쓰는이유, 기본 타입들 정리해보기

타입스크립트란

타입스크립트는 자바스크립트에 타입을 부여한 언어이다

자바스크립트의 확장된 언어라고 볼 수 있다

---

왜 타입스크립트를 써야할까

1. 에러의 사전 방지

TypeScript는 정적 타입을 지원하므로 컴파일 단계에서 오류를 포착할 수 있는 장점이 있다

아래와 같이 의도하지 않은 코드의 동작을 예방할수 있다

// math.js
function sum(a, b) {
  return a + b;
}
sum(10, 20); // 30
sum('10', '20'); // 1020

// math.ts
function sum(a: number, b: number) {
  return a + b;
}
sum('10', '20'); // Error: '10'은 number에 할당될 수 없습니다.

2. 코드 자동 완성과 가이드

js 로 작성할시 total이라는 변수의 타입이 코드를 작성하는 시점에 number 라는 것을 자바스크립트가 인지하지 못하고있어서 미리보기가 안뜨게 된다

// math.js
function sum(a, b) {
  return a + b;
}
var total = sum(10, 20);
total.toLocaleString();

하지만 ts는 변수 total에 대한 타입이 지정되어 있기 때문에 VSCode에서 해당 타입에 대한 API를 미리 보기로 띄워줄 수 있다

function sum(a: number, b: number): number {
  return a + b;
}
var total = sum(10, 20);
total.toLocaleString();

---

기본 타입

String , Number , Boolean

let str: string = 'hi';
let num: number = 10;
let isLoggedIn: boolean = false;

Object

타입을 object로 정의하면, any 타입처럼 모든 타입의 값을 할당할 수 있다

const MyStatus: object = { name: 'types', age: 2022 };

Array

let arr: number[] = [1,2,3];
let arr: Array<number> = [1,2,3];

Tuple

튜플은 배열의 길이가 고정되고 각 요소의 타입이 지정되어 있는 배열 형식을 의믜한다

let arr: [string, number] = ['hi', 10];

Enum

특정 값(상수)들의 집합을 의미한다

숫자 열거형

enum MyStatus {
  sleep,
  study,
  play,
  work,
}
console.log(MyStatus.study) //1

문자 열거형

enum MyStatus {
    sleep = '자는중';
    study = '공부하는중';
    play = '노는중';
    work = '일하는중';
};
console.log(MyStatus.study) // 공부하는중

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

Any

모든 타입에 대해서 허용한다는 의미를 갖고 있다

Void

변수에는 undefined와 null만 할당하고, 함수에는 반환 값을 설정할 수 없는 타입이다

function 함수(): void {
  console.log('보이드');
}

Null and Undefined

Never

값을 리턴하지 않을 때 사용한다.

// 이 함수는 절대 함수의 끝까지 실행되지 않는다는 의미
function neverEnd(): never {
  while (true) {

  }
}