본문 바로가기
728x90

frontend/TypeScript9

[TypeScript] react-hooks/exhaustive-deps 오류 해결 방법 개요ESLint 규칙에서 "plugin:react-hooks/recommended" 을 연결하고 "react-hooks/rules-of-hooks": "error"로 설정시 발생하는 react-hook 오류 메시지을 해결하는 방법react-hooks/rules-of-hooks : 훅을 사용할 때 제약사항을 준수할 것react-hooks/exhaustive-deps : useEffect를 통해 부수 효과를 처리할 때 사용하는 훅경고 메시지1) React Hook 'useDispatch' is called in function 'dispatcher' that is neither a React function component nor a custom React Hook function. React compon.. 2024. 5. 7.
[TypeScript] TypeScript 유틸리티 타입 - 6 유틸리티 타입? - 지금까지의 타입 조작기능 (제너릭, 맵드, 조건부 타입 등)을 이용해 실무에서 자주 사용되는 유용한 타입을 모아놓은 기능 - https://www.typescriptlang.org/docs/handbook/utility-types.html Documentation - Utility Types Types which are globally included in TypeScript www.typescriptlang.org 맵드 타입 기반 Partial - 특정 객체 타입의 모든 프로터티를 선택적 프로퍼티로 바꿔주는 타입 // Partial interface Post { title: string; tags: string[]; content: string; thumbnailURL?: strin.. 2024. 4. 19.
[TypeScript] TypeScript 타입 조작 기능 - 5 타입 조작이란? - 이미 할당 된 기본 타입, 별칭, 인터페이스 타입들을 새로운 타입으로 변환할 수 있는 타입스크립트 문법 타입 조작 기능 - 제너릭 - 인덱스드 엑세스 타입 - keyof 연산자 - Mapped(맵드) 타입 - 템플릿 리터럴 타입 - 조건부 타입 제너릭 - https://sillimmouse.tistory.com/75 인덱스드 엑세스 타입 - 객체, 배열, 튜플에서 특정 프로퍼티 혹은 요소의 타입을 추출하는 타입 - 대괄호 속에 들어가는 String Literal 타입인 “author” 를 인덱스라고 하며 인덱스를 이용해 특정 타입에 접근하다고 하여 인덱스드 엑세스 타입라고 한다. - 인덱스에는 값이 아니라 타입(기본타입, 리터럴 타입 등)만 가능하다. // 인덱스드 엑세스 타입 // .. 2024. 4. 17.
[TypeScript] TypeScript 인터페이스/클래스/제너릭 타입 이해 - 4 인터페이스란? - 자바스크립트에서는 사용하지 않는 타입스크립트 문법 - 변수 나 함수 , 그리고 클래스 가 만족해야하는 최소 규격을 지정할 수 있게 해주는 도구 인터페이스 기본 문법 - 타입 별칭과 동일한 타입을 지정하는 방법 중 하나로 c, java 의 인터페이스 처럼 작성하는 방법 - 선택적 프로퍼티, 읽기전용 프로퍼티가 가능하다. - 매개변수, 반환값을 포함한 메서드 오버로딩 타입 지정도 가능하다. - 대신, 별칭 처럼 | 연산자를 사용하여 인터페이스를 여러개 지정할 수는 없다. // 인터페이스 interface Person { readonly name: string; age?: number; sayHi(): void; sayHi(a: number): void; sayHi(a: number, b: .. 2024. 4. 14.
[TypeScript] TypeScript 함수 타입 이해 - 3 함수 타입 - 매개변수, 반환값 타입 지정이 필요하다. - 매개변수 필수 값이 아닌 경우 ? 를 사용하여 체크 할 수 있지만, 필수값 매게변수랑 값이 사용 시 필수값 뒤에 위치해야 한다. // 함수 타입 기본 정의 function func(a: number, b: number): number { return a + b; } const add = (a: number, b: number): number => a + b; // 함수의 매개변수 function introduce(name: string, age: number, tall?: number) { console.log(name); if (typeof tall === "number") { console.log(tall + 10); } } introduce.. 2024. 4. 14.
[TypeScript] TypeScript 타입 시스템 이해 - 2 타입 스크립트 원리 이해 타입 정의 기준 타입 관계 정의 기준 오류 검사 기준 타입 호환성 - 동일한 속성을 갖는 집합을 타입이라고 한다. - 어떤 타입을 다른 타른으로 변경해도 집합 안의 값인지 판단하는것을 타입 호환성이라고 한다. - 타입 호환성은 교집합 내에 판단한다. 예) 2, 0, -10, 0.123, Infenitiy 슈퍼 타입, 서브 타입 - 슈퍼 타입 : Down Cast(다운 캐스트)으로 변경될수 있는 타입 - 서브 타입 : Down Cast(다운 캐스트)으로 변경될수 없는 타입 *Down Cast(다운 캐스트) : 슈퍼 타입의 값을 서브타입으로 변경하는것, 변경여부가 상황따라 다르다. *Up Cast(업 캐스트): 서브타입의 값을 슈퍼타입으로 변경하는 것, 무조건 변경이 가능하다. //.. 2024. 4. 14.
[TypeScript] TypeScript 기본 문법 - 1 원시타입, 리터럴타입 원시 타입 - 하나의 값만 저장하는 타입 - 예) number, string, boolean, null, undefined // number let num1: number = 123; let num2: number = -123; let num3: number = 0.123; let num4: number = -0.123; let num5: number = Infinity; let num6: number = -Infinity; let num7: number = NaN; // string let str1: string = "hello"; let str2: string = "hello"; let str3: string = `hello`; let str4: string = `hello ${.. 2024. 4. 14.
[TypeScript] TypeScript 컴파일 옵션 설정 - tsconfig tsconfig 프로젝트를 타입스크립트를 자바스크립트로 변환(컴파일) 시 필요한 루트 파일과 컴파일러 옵션을 지정하는 파일 디렉토리에 tsconfig.json 파일 위치를 기준으로 TypeScript 프로젝트의 루트가 된다. tsconsifg 전역 속성 파일의 최상위에 위치하고 있는 속성을 의미 대표적으로 5가지 files extend include exclude compilerOptions files 프로젝트에서 컴파일할 파일들의 목록을 명시적으로 지정하는 속성 exclude 보다 우선 순위가 높다. 경로 작성 시 파일 확장자까지 정확히 작성해야 한다. { "files": ["src/main.ts", "custom.d.ts"] } extends 다른 tsconfig 파일의 설정을 가져와 재사용하게 해준.. 2024. 4. 12.
[TypeScript] TypeScript 문법 정리 1. 변수 선언 기본 요소: Boolean, Number, String, Object, Tuple, Enum, Any, Void, Never, Array, Null ,Undefined any TypeScript가 컨텍스트에서 유형을 유추할 수 없는 경우 특정 값으로 인해 유형 검사 오류가 발생하는 것을 원하지않는 경우 let num: number = 10; let str: string = "Hello"; let bool: boolean = true; let arr: number[] = [1, 2, 3]; let tuple: [string, number] = ["Hello", 10]; let obj: any = { x: 0 }; 1-1. 조건 적용 조건에 따라 타입을 선택적으로 정의하는 기능 let num.. 2024. 4. 12.
728x90

티스토리툴바