타입스크립트 학습

타입스크립트 기본개념들을 정리하기
타입스크립트에 익숙해지면 타입스크립트없이 개발을 하기힘들정도로 좋다고한다. 그만큼 편리하다고한다. 그 편리함을 느끼기위해 타입스크립트에 익숙해지기위한 도전기

타입스크립트란??

프로그래밍 언어이다 자바스크립트와 호환되는 언어인데 자바스크립트 위에 타입스크립트 문법을 추가한 언어

타입스크립트에서 프로그램 작성을 위해 기본 제공하는 데이터 타입

사용자가 만든 타입은 이 기본 자료형들로 쪼개진다

• boolean
• number
• string
• null
• undefined
• symbol
• array: object 프로그래밍을 도울 몇가지 타입이 더 제공된다 함수의 리턴에 주로 사용함
• any 어떤 타입이어도 상관없는 타입 애니를 최대한 쓰지 않는게 핵심
• void 타입이 없는 상태 any와 반대의 의미를 가짐 주로 함수 리턴이 없을 때 사용한다.
• never 리턴에 주로 사용되며 잘 사용하지 않음
• enum c언어의 enum과 같은데 enum의 결과값은 스트링이다.
• tupe: object형 배열인데 타입이 한가지가 아닌 경우 꺼내 사용할때 주의가 필요하다

interface

타입을 정해주는 변수를 선언해주는느낌이다.

const person: { name: string; age: number } = {
  name: '재영',
  age: 25,
}

인터페이스가 없다면 같은 타입을 사용하는 곳마다 name의 타입과 age의 타입을지정해주는 객체를 계속 선언해줘야한다.
인터페이스 사용 후

interface Person {
  name: string
  age: number
}
const person: Person = {
  name: '재영',
  age: 25,
}

선택적으로 값이 들어와야 한다면??

interface Person {
  name: string
  age?: number
}

age뒤에 ?를 추가하면 age는 반드시 있어야하는 속성이 아니라 age가 없더라도 에러가 나지 않는다.

type alias

타입 별명
타입을 변수에 넣어서 그 변수를 사용하는 느낌이다.
인터페이스랑 유사함 만들어진 타입의 참조로 사용하는 것이지 타입을 만드는것은 아니다.

class implements interface

interface IPerson {
  name: string
  age?: number
}

class Person implements IPerson {
  name: string

  constructor(name: string) {
    this.name = name
  }
}

const person = new Person('재영')

Person이라는 클래스가 IPerson이라는 타입정의를 사용한다…

interface extends interface

interface Person {
  name: string
  age?: number
}

interface Korean extends Person {
  city: string
}

const k: Korean = {
  name: '재영이',
  city: '서울',
}

위 예제처럼 interface가 타interface의 타입을 상속받을 수 있다.

generic

funtion func(message:string): string {
  return message
}

funtion func(message:number): number {
  return message
}

위와같이 같은 형태지만 타입만 다를경우 any를 사용할게 아니라면 같은 형태를 반복하여 정의를 해주어야한다.

function hello<T>(message: T): T {
  return message
}

any를 사용하면 할 수 있지만 타입추론이 깨지므로 타입스크립트를 사용하는 의미가 없어진다. 위와같이 제너릭을 활용하여 반복작업을 줄일 수 있다.

class Person<T> {
  constructor(name: T) P
  this.name = name
}

객체와 객체의 키를 인자로 받고 값을 반환하는 함수

function getProperty(obj, key) {
  return obj[key]
}

불분명한 키가 들어왔을때 undefined가 반환되어 문제가 생길여지가 있디.

function getProperty<T, K extends keyof T>(obj: T, key: K) {
  return obj[key]
}

이렇게 제너릭을 활용하면 객체의 값을 매칭 시킬 수 있다. 타입가드

interface Person {
  name: string;
  age: number;
}

interface Car {
  brand: string;
  wheel: number;
}

function isPerson(arg: any) arg is Person {
  return arg.name !== undefined
}

function hello(obj: Person | Car) {
  if (isPerson(obj)) {
    obj.age //....
  } else {
    obj.brand //....
  }
}

Person 인터페이스와 Car 인터페이스를 받는 hello라는 함수가 있는데 어떤 타입이 들어올지 모른다면 isPerson과 같이 타입가드 함수를 작성하여 활용할 수 있다.
isPerson함수를 조건문에 사용해서 hello 함수에 Person타입이 들어올때 가정을하고 Car타입이 들어올때 가정을 한다.