목록타입스크립트 (18)

aotoyae

[TS/React] props 유연하게 내리기 & Event Handler

💡 프롭스를 더 유연하게 내려보자 ~ UtilityType.tsx import { AddressComponent, PersonChildComponent, ProfileComponent, } from "./UtilityTypeChildren"; export type PersonProps = { id: string; description: string; address: string; age: number; profile: string; }; export const PersonComponent = ({ // ❗️ 다섯가지 타입들 설정 id, description, address, age, profile, }: PersonProps) => { return ( {id} // ❗️ 어드레스만 하나 내려주는 중 );..
TypeScript 2024. 3. 6. 15:16
[TS/React] TodoList 에 활용, props & children props

💡 타입스크립트를 투두리스트에 활용해 보자. type Todo = { id: string; isDone: boolean; }; function App() { const [todos, setTodos] = useState([]); // Todo 에 세팅은 어떻게 넘길까?! return ( {todos.map(({ id }) => ( ))} ); } function Todo() { return ; } export default App; function App() { const [todos, setTodos] = useState([]); return ( {todos.map(({ id }) => ( // ❗️ 프롭스 넘겨주고 ))} ); } function Todo({ id, setTodos, }: { id: ..
TypeScript 2024. 3. 6. 12:08
[TS] 비동기 함수 & React에 타입스크립트 사용 : props

💡 비동기 함수에 타입스크립트를 사용해 보자. fetchingData.ts async function getPerson() { const res = await fetch(`http://localhost:5008/people`); if (!res.ok) { throw new Error(); } return res.json(); } getPerson().then((res) => console.log(res)); ts-node fetchingData.ts 해보면 이렇게 데이터가 나온다. 그런데 지금 가져오는 값은 타입이 정해져 있지 않다. 바꿔보자! 🙋‍♂️ 첫 번째 방법 type Person = { id: number; age: number; height: number }; // 객체 타입을 정해주고 // ..
TypeScript 2024. 3. 6. 11:40
[TS] 타입스크립트 활용 : 간단한 책 대여 프로그램 class

💡 class 를 활용해 간단한 책 대여 프로그램을 만들어보자. src/index.ts User, 책 정의 enum Role { LIBRARIAN, // 사서 MEMBER, // 멤버 } abstract class User { // 추상 클래스 constructor( public name: string, public age: number ) {} abstract getRole(): Role; } class Member extends User { constructor(name: string, age: number) { super(name, age); } getRole(): Role { return Role.MEMBER; } } class Librarian extends User { constructor(n..
TypeScript 2024. 3. 6. 03:25
[TS] 타입스크립트 활용 : 간단한 카페 주문 받기 프로그램

💡 간단한 카페 주문 프로그램을 만들어보자. src/index.ts 먼저 타입 정의 interface User { id: number; name: string; role: 'admin' | 'customer'; } interface Beverage { name: string; price: number; } interface Order { orderId: number; customerId: number; customerName: string; beverageName: string; status: 'placed' | 'completed' | 'picked-up'; } let beverages: Beverage[] = []; let orders: Order[] = []; 먼저 쓸 타입들을 정의해둔다. User..
TypeScript 2024. 3. 6. 02:22
[TS] 타입스크립트 모듈 사용, 옵션 설정 & tsconfig/bases

💡 타입스크립트에서 모듈을 사용해보자 ~ 요기서 src 폴더, Product.ts, Size.ts, main.ts 를 만들자! Product.ts interface Product { // interface 생성 id: string; name: string; price: number; membersOnly?: boolean; sizes?: string[]; } Size.ts enum Size { // enum 생성 S = 'S', M = 'M', L = 'L', XL = 'XL', } main.ts const product1 = { // 객체 만들고 id: 'c001', name: '주전자', price: 129000, membersOnly: true, sizes: ['S', 'M'], }; const p..
TypeScript 2024. 3. 5. 15:47
[TS] Pick, Omit : 객체 프로퍼티 고르기, 생략하기 & Union 제거

💡 합치는 거 말고 골라오거나, 생략해보자! Pick interface Product { id: string; name: string; price: number; membersOnly?: boolean; } type ProductInfo = Pick; // ProductInfo 타입 값은 아래와 같다. type ProductInfo = { name: string; price: number; } name, price 프로퍼티만 골라서 타입을 만들었다. Omit interface Product { id: string; name: string; price: number; membersOnly?: boolean; } type ProductInfo = Omit; // ProductInfo 타입 값은 아래와 같다...
TypeScript 2024. 3. 5. 01:42
[TS] generic 제네릭 타입 <string> ~ <number> ~ <???> ~

💡제네릭 타입에 대해 알아보자. const shoeSizes: number[] = [230, 240, 250]; shoeSizes.map((num) => {}); const clothingSizes: string[] = ['M', 'L', 'XL']; clothingSizes.map((names) => {}); 파라미터의 타입을 알아서 인식하고 있다. 어떻게 한 걸까?! map 메서드를 살펴보면 안에 값이 있는데, 여기에 유동적인 값이 들어간다. 이렇게 특정한 타입으로 고정시켜 두는 게 아니라 꺾쇠 안에 임의의 값을 지정해 두고 그때그때 다른 타입을 넣어서 쓸 수 있게 하는 문법을 제네릭 이라 한다. generic : 데이터 타입을 일반화(변수화)한다는 것을 의미! type Generic={ // 이름은..
TypeScript 2024. 3. 5. 01:31
이전 Prev 1 2 3 Next 다음