Suyeon BLOG

TypeScript를 사용할 땐 props의 타입은 서로 동일해야만 오류가 발생하지 않습니다! 이때 타입을 정의하는 방법에 대해 포스팅하겠습니다~ 📌 예시 코드 // 부모 코드 function App() { const [datas, setDatas] = useState([]); const [listLength, setListLength] = useState(0); return ( Seoul Restaurant Website // props 전달 ); } // 자식 코드 // props 타입 정의하기 type ShowListProps = { list: apiType[]; listLength: number; }; // 타입 적정하기(: 사용) function ShowList({ list, listLength..

API를 이용한 프로젝트를 하다보니 사용하는 데이터의 양이 늘어나면서 이들을 더 구체적으로 표현하면 좋은 코드가 될 것 같아 시작하게 되었습니다. 📌 React에 TypeScript 적용하기 React 프로젝트를 생성하기 전일 때 npx create-react-app 프로젝트명 --template typescript React 프로젝트를 생성한 후일 때 npm install --save typescript @types/node @types/react @types/react-dom @types/jest 📌 결과 TypeScript를 적용하기 전인 React 프로젝트의 파일들입니다. 확장자명은 js, css로 이루어져 있는걸 확인할 수 있습니다. TypeScript를 적용한 후인 React 프로젝트의 파일입..

React 기반으로 REST API를 활용한 프로젝트를 구성 중에 TypeScript를 활용해서 만들면 더 구체적인 코드로 구현할 수 있을 것 같아 새로운 도전을 해보았습니다. 📌 TS로 API Type 만들기 export type apiType = { CRTFC_UPSO_MGT_SNO: number; UPSO_SNO?: string; UPSO_NM: string; CGG_CODE?: string; CGG_CODE_NM: string; COB_CODE_NM?: string; BIZCND_CODE_NM: string; OWNER_NM?: string; CRTFC_GBN?: string; CRTFC_GBN_NM: string; CRTFC_CHR_NM?: string; CRTFC_CHR_ID?: string;..

📌 TypeScript로 기본 함수 형성하기 function add(num1:number, num2:number): void { // 반환값 타입: 없음 console.log(num1 + num2); } function isAdult(age: number):boolean { // 반환값 타입: boolean return age > 19; } 함수를 형성할 때 매개변수의 타입과 반환값의 타입을 지정해야 합니다. 📌 선택적 매개변수 function hello(name?: string) { return `Hello, ${name || "world"}`; // name이 없을 땐 world를. } const hel = hello();// 가능 const hel2 = hello('Sara');// 가능 ?:의 의..

📌TypeScript 기본타입 형성하기 let car:string = 'abc'; let isAdult:boolean = false; let arr1:number[] = [1, 2, 3]; let age:number = 1300; 변수:데이터타입 형식으로 생성할 수 있습니다. 배열일 땐 []만 쓰는 것이 아니라, 데이터타입을 꼭 명시해줘야 합니다. 📌 Tuple let b:[string, number]; // 첫 번째요소는 문자열, 두 번째 요소는 숫자 b = ['a', 1]; b[0].toLowerCase(); b[1].toLowerCase(); // number에는 toLowerCase()라는 메소드가 없다는 에러가 발생합니다. TypeScript로 Tuple을 생성하면 원하는 데이터 타입만을 저장할..

React에서 TypeScript를 활용할 수 있다는 정보를 접한 후 프로젝트에서 활용하고 싶어서 배우기 시작했습니다. 📌 TypeScript를 적용하지 않을 때 발생하는 문제들 function printItem(arr) { arr.forEach(v => { console.log(v); } } function sum(num1, num2) { console.log(num1 + num2); } 일반적인 JS를 활용한 함수입니다. TypeScript를 사용하지 않을 때 나타나는 큰 차이점은 함수를 호출할 때 나타납니다. printItem([1, 2, 3]); // 1 2 3 printItem(1, 2, 3); // 숫자에는 forEach라는 메서드가 없기에 오류가 발생합니다. sum(1, 2); // 3 su..