💻 Typescript

⚠️ 정리한 내용은 오타나 잘못된 정보가 있을 수 있습니다. 댓글로 알려주시면 감사하겠습니다.

타입스크립트 문법

1. 타입 주석과 타입 추론

• 타입 주석: 변수, 상수 혹은 반환 값이 무슨 차입인지를 나타내는 것을 의미
• 타입 추론: 해당 변수가 어떤 타입인지 추론하는 것, 생략하면 컴파일 타임에 알아낸다.

let a: number = 1
let b = 2
let c: boolean = false
let d: string = 'TypeScript'
let f = { a: 1 }
f.a = 2
f.b = 3 // 불가능

let f: number[] = []
h.push(1) // 가능
h.push('a') // 불가능

let i: 'good' : 'good' // i라는 변수는 good만 가능하다.
let g: any = 3 //js에서 했듯이 아무 값이나 들어갈 수 있다.

function add(a: number, b: number): number {
  return a + b
}
console.log(add(1,3)) // 4

2. 인터페이스

• 객체의 타입을 정의하는 방법.
• interface라는 키워드로 가능하다.

interface Company {
  name: string
  age: number
  address?: string // ?를 붙이면 선택 속성이 됨 (optional이라 부름)
}

const kakao: Company = {
  name: 'kakao',
  age: 10,
  address: 'Seoul', // 안 넣어도 에러가 나지 않음(?를 붙여서)
}
console.log(kakao) // 정상 출력

// 익명 인터페이스
const person: {
  name: string
  age?: number
} = {
  name: 'Sugyeong',
  age: 100,
}

3. tuple

• 배열을 tuple로 이용하는 방법

const tuple: [string, number] = ['Sugyeong', 100]
console.log(tuple) // ['Sugyeong', 100]

4. enum

• 열거형을 사용

enum Color {
  RED,
  GREEN,
  BLUE,
}

const color = Color.BLUE
// if(color === Color.BLUE ){

// }
enum Color {
  RED = 'red',
  GREEN = 'green',
  BLUE = 'blue',
}

5. 대수 타입

• 여러 자료형의 값을 가질 수 있게 하는 방법
• 합집합 타입과 교집합 타입이 있다.

let numOrStr: number | string = 1 // number 혹은 string이 들어갈 수 있다.

let numAndStr: number & string = '' // 원시 타입에서 사용할 수는 없다.

interface Name {
  name: string
}

interface Age {
  age: string
}

let sunhyoup: Name & Age = {
  // 값을 둘 다 넣어줘야함
  name: 'Sugyeong',
  age: 100,
}

type Person = Name & Age
let julia: Person = {
  name: 'julia',
  age: 100,
}

6. Optional

• ES 2021에도 추가된 기능, 타입스크립트는 이미 있었다.

interface Post {
  title: string
  content: string
}

interface ResponseData {
  post?: Post
  message?: string
  status: number
}

const response: ResponseData[] = [
  {
    post: {
      title: 'Hello',
      content: 'Hi~'
    },
    status: 200
  },
  {
    message: 'Error!'
    status: 500
  }
]

console.log(response[0].post.title) // Hello
console.log(response[1].post?.title) // 데이터가 없다면 자동으로 undefined를 반환한다.

7. Generic

• 하나의 인터페이스로 여러 타입을 이용할 수 있게 하는 방법

interface Value<T> {
  value: T
}

const value: Value<number> = {
  value: 1,
}

const value: Value<string> = {
  value: '1',
}

function toString<T>(a: T): string {
  return `${a}`
}

console.log(toString<string>('5'))

8. Partial, Required, Pick, Omit

• 기존 interface를 재활용 할 수 있게 만든다.

interface User {
  id: number
  name: string
  age: number
  address: string
  createAt?: string
  updateAt?: string
}

// 모든 필드가 Optional이 된다.
const partial: Partial<User> = {}

// 모든 필드가 Required가 된다.
const required: Required<User> = {
  id: 1
  name: 'Lee'
  age: 10
  address: 'Seoul'
  createAt: '',
  updateAt: ''
}

// 특정 필드만 골라서 사용할 수 있다.
const pick: Pick<User, 'name' | 'age'> = {
  name: ''
  age: '10'
}

// 특정 필드만 빼고 사용할 수 있다.
const omit: Omit<User, 'id' | 'createAt' | 'updateAt'> = {
  name: ''
  age: '10'
  address: 'Seoul'
}

//
const mixed: Omit<User, 'id' | 'address' | 'age' | 'createAt' | 'updateAt'> & Pick<Partial<User>, 'address' | 'age'> = {
  name: ''
}

9. extends

• 특정 인터페이스를 상속받아 인터페이스를 확장할 수 있다.

interface Time {
  hour: number
  minute: number
  second: number
}

interface DateTime extends Time {
  year: number
  month: number
  day: number
}

interface OffsetDateTime extends DateTime {
  offset: number
}

interface OffsetDateTime extends DateTime {
  zoneId: string
}

interface TimeFormat extends Pick<Time, 'hour' | 'minute'> {
  ampm: 'am' | 'pm'
}

const timeFormat: TimeFormat = {
  hour: 10
  minute: 30
  ampm: 'am'
}

🔥 느낀점

중간 프로젝트가 끝나고 바로 다음날부터 다시 강의듣는 삶을 시작하였다🥲 오늘은 typescript에 대해서 배웠는데 아직 좀 먼 얘기로 들렸다.

이런식으로 정의하고 사용하는 거였구나~라고 인지정도 한 것 같다. 자주 써가면서 익숙해지도록 노력해야지! 아자아자!!

Refer

• 프로그래머스 데브코스