Frontend/TypeScript (6) 썸네일형 리스트형 타입스크립트 Element 타입 Element 타입 1. HTMLAnchorelement - href, style, class 2.HTMLButtonElement 3. HTMLHeadingElement 4. HTMLInputElement 5. HTMLTextAreaElement 6. HTMLDivElement npm 강제 설치 npm install --save --legacy-peer-deps typescript가 인스톨이 안되서 구글 검색함 https://iancoding.tistory.com/154 [오류해결] npm install 설치시 npm ERR! code ERESOLVE npm install react-paypal-express-checkout --save npm ERR! code ERESOLVE npm ERR! ERESOLVE unable to resolve dependency tree paypal 이용하려고 설치하려고 하자 위와 같이 오류가 났다. 해결방법 npm i.. iancoding.tistory.com [해결] Type error: No overload matches this call. Overload 1 of 2, 문제 원인: button태그에서 onclick의 interface형식이 잘못되어있음 MovePage(page.link)}> {page.text} interface PropsType { href?: string; children?: React.ReactNode; primary?: boolean; border?: boolean; fullSize?: boolean; app?: boolean; space?: boolean; // onClick?: Function; onClick?: (e: React.MouseEvent) => void; } onClick을 이처럼 수정해주니까 해결됨 리액트 타입스크립트 제네릭 활용 예시 강의내용추가 src - [module]폴더에 타입용 .ts 파일 생성 export type Restaurant = { name: string; menu: Menu[]; address:Addr; } export type Addr = { city:string, zipcode:number, } export type AddrWithoutZip = Omit//빼기:omit, 하나만:pick export type Menu = { name:string, price:number }; export type APIRes = {//T: 위의 타입중에 하나 data:T[], totalPage:number, page:number } export type RestRes = APIRes export type MenuRes = AP.. [TypeScript] 변수, 함수 타입지정 vs코드는 타입스크립트로 제작되어 친화적이라고한다. 타입은 프리미티브 타입(string,number,boolean,null,undifned..)과 객체타입이 있다. 마우스 커서를 가져다대면 ':'뒤에는 반환값 타입정보를 얻을 수있다. 1. DOMelement const container = document.getElementById('root') const container: HTMLElement | null = document.getElementById('root') //사용 if(container){ //container != null container.innerHTML = html }else{ console.error('최상위 컨텐츠가없어 UI진행불가') } container변수는 타입으로 HTML.. [TypeScript] 초기환경세팅 자바스크립트의 암묵적인 타입지정이아니라 타입스크립트의 명시적인 타입지원기능을 이용해보려한다. 준비 번들링(파셀,웹팩 등) 세팅이 갖추어진 프로젝트 타입스크립트를 위한 환경설정 1. 작업한 js폴더를 ts로 바꿔주고 index.html의 js경로도 맞춰서 수정 2.tsconfig.json 파일 만들어 옵션 설정 https://www.typescriptlang.org/tsconfig { "compilerOptions":{ "strict":true, "target":"ES5", "module":"CommonJS", "alwaysStrict":true, "noImplicitAny": true, "noImplicitThis": true, "sourceMap": true, "downlevelIteration": t.. 이전 1 다음
