본문 바로가기

Typescript

[typescript] 같은 interface인데 이름만 다르게 쓰고 싶을때 ! 인터페이스 복사하기 (type이용하기)
이슈 interface Code { code: string; codeName: string; } interface BasePageInfo { code: string; codeName: string; } 위에 2개의 interface를 보면 안에 내용은 같지만 이름이 달라야하는 상황이다. 은근 이런 상황이 많았는데 이럴때 합치는 법을 몰라 한참 헤맸다.. 해결 type interface Code { code: string; codeName: string; } type BasePageInfo = Code; type 새로운이름 = 복사할코드 로 해결하였다. 다른예시 type을 이용하여 아래 긴 소스를 더 간단하게 줄일 수도 있다. 기존소스 //기존 소스 interface ExcelCategoryPayloadI..
[typescript] emit 에 타입지정하기 (ts파일 분리)
이슈 Emit에 타입을 지정하고 싶은데 막상 쪼갠 ts파일에서 하려니 쉽지 않았다. 아래는 공식문서에 있는 emit 타입지정에 관한 내용이다. 출처: https://v3.vuejs.org/api/sfc-script-setup.html#typescript-only-features 해결 vue파일 import fbDepthCategoryComposable, { Emits } from '@/composables/modules/fb-depth-category' const emit = defineEmits(); const { categories, defaultLabel, handleUpdateCategory, } = fbDepthCategoryComposable(emit); ts파일 import { Selecte..
[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 ..
[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..
[typescript 기본] 제네릭 문법
제네릭을 쓰는 이유 function logText(text) { console.log(text) return text; } const number = logText(10); console.log(number + 1); logText("하이"); logText(true); 매개변수로 숫자, 문자, boolean 중 어떤걸 보낼지 모르고 보낸 값으로 나중에 뭔가 다른 처리를 하려고 할때 정의하기가 애매하다. 이럴때 쓰는게 제네릭 문법이다. 제네릭을 쓰는 이유2 - uniontype으로도 불가 function textLog(text: string) { console.log(text) text.split(""); //예시 return text; } function numberLog(num: number) { c..
[typescript 기본] class와 prototype
[Class] js에서의 Class 생성되었습니다. Person: { "name": "세호", "age": 30 } ts에서의 Class 상단에 name과 age의 타입을 지정해준다. [Prototype] js에서의 Prototype 위에는 예시인데, 보면 admin의 내용이 user와 겹치는 것을 알 수 있다. 이걸 prototype을 사용하여 간략하게 만들 수 있다. admin.__proto__ 에 user값을 담고 role부분만 따로 추가하고 admin을 console 을 찍어보면 아래와 같이 나온다. admin.name //캡틴 admin.age // 100
[typescript 기본] enum과 enum 활용법
ENUM 이란? 특정 값들의 집합을 의미하는 자료형 숫자형 ENUM enum Shoesnum { Nike, Adidas } var myShoes1 = Shoesnum.Nike; console.log(myShoes1); // 0 숫자형 enum은 default가 0이고 그 다음은 1씩 증가함. enum Shoesnum2 { Nike = 5, Adidas } var myShoes2 = Shoesnum2.Nike; var myShoes3 = Shoesnum2.Adidas; console.log(myShoes2, myShoes3); // 5, 6 default를 변경할 수 있음. 초기값을 5로 설정하면 5부터 시작. 문자형 ENUM enum ShoesString { Nike = "나이키", Adidas = "아..
[typescript 기본] Union type 과 Intersection type 차이 ( | 와 &)
1. any console.log를 찍는 함수를 만들고 싶은데 매개변수로 찍을 값이 string일수도 있고 number일수도 있을때 any로 사용가능. function logMessage(value: any) { console.log(value); } 하지만 typescript의 장점이 사라지는 것이기 때문에 any는 지양하는 것이 좋음! 따라서 타입을 여러개 지정해야하는 경우에는 아래 union type 또는 intersection type을 통해서 타입을 정의하는 것이 좋다. 2. Union type ( | 연산자를 이용한 타입 정의 ) function logMessage(value: string | number) { console.log(value); } 위 방식처럼 | 연산자로 string과 nu..
[typescript 기본] type과 interface
type type은 type을 하나 생성하는 것이 아니라 나중에 쉽게 참고할 수 있게 이름을 부여하는 것과 같다. type PersonType = { name: string; age: number; } let sehoStu: PersonType = { name: "세호", age: 20 } type과 interface의 차이 1. 커서를 대고 있을때 나오는 모습이 다르다. type은 안에 내용까지 나오지만 interface는 그렇지 않다. 2. "interface"만 확장이 가능하다. interface는 extends가 가능하지만 type은 그렇지 않다. 따라서 typescript공식문서에도 type보다는 interface를 사용할 것을 권장하고 있다.
[typescript 기본] interface란?
interface란, 변수나 함수의 형태를 미리 선언해놓고 가져다 쓰기 위한 것으로, 데이터타입을 변수로 선언해놓은것이라고 생각하면 이해가 빠를듯하다. 기본선언 // 인터페이스 선언 interface User { age: number; name: string; }​ interface 라고 쓰고 파스칼표기법으로 사용한다. 안에는 세미콜론으로 구분한다. interface안에 선언한 값들은 무조건 있어야한다. 안그러면 에러가 남. 1. 변수에 인터페이스 활용하기 // 인터페이스 선언 interface User { age: number; name: string; } // 변수에 인터페이스 활용 var seho: User = { age: 33, name: '세호' }; 2. 함수에 인터페이스 활용하기 - 매개변수..
[typescript 기본] 함수에 interface 활용하기
todoItems 안에 넣을 데이터 모양 let todoItems = [ { id: 0, title: "", done: false, } ]​ 타입스크립트에서 선언할때 1. 변수(배열이고 안에는 객체) 선언하기 - 배열안의 요소는 객체다라고 선언할때 let todoItems: Array; let todoItems: object[];​ 그런데 이렇게 하면 안에 값들에서 type을 지정해주지 않았다고 오류가 남. 2. 변수(배열이고 안에는 객체) 안 선언하기 - 배열 안의 요소는 객체인데 객체 안의 값들은 ~~다 라고 선언할때 let todoItems: { id: number; title: string; done: boolean }[];​ 이렇게 해야 안에 값들을 쓸때 에러가 나지 않음. 근데 너무 길기 때문..
[typescript 기본] 타입 설정 (기본, 함수)
기본타입설정 기본적으로 변수 뒤에 :를 붙여 타입 설정을 한다. //JS 문자열 선언 let jsStr = "hello"; //TS 문자열 선언 let str: string = "hello"; // 숫자 let num: number = 10; // 배열 let arr: Array = [1,2,3]; let heroes: Array = ["Capt", "Thor", "Hulk", 10]; let items: number[] = [1, 2, 3]; // 튜플 (모든 인덱스의 타입까지 지정하기) let address: [string, number] = ["테스트", 10]; // 객체 let obj: object = {}; let person: object = { name: "capt", age: 100 };..
[typescript 기본] 세팅하기
1. vsCode에서 tslint 설치 2. typescript 설치 npm i typescript -g 3. typescript파일을 js파일로 컴파일하기 tsc index.ts 4. tsconfig.json 파일생성해서 컴파일 옵션정하기 { "compilerOptions": { "allowJs": true, "checkJs": true, "noImplicitAny": true } } 참고: https://www.typescriptlang.org/tsconfig TSConfig Reference - Docs on every TSConfig option From allowJs to useDefineForClassFields the TSConfig reference includes information a..

티스토리툴바