{Typescript} 7.클래스 / 8.제네릭 / 9.타입 호환
16932 단어 basictypescriptlanguagebasic
7. class : 클래스
class Person3{
name: string;
age: number;
readonly log: string; //읽기만 가능
constructor(name: string, age: number) {
this.name = name;
this.age = age;
}
}
8. generic : 제네릭
- union을 사용할 경우
function logText3(text: string | number) {
// input type이 string | number 가 되어서 공통적인 요소만 호출 가능하다
console.log(text);
return text;
}
let a = logText3('hi');
// 호출은 문제 없지만, 위의 a는 string | number 타입을 갖게된다.
- Generic을 사용하면 해당 타입의 속성을 그대로 사용할 수 있다.
function logTextGen<T>(text: T): T{
console.log(text);
return text;
}
const str3 = logTextGen<string>('하이');
str3.split('');
- interface에 적용
interface Dropdown<T>{
value: T;
selected: boolean;
}
const obj: Dropdown<string> = { value: 'abc', selected: false };
const objNumber: Dropdown<number> = { value: 1200, selected: false };
- 함수에 적용
function logTextLength<T>(text: T[]): T[] {
console.log(text.length);
text.forEach(function (text) {
console.log(text);
})
return text;
}
logTextLength<string>(['hi', 'abc']);
- 상속 타입도 가능
//LengthType에 정의된 속성을 가지고 있으면 수용 가능함
function logTextLength2<T extends LengthType>(text: T): T {
Text.length;
return text;
}
// logTextLength2(10); //10: number는 length 속성이 없기 때문에 오류
logTextLength2({ length: 10 }); // length 속성이 있기 때문에 가능
- keyof로 타입 제한
interface ShoppingItem{
name: string;
price: number;
stock: number;
}
// ShoppingItem에 정의된 name, price, stock key만 인자로 넘길수있음
function getShoppingItemOption<T extends keyof ShoppingItem>(itemOption: T): T {
return itemOption;
}
getShoppingItemOption("price");
9. 타입 호환
- interface 호환
오른쪽에 있는 type이 같거나 더 큰 범위의 변수를 가져야 가능하다.
interface Developer{
name: string;
skill: string;
}
interface Person{
name: string,
}
let developer: Developer;
let person: Person;
// develper = person; // 불가
person = developer;
- 함수 호환
오른쪽에 있는 함수의 범위가 왼쪽에 있는 함수 범위에 속해야 가능
let add5 = function (a: number) {
}
let sum5 = function (a: number, b: number) {
// return a + b;
}
// add=sum; // sum 함수가 add 함수보다 크므로 불가
sum5 = add5;
- 제네릭 호환
interface Empty<T> {
//
}
let empty1: Empty<string>;
let empty2: Empty<number>;
// 비어있기 때문에 호환됨
empty1 = empty2;
empty2 = empty1;
interface NotEmpty<T>{
data: T;
}
let notEmpty1: NotEmpty<string>;
let notEmpty2: NotEmpty<number>;
// 제네릭으로 변경된 부분이 있기 때문에 불가하다.
// notEmpty1 = notEmpty2;
// notEmpty2 = notEmpty1;
참고 자료
[인프런] 타입스크립트 입문 - 기초부터 실전까지
[공식문서] https://www.typescriptlang.org/docs/
[타입스크립트핸드북] https://joshua1988.github.io/ts/intro.html
Author And Source
이 문제에 관하여({Typescript} 7.클래스 / 8.제네릭 / 9.타입 호환), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@jerry92/Typescript-기본-2-클래스-제네릭-타입추론저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)