본문 바로가기

전체 글

[typescript] 컴포넌트 간에 interface를 export하고 import 했는데 아무리해도 오류가 날때..!
이슈 아래 링크에서 타입선언을 export하고 import하는 방법으로 타입 선언한 interface를 한 파일에서 관리할 수 있도록 수정하였다. 그런데 똑같이 export하고 import를 했는데 계속 오류가 났다..... [typescript] 타입선언은 대체 어디에 ? ? 타입이 똑같아도 모든파일에서 다 ? (컴포넌트간 타입선언 이슈 컴포넌트1과 컴포넌트2 간에 이벤트와 데이터를 전달받는데, 그때마다 타입선언을 해주는데 같은 타입선언이 많았다. 그러다보니 나중에는 타입 하나를 수정하면 2번 수정해야하는 이슈가 joannashin.tistory.com 해결 interface를 import한걸 다시 export 하는 것은 불가......!!!!!!! 알고보니 보내는 곳의 interface가 다른 컴포넌..
[typescript] 타입선언은 대체 어디에 ? ? 타입이 똑같아도 모든파일에서 다 ? (컴포넌트간 타입선언 해보기)
이슈 컴포넌트1과 컴포넌트2 간에 이벤트와 데이터를 전달받는데, 그때마다 타입선언을 해주는데 같은 타입선언이 많았다. 그러다보니 나중에는 타입 하나를 수정하면 2번 수정해야하는 이슈가 발생하였다. 해결 타입선언은 메인이 되는곳에서!!! export 해준다. 그리고 그것이 필요한 곳에서 import 해서 가져와 사용한다. 1. 컴포넌트 1 ts파일 (export) ==> export { DepthItem } 해주기 ! //컴포넌트1 ts 파일 interface DepthItem { name: string; value: number | string; } export default componenet1Composable() { //컴포넌트 1 composable ts 내용.. //DepthItem 인터페이스 ..
[typescript] ts파일안에 html 파일 import 할때 타입선언하기 (InstaceType)
이슈 탭 컴포넌트를 만들기 위해서 html을 ts파일에 import하여 사용하려는데, 타입선언을 해주라고 빨간 오류 줄이 생겼다. Ctrl + space를 눌러 HtmlEmbedElement 등 다른걸로 바꿔봤으나 그럼 밑에 있는 다른 소스들이 더 심하게 빨간 줄이 생겼다. 해결 InstanceType import mappingList from 'mappingList html파일 경로'; import serviceList from 'serviceList html파일 경로'; type TabComponents = Record; InstanceType을 아무리 찾아봐도 타입을 임의로 지정해준다라는 말 밖에 안나왔었는데 저걸 사용하면 된다고 한다. 아래는 단계별로 바꿔간 코드이다. 단계별 삽질기 [초기에 an..
[typescript 기본] 타입스크립트의 모듈화 ( == es6 modules) + 예제
타입스크립트의 모듈시스템이란? es6의 modules와 동일하다! import 해오고, export 하는 방식이다. 아래 코드를 모듈화해보았다. 모듈화하기1 - 간단한 예제 types.ts //1. types.ts export interface TodoItem { title: string; checked: boolean; } 위의 interface만 따로 떼어서 types.ts 라는 파일을 만들고, 그대로 export 해주었다. app.ts //2. app.ts import { TodoItem } from './types'; //여기서 ts 파일 import var item: TodoItem = { title: '할일', checked: false } 분리한 ts 파일을 import로 불러온 다음, 그대..
[typescript 기본] 타입호환 (함수/제네릭 예제) - 어디까지 어떻게 호환되나요 ?
포인트는 작은거에 큰거는 담을 수 있지만, 큰거에 작은거는 큰 거를 다 못채우니까 못 담음!! 작은거 = 큰거 를 담을때만 타입 호환이 된다. 작은거 = 큰거 담기 ok Student 인터페이스 안에는 name과 skill 이렇게 2개, Teacher 인터페이스 안에는 name 하나만 지정되어있다. 그리고 변수에 각각 타입을 지정하였을때, student1에 teacher1을 담았을때는 오류가 나고, 반대로 teacher1에 student1을 담았을 때는 오류가 나지 않는다. 위에말이 무슨 말인가 하겠지만 내가 이해한 바로는 interface안의 개수를 구조라고 하면 구조가 많을수록 == 크다 적을수록 == 작다 Teacher에는 name만 선언했기때문에 호환이 되지만 더 큰 구조에서는 작은 구조를 호환할..
[typescript 기본] 타입가드 is와 타입단언 as
interface 2개를 union타입으로 연결해놓고, return 받는 값으로 뭔가 하고 싶을때 interface Developer { name: string; skill: string; } interface Person { name: string; age: number; } //union은 공통된 속성만 간주!!!! 따라서 name만 사용가능하고 함수 안에있는 age, skill 은 의미가 없음. function introduce(): Developer | Person { return { name: 'Tony', age: 33, skill: 'marketing'}; } var tony = introduce(); console.log(tony.skill) //이렇게 찍으면 없다고 나옴... Develo..
[typescript 기본] 타입 단언 as
타입 단언이란? 타입스크립트보다 개발자가 어떤 타입이 들어올지를 더 잘 알고 있으니 개발자가 정한걸 우선시해라~~ 라고 타입을 정의해놓는 것을 말한다. 간단한 예제 var a; //이러면 타입은 any가 됨 //... a = 'stringA'; //a에 문자할당 //... var c = a; //c는 문자가 된다는 것을 알 수 있음. a라는 변수를 선언해놓고, 변수 c에 a를 담았을때, c의 타입은 알 수 없는 상태이다. 그러나 중간에 a를 문자열을 담으면 string, 숫자를 담으면 number 등 어떤 것이 나올지 개발자는 알기 때문에 미리 타입을 단언해놓을 수 있다. (아래참고) 타입단언 as var a; //이러면 타입은 any가 됨 a = 'stringA'; //a에 숫자할당 var c = a ..
[vue3] 부모컴포넌트에서 자식컴포넌트로 보낸 데이터 값 변경 감지하기 (props 변경 감지하기)
이슈 부모 컴포넌트에서 자식컴포넌트로 props를 통하여 데이터를 보내서 값을 바인딩해놨는데, 그 데이터가 비동기로 업데이트 될 때 자식컴포넌트에서 데이터가 바뀐것이 감지가 되지않음. 해결방법 [부모컴포넌트] 데이터 전달 :depth-data 라는 props로 categories 데이터를 fb-depth-select 컴포넌트로 보냄. [자식컴포넌트] 1. props로 데이터 받아서 데이터 바인딩 2. watch로 props 값 변경 감지 전체소스 {{ depth.name }}
[Vue3 & typescript] component의 composables/ts 로 emit과 props 보내기
이슈 pc와 mo 버전에서 공통적인 부분은 함께쓰기 위해 composables에 ts를 따로 빼서 관리하는데, 빼는 과정에서 emit과 props가 잘 옮겨지지 않았다. vue파일경로: src/views/fb-depth-select.vue ts파일경로: src/composables/fb-depth-select.ts ts 파일 따로 빼기 전 vue 소스 src/views/fb-depth-select.vue 부모 컴포넌트로 보낼 emit을 만들고 (emit 사용하는 부분은 생략) 부모에서 받을 props를 따로 선언하였다. 파일분리 시도 (실패케이스) 1. vue 소스 > src/views/fb-depth-select.vue composables/fb-depth-select.ts 로 소스를 옮기고 fb-de..
[typescript 예제] 기본내용으로 문제풀어보기
배열 안에 객체 타입 선언방법 const contacts: = [ { name: 'Tony', address: 'Malibu', phones: { home: { num: 11122223333, }, office: { num: 44455556666, }, }, } ] contact라는 배열은 안에 객체가 있고 그 객체의 타입을 지정해보았다. (아래 코드 참고) interface PhoneNumberDictionary { [phone: string]: { //phone은 의미가 크지 않음!! 임시 변수같은 느낌 num: number; }; } interface Contact { name: string; address: string; phones: PhoneNumberDictionary; } const con..

티스토리툴바