🔵 TypeScript란?

• 타입스크립트는 자바스크립트에 타입을 부여한 언어이다.
  자바스크립트의 확장된 언어라고 볼 수 있다.

• 타입스크립트는 자바스크립트와 달리 브라우저에서 실행하려면 파일을 한번 변환해주어야 한다.
  이 변환 과정을 우리는 컴파일(complile) 이라고 부른다.

• JavaScript에 정적타입 검사와 클래스 기반 객체 지향 프로그래밍 등의 기능을 추가하여 개발된 언어로, JavaScript가 발전하면서 생긴 단점을 보완하기 위해 등장하게 되었다.

타입 설정을 하는 이유는 뭘까?

• "도로 차선" 예시를 들어보자. 각 차로에 제한을 두지 않고 자유롭게 차로를 이용할 수 있다면 편할 것이다.
  하지만 자유로운 만큼 사고가 발생할 확률 또한 커진다.
  하지만 각 차로에 접근 가능한 차량에 제한을 둠에 따라, 다소 제약이 따르긴 하지만 사고를 미연에 방지할 수 있다.

• 프로그래밍 작성 시, 타입 지정이 없다면 편하게 코드를 짤 수 있지만 작성한 코드에 문제가 발생할 확률이 높다.
  반면 타입을 지정하게 되면 잘못된 것을 사전에 확인할 수 있어 미연에 사고를 방지할 수 있어 유용하다.

TypeScript를 사용했을 시 장점

• TypeScript는 정적타입 검사 기능을 제공하며, 코드의 가독성과 유지 보수성을 높여준다.
  이를 통해 개발자는 런타임 에러를 최소화하고, 코드 작성 시간을 단축하며, 협업 시 코드의 가독성을 높일 수 있다.

• 또한 TypeScript는 ES6의 문법을 포함한 최신 JavaScript 문법을 지원하며, 인터페이스(Interface), 제네릭(Generic), 데코레이터(Decorators) 등의 기능을 제공하여 객체 지향 프로그래밍을 보다 쉽게 할 수 있도록 도와준다.

🔵 TypeScript 기본 타입

---

• 타입스크립트로 변수나 함수와 같은 자바스크립 코드에 타입을 정의할 수 있다.
  타입스크립트의 기본 타입에는 크게 12가지가 있다.

  • Boolean
  • Number
  • String
  • Object
  • Array
  • Tuple
  • Enum
  • Any
  • Void
  • Null
  • Undefined
  • Never

1. Boolean(불리언) 타입

---

• 가장 기본적인 데이터 타입은 JavaScript, TypeScript에서 boolean 값이라고 일컫는 참/거짓(true/false) 값이다.

  let isShow: boolean = true;
  let isDone: boolean = false;

  • 위와 같이 :를 이용하여 자바스크립트 코드에 타입을 정의하는 방식을 타입 표기(Type Annotation)라고 한다.

2. Number(숫자) 타입

---

• JavaScript와 마찬가지로 TypeScript 또한 정수와 실수의 구분 없이 Number 타입 하나로 표기한다.

• TypeScript는 16진수, 10진수 리터럴에 더불어, ECMAScript 2015에 소개된 2진수, 8진수 리터럴도 지원한다.

  let number1: number = 5;
  let number2: number = 0.7;

3. String(문자열) 타입

---

