aotoyae

💡 타입스크립트에서 자주 쓰는 두 연산자에 대해 알아보자 먼저 keyof ~ interface Product { id: string; name: string; price: number; membersOnly?: boolean; } // 프로퍼티 이름 타입 지정 type ProductProperty = 'id' | 'name' | 'price' | 'membersOnly'; // 사용자에게 보여줄 키들을 productTableKeys 변수에 배열로 담아준다. const productTableKeys: ProductProperty[] = ['name', 'price', 'membersOnly']; const product: Product = { id: 'c001', name: '주전자', price: 129..

💡 intersection 에 대해 알아보자. interface Product { id: string; // 세 타입 모두 공통 name: string; price: number; membersOnly?: boolean; } interface User { id: string; // 세 타입 모두 공통 userName: string; email: string; createdAt: Date; // 두 타입에서 공통 updateAt: Date; // 두 타입에서 공통 } interface Review { id: string; // 세 타입 모두 공통 productId: string; userId: string; content: string; createdAt: Date; // 두 타입에서 공통 updateAt..

💡 union 에 대해 알아보자. function printSizes(product: Product) { const availableSizes = product.sizes.join(', '); console.log(`구매 가능한 사이즈는 다음과 같습니다: ${availableSizes}`); } 파라미터로 받고 있는 Product 에 sizes 가 없어서 에러가 뜨고 있다. ClothingProduct, ShoeProduct 중 하나만 받고 싶다면! ⬇️ function printSizes(product: ClothingProduct | ShoeProduct) { const availableSizes = product.sizes.join(', '); console.log(`구매 가능한 사이즈는 다음과 같..

💡 타입에 이름을 붙여보자! const cart: string[] = ['c001', 'c002', 'c003']; // cart 에 타입을 정의 interface User { username: string; email: string; cart: string[]; // User 객체에 cart 를 넣어주려고 타입을 또 정의함 } const user: User = { username: 'aoto', email: 'aotoyae@gmail.com', cart, }; 위와 같이 똑같이 cart 타입을 두 번 적어주면 (타입이 바꼈을 때) 수정하기 어려운, 유지 보수가 힘든 코드가 된다. 이럴 때 별칭으로 타입에 이름을 붙여준다. type Cart = string[]; // ** 여기 const cart: Ca..

💡 리터럴 타입에 대해 알아보자. 리터럴 : 글자 그대로 타입스크립트에선 let, const 에 따라 같은 문자열이더라도 타입이 다르게 지정된다. const 는 바뀌지 않는 값이기 때문에 값이 그대로 타입으로 지정된다. ➡️ 이런걸 리터럴타입이라 한다! 마찬가지로 숫자도 리터럴 타입으로 지정될 수 있다. 숫자 리터럴 타입은 숫자형 타입에, 문자 리터럴 타입은 문자형 타입에 포합된다. let small = 95; const large = 100; function printSize(size: number){ // large 도 number 타입이니 console.log(`${size} 사이즈입니다.`); } printSize(small) // 95 사이즈입니다. printSize(large) // 100 사..

2024.03.04 - [TypeScript] - [TS] enum 열거형 타입 [TS] enum 열거형 타입 💡enum 타입에 대해 알아보자. 상품 사이즈처럼 값의 종류를 나열할 수 있는 경우에 쓸 수 있는 타입 let product: { id: string; name: string; price: number; membersOnly?: boolean; sizes: string[]; } = { id: 'c001', name: ' aotoyae.tistory.com 💡 interface 에 대해 알아보자. 같은 객체 타입을 계속 만들어 낼때, 기준이 되는 타입을 만들어 사용할 수 있다! const product1: { id: string; name: string; price: number; membersO..

💡enum 타입에 대해 알아보자. 상품 사이즈처럼 값의 종류를 나열할 수 있는 경우에 쓸 수 있는 타입 let product: { id: string; name: string; price: number; membersOnly?: boolean; sizes: string[]; } = { id: 'c001', name: '주전자', price: 129000, sizes: ['M', 'L'], }; 위와 같이 객체 타입을 정해줬을 때 사이즈는 항상 S, M, L .. 정도만 있을 텐데 string 문자열 타입으로 정해준 건 너무 광범위한 느낌이 든다. 객체의 범위를 정해주는 enum 타입으로 바꿔보자! enum Size { // 요런 식으로 값을 나열해 주고 S, M, L, XL, } let product: ..

💡 any 타입에 대해 알아보자. let product: any = { // 타입을 any 로 지정하면 js 파일과 같이 타입 검사를 하지 않는다. id: 'c001', name: '주전자', price: 129000, membersOnly: true, sizes: ['M', 'L', 'XL'], }; console.log(product.reviews[2]); // 프로덕트에 리뷰라는 프로퍼티는 없지만 에러가 뜨지 않는다. 😲 TS 에서 타입 검사를 없애주는 any 는 왜 필요한가 ? 어쩔 수 없이 any 로 바꿔줘야하는 경우가 있기 때문 JSON 문자열을 파싱한다고 할 때, JSON.parse 함수에선 어떤 문자열이 어떤 객체 타입으로 될지 알 수 없어서 그 결과값이 any 타입이다! 이럴 때 any ..