1. TypeScript란 무엇인가?

자바스크립트의 경우 동적 타입 언어(Dynamic Typing)이기 때문에 런타임 속도는 빠르지만 안정성이 보장되지 않는다. 따라서 타입스크립트는 자바스크립트의 이러한 단점을 보완하기 위해 만들어 졌고 "확장된 자바스크립트"라고 생각할 수 있다.(JavaScript + Type문법)

2. TypeScript 사용하는 이유

(1) 안정성을 위해서

첫번째 예시에서는 숫자 - 숫자를 두번째는 숫자 - 문자열을 확인할 수 있다. 여기서 중요한 것은 자바스크립트가 두가지 예시가 모두 2 라는 숫자를 출력했다는 것이다.

이는 자바스크립트가 동적 타입 언어의 특징 때문에 일어나는 현상이다. 이는 얼핏보면 자유도가 높아 보이지만 코드가 쌓일 수록 아주 안좋은 현상으로 받아들여지게 된다고 한다.

이러한 현상을 막기 위해 타입스크립트를 사용하게 되고, 타입스크립트는 이를 엄격히 검사해 에러를 출력해준다.

(2) 에러메세지가 정확해진다.

첫번째는 counter 변수가 숫자를 할당받았는데 문자열을 집어넣어 나타나는 에러를 보여주는데 "Type string is not assignable to type number" 라고 정확히 명시해주었음.

두번째는 오타를 확인해서 에러를 나타내어주는 모습을 확인할 수 있다.

출처 : 코딩애플 - 타입스크립트를 쓰는이유 & 필수 문법 10분정리(https://www.youtube.com/watch?v=xkpcNolC270&t=31s)

3. TypeScript 문법

(1) 간단한 변수 타입지정

let name : string = "경훈"
name = "정" // 가넝
name = 1234  // ERROR!

(2) Array 타입 지정

let name : string[] = ["경훈", "정"]

let name : string[] = ["123","정"] // ERROR!

(3) Object 타입 지정

let name : { lastName : string} = {lastName : "정"}

만약, 속성에 대한 옵션을 주려면? 

let name : {lastName ? : string} = {lastName : "정"}

(4) Union type

let name : string | number = "정"
let name : string [] | number = 1234

(5) Type alias(타입을 변수에 담아 사용)

type StrNum = string | number 
(변수를 만들 때 대문자로 만들어야함 -> 일반변수와의 차별화)

let name : StrNum = 123

(6) 함수에 타입 지정하기

파라미터에 타입 지정하기

function userName(name : string){
  return name
}

리턴 값 타입체크하기

function sumNumber(x : number) : number {
  return x+5
}

sumNumber("123") // ERROR!

(7) tuple type

  ----------Array에서 사용함-----------------

type Member = [number, boolean];
// 첫번째는 number, 두번째는 boolean이 무조건 들어와야함

let john : Member = [123,true]

let john : Member = ["123",true] // ERROR

(8) Object에 타입지정해야할 속성이 많을 때

type Member = {
  [key : string] : string,
}

let john : Member = {name : 'kim', age : '123'}

(9) class 타입지정 가능

class User {
  name : string;
    constructor(name : string){
      this.name = name;
    }
}

이 외에도 TypeScript에 대한 다양한 기능과 문법 그리고 규칙이 있다고 한다. 따로 시간을 내어 조금 더 깊게 공부해야 할 듯 하다.

출처 코딩애플 - 타입스크립트를 쓰는이유 & 필수 문법 10분정리

https://www.youtube.com/watch?v=xkpcNolC270&t=31s