Type Script (17) 썸네일형 리스트형 [TS] 객체로 이루어진 배열 type(feat.props) List 파일(item을 담고있음) articleInterface는 배열안에 들어가는 각각의 객체로 이루어진 item이다. articlesInterface는 그 객체로 배열이 이루어져 있다는 것을 의미한다. interface articleInterface { id: number; title: string; ... } interface articlesInterface { articles: articleInterface[]; } export default function ArticleList({ articles }: articlesInterface) { .. Item 파일 하위 파일에는 articleInterface만 필요하기때문에 해당 interface작성을 하였다. 그리고 구조분해할당에서는 그냥 ({ar.. [TS]TypeScript에서 useRef type 사용 방법 https://curryyou.tistory.com/488 [React] TypeScript useRef 사용법 (+ ref 객체 타입) # TypeScript에서 useRef 사용 방법 TypeScript에서 useRef 사용시, 아래와 같이 제네릭과 초기값을 설정해야 한다. 1. 값 저장 용도 - 제네릭 : 값의 타입을 넣어준다. - 초기값 : 반드시 타입에 맞는 초기값 curryyou.tistory.com 블로그내용) # TypeScript에서 useRef 사용 방법 TypeScript에서 useRef 사용시, 아래와 같이 제네릭과 초기값을 설정해야 한다. 1. 값 저장 용도 - 제네릭 : 값의 타입을 넣어준다. - 초기값 : 반드시 타입에 맞는 초기값을 할당해준다. // 값 저장 용도(number.. [TS] 객체 type (아직 정해지지 않은 key,value) 아직 정해지지 않은 key와 value로 이루어진 객체의 type은 아래와 같이 작성하였다. interface useFormInterface { [key: string]: string | number; } export function useForm(initialValues: useFormInterface) { * Type Alias + Index Signature + Union Type type alias의 경우 저렇게 type을 사용하여 따로 만들어 사용하는 것, index signature는 [key: string] 같이 어떤 key값이 들어올지 모르겠으나 전부 통틀어 string 타입으로 지정하는 방식을 말한다. 그리고 union type은 string | number처럼 or인 |로 여러 타입을 .. [TS] change, submit e매개변수 type, onChange type (feat.Type보는 방법) Input 과 textarea 안에 들어가는 value를 이용해서 setState를 시켜주는 useHook을 작성 중 ts로 변환하려고 한다. change Event의 매개변수로 e 에 대한 type을 작성할 때는 아래와 같이 작성한다. (e: React.ChangeEvent) 나는 input과 textarea가 동시에 쓰여서 다음과 같이 작성했다. e: React.ChangeEvent | React.ChangeEvent 만약 input 태그가 아니라 textArea 태그에서 사용하려 한다면 제네릭 인자를 HTMLTextAreaElement로 바꿔주면 되며, onChange 이벤트가 아니라 마우스 클릭 이벤트라면 이벤트 타입을 React.MouseEvent 이런 식으로 바꿔주면 된다. + submit 의.. [TS] children Type 다음과 같이 작성함 children?: React.ReactNode; https://www.carlrippon.com/react-children-with-typescript/ React Children with TypeScript Different ways the React children prop can be typed with TypeScript www.carlrippon.com https://velog.io/@ye-ji/React%EC%97%90%EC%84%9C-Children%EC%9D%84-JS%EC%99%80-TS%EC%97%90%EC%84%9C-%EA%B0%81%EA%B0%81-%EC%82%AC%EC%9A%A9%ED%95%98%EB%8A%94-%EB%B0%A9%EB%B2%95 React에서 .. [TS] ref type 오류해결 forwardedref<unknown>...(+never형식에 focus속성이 없다) TS 작성 중 다음과 같은 오류 발생 'forwardedref' 형식은 'legacyref | undefined' 형식에 할당할 수 없습니다. 'mutablerefobject' 형식은 'legacyref | undefined' 형식에 할당할 수 없습니다. 'mutablerefobject' 형식은 'refobject' 형식에 할당할 수 없습니다. 'current' 속성의 형식이 호환되지 않습니다. 'unknown' 형식은 'htmlinputelement | null' 형식에 할당할 수 없습니다. forwardRef 로 작성한 함수에서 ref type을 다음과 같이 지정해주었다. ref?: React.ForwardedRef | undefined 이것도 해봤더니 되긴함) ref?: React.LegacyRef.. [TS] src 경로 오류 해결(tsconfig.json) 기존 tsconfig.json의 코드는 다음과 같다. 그리고 추가로 tsconfig.path.json은 이렇게 설정되어있었다. 이 상태에서 tsx 파일로 변환하면, import 파일 경로에 대한 오류가 났다. tsconfig.json과 tsconfig.path.json에서 둘다 같은게 설정되어 있어 에러가 나는 것 같았다. 따라서, 이를 해결하기 위해 baseUrl과 paths를 기존 tsconfig.json에서 제거했다. 그러자 오류가 해결되고 import 경로가 제대로 불러와졌다. { "extends": "./tsconfig.path.json", "compilerOptions": { "target": "ESNext", "lib": ["dom", "dom.iterable", "esnext"], "all.. [TS] 중복된 함수입니다. 오류 파일이 다른데 같은 함수명을 쓸 경우 중복된 함수라는 오류가 발생했다. 이는 터미널에 아래를 통해서 해결할 수 있다. tsc --init을 통해 tsconfig.json이라는 파일이 생기는데 이 이후로는 오류메시지가 뜨지 않는다 tsc --init 이전 1 2 3 다음