• TypeScript는 JavaScript처럼 큰따옴표(")나 작은따옴표(')를 문자열 데이터를 감싸는데 사용한다.

• 또한 백틱(`)을 사용한 문자열인 템플릿 리터럴을 사용하면 여러 줄에 걸쳐 문자열을 작성할 수 있다.

  let firstName: string = "coding";
  let lastName: string = 'kim';
  let longString: string = `Kimcoding is a developer.
  He is 20 years old.`

4. Array(배열) 타입

---

• TypeScript는 JavaScript처럼 값들을 배열로 다룰 수 있게 할 수 있으며, 두 가지 방법으로 배열 타입을 선언해 사용할 수 있다.

• 배열 타입은 기본적으로 하나의 타입만 작성하게 되어 있으며, 타입을 혼용해서 작성하는 것은 불가능하다.

• 첫 번째 방법은 배열의 요소들을 나타내는 타입 뒤에 배열을 나타내는 []을 쓰는 것이다.

  //첫 번째 방법
  let items: string[] = ["apple", "banana", "grape"];

• 두 번째 방법은 제네릭 배열 타입을 사용하는 것이다.
  Array를 먼저 작성한 뒤, <> 안에 배열의 요소들을 나타내는 타입을 작성한다.

  //두 번째 방법
  let numberList: Array<number> = [4, 7, 100];

5. Tuple(튜플) 타입

---

• TypeScript에서 튜플 타입을 사용하면 요소의 타입과 개수가 고정된 배열을 표현할 수 있다.

  let user: [string, number, boolean] = ["kimcoding", 20, true];

• 모든 요소가 전부 같을 필요는 없지만, 배열의 index마다 타입이 정해져 있기 때문에 정확한 index에 접근할 필요가 있다.

  console.log(user[2].toString()); //error

  • 이렇게 user[2]에 접근하게 되면, user[2]에 있는 요소는 boolean 타입이기 때문에 타입 에러가 발생한다.

• JavaScript에서도 튜플 타입을 지원하며, JavaScript에서의 튜플 또한 여러 개의 값을 가진 배열을 나타내는 데에 사용한다.

• 그러나 JavaScript에서는 튜플 타입을 명시적으로 선언할 수 없기 때문에 개발자가 직접 튜플의 각 요소의 타입을 확인하고 유추해야 하므로 타입 에러가 더 쉽게 발생한다.
  TypeScript의 등장 배경 중 하나인 타입 에러를 방지하고자 한 이유 중 하나이기도 하다.

6. Object(객체) 타입

---

• TypeScript에서 객체는 JavaScript와 마찬가지로 원시 타입이 아닌 타입을 나타낸다.

• JavaScript에서 Object(객체) 타입은 프로퍼티를 가지는 JavaScript의 값을 말하며 typeof 연산자를 사용했을 때 “object”을 반환하는 모든 타입을 의미한다.

• JavaScript의 원시 타입에는 number, string, boolean, undefined, null, symbol이 있다.

  let obj: object = {};

• TypeScript에서 object 타입은 모든 객체를 수용하는 타입으로, 객체의 프로퍼티 타입들이 any로 지정되기 때문에 어떠한 프로퍼티라도 추가할 수 있다.
  그러나 이는 타입 안정성을 보장하지 않기 때문에 편하지만, 추천하는 방법은 아니다.

• 따라서 객체의 프로퍼티 타입들을 각기 명시해 주는 것이 훨씬 좋다.
  객체는 이런 방식으로 key-value에 구체적인 타입까지도 지정할 수 있다.

  let user: {name: string, age: number} = {
      name: "kimcoding",
      age: 20
  }

7. Any 타입

---

• 애플리케이션을 만들 때, 알지 못하는 타입을 표현해야 할 때도 있다.
  클라이언트에서 유저로부터 받은 데이터 및 서드파티 라이브러리에서 들어오는 값인 경우 개발자가 알지 못하는 타입일 수 있는데, 타입 검사를 하지 않고자 할 때 any 타입을 사용할 수 있다.

  let maybe: any = 4;

• any 타입을 사용하게 되면, 변수에 값을 재할당하는 경우 타입을 명시한 변수와 달리 타입에 구애받지 않고 값을 재할당할 수 있게 된다.

  let obj: object = {};
  
  // 에러가 난다.
  obj = "hello";
  
  let maybe: any = 4;
  
  // 정상적으로 동작한다.
  maybe = true;

• 또한 엄격한 타입 검사를 진행하지 않기 때문에, 실제 할당된 값이 가지지 않는 메서드 및 프로퍼티로 접근해도 에러가 나지 않는다.
  대신, 실제 할당된 값이 가지지 않는 메서드 및 프로퍼티이기 때문에 반환되는 값은 undefined이다.

  let maybe: any = 4;
  
  // undefined로 출력된다.
  console.log(maybe.length);

• 또한 any 타입은 타입의 일부만 알고, 전체는 알지 못할 때 유용하다.
  예를 들어서 여러 타입이 섞인 배열을 받고자 할 때 유용하다.

  let list: any[] = [1, true, "free"];
  
  // any로 다루고 있기 때문에 index 1번째 요소가 boolean 타입이지만 number 타입으로 재할당할 수 있다. 
  list[1] = 100;

8. Void 타입

• void는 어떤 타입도 존재할 수 없음을 나타내기 때문에, any의 반대 타입 같다.

• void는 보통 함수에서 반환 값이 없을 때 반환 타입을 표현하기 위해 쓰이는 것을 볼 수 있다.

  function warnUser(): void {
      console.log("This is my warning message");
  }