타입스크립트3. 데이터 타입(1)

목차

1. 기본적인 타입
2. 선택적 타입(객체, Alias)
3. 함수의 타입 명시(함수 선언, 화살표 함수)
4. readonly(읽기 전용) 속성 추가

 

 

---

 

 

 

1. 기본적인 타입

let a : number = 1;	// number
let a : number[] = [1,2];	// 배열의 엘리먼트가 number 인 array

let b : string = "il";	//string
let b : string[] = [];	// 배열의 엘리먼트가 string 인 array

let c : boolean = true;	// boolean
let c : boolean[] = [true]; // 배열의 엘리먼트가 boolean 인 array

 

 

 

2. 선택적 타입

어떤 객체가 있다고 할 때,

객체의 어떠한 속성은 모든 객체가 동일하게 보유하고 있는 속성

어떤 속성은 특정 객체들만 보유하고 있는 선택적 변수일 수도 있다.

 

코드를 통해 자세히 알아보자.

 

 

2-1 객체의 타입을 명시적으로 지정

// 틀린 예시
const player : {
	name: string,		// player의 타입은 객체이며, string 타입의 name이라는 속성을 가질 것이다.
	age: number		// player의 타입은 객체이며, number 타입의 age라는 속성을 가질 것이다
} = {
	name: 'ivy'	// age 속성을 부여하지 않았기 때문에 에러 발생
}




// 옳은 예시
const player : {
	name: string,		// player의 타입은 객체이며, string 타입의 name이라는 속성을 가질 것이다.
	age?: number		// player의 타입은 객체이며, number 타입의 age라는 "선택적인" 속성을 가질 것이다
} = {
	name: 'ivy'	// age는 선택적 속성이기 떄문에 객체 생성 시 속성 부여하지 않아도 에러 발생하지 않음
}



//틀린 예시
if(player.age < 10){	// age 선택적인 속성이므로 값이 undefined 일 수도 있기 때문에 에러 발생
}


//옳은 예시
if(player.age && player.age < 10){
	// player에 age 속성이 있으며, 속성값이 10보다 작은 경우 코드 실행
}

 

 

 

 

2-2. Alias 타입을 통한 코드의 재사용

type Player = {
	name: string,
    dob?: number
} 

const player1 : Player = {	// 객체의 타입을 Player로 명시
	name: 'Son',
    dob: 19920708
}

const player2 : Player = {	// 객체의 타입을 Player로 명시
	name: 'Kane'
}

 

 

 

참고로 아래와 같은 방법도 가능하지만, 아래와 같이 과도하게 재사용하는 것은 그다지 추천하지 않는다.

Alias 타입의 사용은 코드가 명확하고 깔끔해질 때까지만 하면된다.

다만 아래와 같은 방법도 가능하다는 것만 알아두자.

 

 

 

type Name = string;
type Dob = number;



type Player = {
	name: Name,
    dob?: Dob
}

 

 

이번엔 함수의 return 값을 지정해보자

함수가 리턴하는 값이 어떤 타입인 지 알게되면

자동완성 기능과 더 많은 보호 장치를 줄것이다.

 

 

player의 객체를 만들고 그 결과 player를 반환하는 함수를 만들어보자.

 

 

 

 

 

3. 함수의 타입 명시

• 인자값에 대한 타입 명시
• return값에 대한 타입 명시

 

3-1. 함수 선언의 방식

type Player = {
	name: string,
    dob?: number
}

// Player는 객체이며 속성값이 문자열인 name 속성과 속성값이 number인 선택적 속성 dob를 가지고 있다고 할때,
// playerMaker라는 함수를 이용해서 Player 객체를 리턴해보자


//틀린 예시
function playerMaker(name:string){	// 인자값의 타입을 지정
	return {
    	name
    }
}
const player1 = playerMaker('son')
player1.age = 30	// 에러 발생

// 위와 같이 작성한다면 타입스크립트는 타입이 name인 속성을 가지고 있는 객체를 리턴한다는 것만을 알게 된다.
// 따라서 age 속성에 값을 줘버리면 에러가 발생한다.


// 옳은 예시
function playerMaker(name:string) : Player{	// 인자값 및 함수의 return에 대한 타입을 지정
	return{
		name    
    }
}

const player1 = playerMaker('son')
player1.age = 30

 

 

 

3-2. 화살표 함수

const playerMaker = (name:string) : Player => ({name})	//동 일한 문법으로 : Player라고 작성해주면된다.

 

 

 

 

4. readonly 속성 추가

• readonly 속성 추가 시, 속성값을 수정하려고 시도하면 에러 발생
• readonly속성을 가지게 되면 해당 속성은 불변성을(immutable)을 가지게 됨

 

객체의 속성에 readonly 속성을 부여할 겨웅

type Player = {
	readonly name: string,	// readonly 속성 추가
    age? number
}

const playerMaker = (name:string) : Plyaer => ({name})

const player1 = playerMaker({'Son'})
player1.name = 'Kane'	// 에러 발생

 

배열에 readonly 속성 부여할 경우

• map과 filter 같이 배열을 변화시키지 않는 메서드는 사용 가능

const numbers: readonly number[] = [1,2,3,4]
numbers.push(1)	//에러 발생