JS&TS Essential/TypeScript (4) 썸네일형 리스트형 Generic 오늘은 TypeScript에서 Generic을 어떻게 사용하는지에 대해 알아보겠다. Genric은 단일 타입이 아닌 다양한 타입에서 작동하는 function, class, interface를 만들 때 사용된다. 간단히 다음 예시를 살펴보자! function printValGeneric(val: T): T { console.log(val); return val; } const a = printValGeneric('hi'); const a2 = printValGeneric('hi'); 'printValGeneric' 함수는 입력받은 값을 출력 및 반환하는 함수이다. 먼저 문법부터 살펴보면 함수를 선언할 때 'T'라는 타입변수를 로 감싸서 입력받고 있다. 또한 'T' 타입의 인수 'val'을 입력받고 있고, .. Vue에서 TypeScript 사용하기: Props TypeScript를 이용하면 props의 속성도 제한할 수 있다. 어떻게 하는지 알아보자!!!! types.ts 파일에 다음과 같이 정의돼있다. export interface human { name: string likeNumber: number isAdult: boolean } 그리고 humanDetail이라는 Component가 있다. 이 Component는 human이라는 props의 타입을 human으로 제한하고 싶다. 이 때 우리는 type에 'Object as PropType'과 같이 값을 전달해주면 된다. 그냥 단순히 'type: 인터페이스명'과 같이 해서는 타입을 지정해 줄 수 없고, PropType이라는 것의 도움을 받아서 아래 코드와 같이 해줘야 한다. import { defineCo.. TypeScript: Generic TypeScript에는 generic이란 개념이 있다. 무엇인지 알아보도록 하자~~~~ 별 의미는 없지만 다음과 같이 print라는 함수를 만들었다. print 함수는 parameter로 string을 받고 string을 반환하는 함수이다!!!! 그런데 number를 print함수로 찍어보고싶다면 가능할까? 당연히 불가능할 것이다. function print(content: string): string { console.log(content) return content } 이럴 때 generic을 써보자~~~ 처음 봤다면 낯설 수도 있겠지만, 까보면 별 거 없다. 사이에 온 문자 T는 함수가 호출되기 전까지 무엇인지 모르는 미지의 타입이 된다. 즉, 이 함수는 미지의 타입 T를 매개변수로 받아서 T타입을.. Vue에서 TypeScript 사용하기: Data (참고로 Tool은 Webstorm을 썼다!!!) type.ts에 아래와 같이 코드를 작성했다. interface를 이용해 타입을 지정한 코드이다. export interface human { name: string; likeNumber: number; isAdult: boolean; }; 적당히 person.vue에 아래와 같이 코드를 작성했다. 일단 중요한 것은 human을 import하는 부분이다. TypeScript에서는 @가 사용불가능하므로 ..과 같이 경로를 적어줘야 한다. 그리고 TypeScript를 이용할 때는 script tag의 lang 속성에 ts라고 값을 지정해줘야 한다. 가장 중요한 data 부분을 살펴보자!!!! 일단 기존에 Type Customizing 글에서 배운 방법은 '변.. 이전 1 다음
