TypeScript

is strongly typed programming language that builds on JavaScript!

Type

기본자료형

: 실제 값을 저장

• string, boolean, number, null, undefined, symbol

참조 자료형

: 메모리에 값을 주소로 저장하였다가 출력시에 해당 주소와 일치하는 값 출력

• array, function, object

추가 제공 자료형

: 개발자 편의를 위한 자료 타입

• any, enum, never, tuple, unknown, void

unknown

: 변수의 타입을 미리 알지 못할 때 사용

const a:unknown

if(typeof a === "string") {
  
}

이런식으로 어떤 타입이냐에따라 조건 처리하기도 함

void

: 아무것도 리턴하지 않는 함수로 보통의 경우 따로 void를 지정해줄 필요는 없다

never

: 많이 사용하지는 않지만 함수가 절대 return하지 않을 때 발생

Function

Call Signature

: 함수위에 마우스 올렸을때 보이는거

Overloading

: 함수가 여러개의 call signature를 갖고 있을 때 발생

Polymorphism

:다형성! 다른 모양의 코드, 다형성을 이룰수 있는 방법 = 제네릭 사용(제네릭은 placeholder 타입 사용 가능)

Generic

= 타입의 placeholder
call signature 작성할 때, 확실한 타입을 모를때 generic 사용
코드를 작성할 때가 아니라 수행할 때 타입 명시

why do I use generic?

• 재사용성이 높은 함수와 클래스 생성
  - 한번 선언해서 다양한 타입에 재사용 가능 + 가독성 ⬆️
• 에러 잡기 편리
  - any 와는 다르게 타입을 체크해서 컴파일러가 오류 찾기 가능

How to use generic?

: tell TS that you want to use generic

type exFunc = {
  <T>(arr: T[]):void
}

T라는 이름대신 아무거나 가능. 그런데 보통 T, V 이런거 사용

Interface

: 타입과 비슷하지만 차이점 존재!
타입은 원하는 모든게 될수 있음(string, number 이런거 말고 특정 값도 지정 가능)
인터페이스는 오브젝트 모양 정해주기만 가능(=type과의 공통점, 리액트에서 자주 봄)
type > interface 이며 클래스를 다루는 느낌

Interface is a keyword only use when you want to specify explain to TS the shape of an object.

interface Dog {
  name: string;
}

interface Animal extends Dog {
}

위의 interface 표현을 type으로 할수 있음 대신 상속 표현하는부분이 차이있음

type Dog = {
  name: string;
}

type Animal = Dog & {
}

Abstract Class, Interface 비교

• 추상클래스는 js로 컴파일하면 일반적인 클래스로 추가되면서 생성되기 때문에 파일 크기가 커짐

  abstract class Person {
    constructor (
      protected firstName: string,
      protected lastName: string
    ){}
    abstract fullName(): string
  } 
  //추상클래스는 이걸 상속받는 다른 클래스가 가질 프로퍼티와 메소드를 지정하도록 해준다.
  
  class Student extends Person {
    fullName(){
      return `${this.firstName} ${this.lastName}`
    }
  }

• 인터페이스는 컴파일하면 js로 바뀌지 않고 사라지기 때문에 더 가벼움

  interface Person {
    firstName: string,
    lastName: string,
    fullName(): string
  }
  
  class Student implements Person {
    constructor(public firstName: string, public lastName: string) {}
    fullName() {
      return `${this.firstName} ${this.lastName}`;
    }
  }

Constructor

: 모든 클래스는 Constructor라는 메소드를 가지는데 이는 클래스로부터 객체를 생성할 때 호출되며 객체의 초기화 담당