관리 메뉴

흰둥씨의 개발장

[typescript] Generic 본문

[오늘의 공부]/typescript

[typescript] Generic

돈워리비해삐 2023. 6. 16. 02:40

함수

function getSize<T> (arr:T[]) :number{ //<호출시 전달되는 타입>으로 구성된 배열을 매개변수로 받고,
				      //리턴값은 항상 number로 함
	return arr.length
}

const arr1 = [1,2,3];
getSize<number>(arr1); //3

const arr2 = ["a","b","c"];
getSize<string>(arr2); //3

const arr3 = [true, false, true];
getSize<boolean>(arr3);

const arr4 = [{name:"Hyo"}, {key:"1"}, {cat:"jr"}];
getSize<{}>(arr4);

 


객체

interface Mobile<T> {
	name:string;
	price:number;
	option:T;
}

const m1 :Mobile<{color:string}> = {
	name:"uni1",
	price:1000,
	option: {
		color: "silver"
	}
}

const m2 :Mobile<string> = {
	name:"uni2",
	price:10000,
	option: "red"
}

 

에러 나는 코드 

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

interface Car {
	name:string;
	price:number;
}

interface Book {
	price:number;
}

const user:User = {name:"a",age:10}
const car:Car = {name:"a",price:1000}
const book:Book = {price:10000}

function getName<T> (item:T) :string{ // item에 T를 전달했을 때  
	return item.name;             //리턴값으로 요구하고 있는 name속성이 T에 없어서 에러남
}


getName (user);
getName (car);
getName (book);

아래와 같이 getName함수 부분을 수정할수 있음 

function getName<T extends {name:string}> (item:T) :string{ // T를 확장해서 name속성 정의
	return item.name;               
}


getName (user);
getName (car);
getName (book); //name 속성이 없는 객체나 name타입이 string 아닌것이 오면 에러남