일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | |||||
3 | 4 | 5 | 6 | 7 | 8 | 9 |
10 | 11 | 12 | 13 | 14 | 15 | 16 |
17 | 18 | 19 | 20 | 21 | 22 | 23 |
24 | 25 | 26 | 27 | 28 | 29 | 30 |
31 |
- js
- 파이썬 slice
- 파이썬 enumerate
- 파이썬 list
- 파이썬 for
- 한글 공부 사이트
- 리액트 프로젝트
- 내일배움캠프
- 리액트 훅
- 리액트
- 내일배움캠프 프로젝트
- Next 팀 프로젝트
- 내배캠 프로젝트
- 내일배움캠프 최종 프로젝트
- JavaScript
- REACT
- 파이썬 for in
- 코딩테스트
- 그리드 정렬
- 리액트 페이지 이동
- 타입스크립트 props
- 타입스크립트 리액트
- typeScript
- React Hooks
- 타입스크립트
- 프로그래머스
- 리액트 팀 프로젝트
- 자바스크립트
- 파이썬 반복문
- useState
- Today
- Total
목록2024/03 (56)
aotoyae
💡 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 ..
💡 배열, 튜플을 작성해 보자. const cart: string[] = []; const carts: string[][] = [['c001', 'c002'], ['c003']]; 배열의 요소, 배열의 배열 요소는 이런 식으로 타입을 정해둘 수 있다. let mySize: number[] = [167, 28]; mySize = [167, 28, 255]; // 늘려도 mySize = [255]; // 줄여도 mySize = []; // 비워놔도 에러가 없다. 😲 배열 타입은 크기가 정해져 있지 않으니 개수를 명확히 하고 싶다면 튜플 타입을 사용하자! ⬇️ 튜플은 요소 각각의 타입을 정할 수 있다. = 순서를 정할 수 있다. let mySize: [number, number] = [167, 28]; myS..
💡 타입스크립트를 써봅시다. npm init or npm init -y ➡️ package.json 설치 npm install --save-dev typescript ➡️ 타입스크립트 설치 ❗️ 처음에만 ❗️ 🚨 타입스크립트는 개발할 때만 사용하는것이니 🚨 --save-dev 옵션으로 설치하는 거 잊지말기 "author": "", "license": "ISC", "devDependencies": { // 잘 설치되면 요렇게 추가된다. "typescript": "^5.3.3" } 이제 타입스크립트를 사용할 때 필요한 설정 파일을 만들어보자! npx tsc --init npx : Node 모듈을 실행하는 명령어 tsc : 타입스크립트에서 제공하는 '타입스크립트 컴파일러'라는 모듈 (타입스크립트 코드 > 자바..