타입스크립트 학습 정리

학습하기 위해서 정리하는 것이기 때문에 빈 개념들이 있을 수 있습니다.

 

타입 적용 방법

타입 종류 - number, string, unknown, any, [], {}, interface 등 / 클래스의 타입(ex. blob, file, htmlElement, 등)

타입 추론 - 파라미터 기본값 설정, 변수 초기화, 함수 반환 값

타입 단언 - as, ! (Non-null) / 단언이 잘못 되면 에러 발생

타입 가드 - 조건문을 통해서 값이 null, undefined, 등이 나오지 않도록 처리 /  typeof, instanceof 등 사용

 

인터페이스

 호출 시그니처

interface getCount {
  (items: string[]): number
}

화살표 함수 사용

interface IUser {
  name: string
  getAge: (birth: Date) => number
}

인덱스 시그니처

interface IProject {
  [ key: string ]: string
}

interface 상속

interface IPerson {
  name: string,
  gender: string,
  age: number,
}

interface ITeacher extends IPerson {
  subject: string,
  year: number
}

함수 타입 오버로딩

function add(a: string, b: string): string
function add(a: number, b: number): number
function add(a: any, b: any) {
  return a + b
}

this 명시적 바인딩 시 타입

interface IPerson {
  name: string,
  gender: "남성" | "여성",
  age: number
}

// this에 타입 지정
function getWelcome(this: IPerson) {
  console.log(`${this.name}님, 안녕하세요.`)
}

const user1: IPerson = {
  name: "유자차",
  gender: "남성",
  age: 20
}

// this 명시적 바인딩
getWelcome.call(user1)

 

클래스 접근 제어자

// 접근 제어자 public, protected, private

type TGender = "남자" | "여자" | "" = ""

class Person {
  public name: string = ""
  public gender: TGender = ""
  public age: number = 0

  constructor(name: string, gender: TGender, age: number) {
    this.name = name
    this.gender = gender
    this.age = age
  }
  
  getWelcome() {
    return `${this.name}님, 안녕하세요.`
  }
}

위와 동일하지만 간결한 코드

// 접근 제어자 public, protected, private

type TGender = "남자" | "여자" | "" = ""

class Person {
  constructor(
    public name: string = "",
    public gender: TGender = "", 
    public age: number = 0
  ) {}
  
  ...
}

제네릭 사용

// 함수 오버로딩 대신에 제네릭 사용, 클래스도 가능

function sumTwo<T>(a: T, b: T) {
  return a + b
}

sumTwo<string>("안", "녕") // 안녕
sumTwo<number>(1, 2) // 3

인터페이스 제약 조건

// T 자리에 string | number 만 가능하도록 설정
interface IProject<T extends string | number> {
  title: string
  content: string
  value: T
}