JS&TS Essential (13) 썸네일형 리스트형 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 글에서 배운 방법은 '변.. type alias와 interface https://code-mania.tistory.com/29 TypeScript의 type 알아보기 기본적으로 js에는 다음과 같은 type들이 있다. String Number Boolean Array Function Object 타입 지정 방법 이번 시간에는 기본타입을 변수에 적용하는 방법에 대해서 알아볼 것이다. TypeScript는 TypeScript.. code-mania.tistory.com 위 글에서 기본 타입을 알아봤다. 하지만 프로그래밍하다보면 기본 타입만으로는 해결하기 어려운 상황에 직면할 것이다. 이 때 어떤 해결책이 있는지 알아보자~~~~ Type Alias와 Interface 사용자 정의 type을 지정하기 위한 방법으로 type alias와 interface를 이용하는 2가지 방법.. TypeScript의 type 알아보기 기본적으로 js에는 다음과 같은 type들이 있다. String Number Boolean Array Function Object 타입 지정 방법 이번 시간에는 기본타입을 변수에 적용하는 방법에 대해서 알아볼 것이다. TypeScript는 TypeScript라는 이름에 걸맞게(?) Type 지정이 가능하다. 변수명 뒤에 콜론과 지정하고싶은 type을 지정해주면 된다. let name: string = 'code-lover'; let likeNumber: number = 4; let isAdult: boolean = false; 객체와 배열 그런데 배열과 객체는 type 지정 방법이 조금 다르다!!! 배열의 경우 아래와 같이 사용해주면 된다. let hobbies: string[] = ['JAVA', 'V.. 이전 1 2 다음
