ts공부하기) 인터페이스2 - 읽기전용속성, 객체선언 타입체킹

어제의 인터페이스에 이은 글. 옵션속성에 대해서 공부했다면 이번엔 읽기전용 속성부터 시작한다. 

 

읽기전용 속성

 

읽기 전용 속성은 인터페이스로 객체를 처음 생성할 때만 값을 할당하고 그 이후에는 변경할 수없는 속성을 의미한다.

readonly속성을 앞에 붙여서 사용한다. 

interface CraftBeer { 
	readonly brand: string;
}

//인터페이스로 객체 선언 후 수정을 시도하면 오류가 난다.
let myBeer: CraftBeer = {
	brand: 'blanc'
};
myBeer.brand = 'Most Favorite' // error!

 

 

읽기 전용 배열

배열 선언시 ReadonlyArray<T> 타입을 사용하면 읽기전용 배열이 생성 가능하다.

//다음과 같이 배열을 ReadonlyArray로 선언하면 배열의 내용을 변경할 수 없다.
//선언하는 시점에만 값을 정의할 수 있으니 주의할것.
let arr: ReadonlyArray<number> = [1,2,3];
arr.splice(0,1); //error
arr.push(4); //error
arr[0] = 100; //error

 

 

객체 선언과 관련된 타입체킹

타입스크립트는 인터페이스를 이용해서 객체를 선언할 때 좀 더 촘촘한 속성검사를 진행합니다. 

아래의 코드에서 CraftBeer 인터페이스에는 brand라고 선언되어 있지만 brewBeer() 함수에 인자로 넘기는 mybeer 객체에는 brandon이 선언되어있어 오탈자 오류가 난다. 

interface CraftBeer {
	brand?: string;
}

function brewBeer(beer: CraftBeer){
	// ..~~
}
brewBeer({ brandon: 'what' }); //오탈자 에러

//타입추론을 무시하고 싶다면 아래와 같이 선언한다.
let myBerr = {brandon: 'What'};
brewBeer(myBeer as CraftBeer);

//만약 인터페이스를 정의하지 않은 속성들을 추가로 사용하고 싶을때는 아래와같이 사용
interface CraftBeer {
	brand?: string;
    [propName: string]: any;
}