3. Object Type

 

 

How to use Object Type

• 함수의 파라미터로 객체 타입 입력

/**
const printName = (first: string, last: string) => {
	return `Her name is ${last} ${first}`
}
**/

const printName = (name: { first: string, last: string }) => {
	return `Her name is ${name.last} ${name.first}`
}

printName({ first: 'SEO', last: 'HYEJIN' })

 

• 객체 타입 변수 선언
• 객체의 key 이름과 타입을 맞춰줘야 함

let coordinate: { x: number, y: number } = { x: 34, y: 2 }

 

• 함수에서 객체 타입 반환
• 반환하는 객체의 key 이름과 타입을 맞춰줘야 함

const randomCoordinate = (): { x: number, y: number } => {
	return Math.random() // ERROR - not object type
	return { x: Math.random(), y: Math.random() }
}

 

 

 

Over Properties of Function Object

• 함수의 객체 파라미터에 초과된 속성을 넣는 경우
• 하단 CASE1. 직접 객체 리터럴 전달 -> 전달된 속성들을 모두 검사해서 불필요한 속성들 ERROR
• 하단 CASE2. 새롭게 선언한 객체 변수 전달 -> 함수에서 지정한 속성들만 전달 되었는지 확인 -> OK

// CASE1. ERROR
const printName = (name: { first: string, last: string }) => {
	return `Her name is ${name.last} ${name.first}`
}

printName({ first: 'SEO', last: 'HYEJIN', age: 52 })

// CASE2. OK
let params = {
	first: 'SEO',
    last: 'HYEJIN',
    age: 52
}
printName(params)

 

 

 

Type Alias (타입 별칭) - Custom Type

• 사용 빈도가 높은 객체 타입에 별칭 지정
• type Keyword = { ... }
• type의 속성에 명확한 타입(number / string / boolean 등) 명시

type TestType = number

let tempNum: TestType = 123344 // OK
tempNum = 'Hi, Typescript' // ERROR - tempNum is number

/**
function doublePoint (point: { x: number, y: number }): { x: number, y: number } {
	return { x: point.x * 2, y: point.y * 2 }
}
**/

type Point = {
	x: number,
    	y: number
}
function doublePoint (params: Point): Point {
	return { x: params.x * 2, y: params.y * 2 }
}

 

 

 

선택적 속성 (Property)

• 특정 객체 속성을 필수가 아닌 선택적으로 선언
• 선택적으로 선언하고 싶은 속성 뒤에 ? 추가

type Point = {
	x: number,
    y: number,
    z?: number
}

let myPoint: Point = { x: 1, y: 3, z: 2 } // OK
let myPoint2: Point = { x: 1, y: 3 } // OK
let myPoint3: Point = { x: 1, z: 3 } // ERROR - y is neccesary

 

 

 

ReadOnly

• 읽기 전용 속성 선언 - 변경 불가
• 속성 앞에 readonly 추가

type Users = {
	readonly id: number,
    username: string
}

let user: Users = {
	id: 123456,
    username: 'Erik'
}
user.id = 456789 // ERROR - id is ReadOnly
user.username = 'Max' // OK

 

 

 

교차 타입 (Intersection Type)

• & 을 사용하여 새로운 타입 생성

type Cat = { numLives: number }
type Dog = { breed: string }

type CatDog = Cat & Dog // { numLives: number, breed: string }
type NewCatDog = Cat & Dog & { age: number } // { numLives: number, breed: string, age: number }