타입스크립트7 'React' refers to a UMD global, but the current file is a module react + typescript 개발하면서 로컬 띄웠는데.... ERROR 메시지 등장. 침착하게 대처해야 하는 것을 알지만 늘 어렵다.. 해결책을 찾았다. 더보기 'React'은(는) UMD 전역을 참조하지만 현재 파일은 모듈입니다. 대신 가져오기를 추가해 보세요. ts(2686) 문제 접근 1. npm package들의 버전 문제일까? 2. 왜 router.tsx에서 컴포넌트들 모두 빨간줄이 그어져 있지..? 에? 문제 해결 1. npm package 버전 체크 해보기 2. ts가 코멘트 날려줬으니 typescript 문제일 수도? ㄴ> typescript v4.1 이상, react, react-dom v17 이상 확인하기 3. tsconfig.json 파일 생성 유무 체크 4. tsconfig.j.. 2023. 9. 25. Type Script_08 Generics (제네릭) 제네릭을 제네릭하게! 재사용성을 높여줘! Generic : 통상적인, 일반적인 이라는 뜻을 갖고 있다. -> 적용해본다면, "일반화" 1. 제네릭을 사용하기 이전에는... function checkPoint(arg: number | null): number { if (arg == null) { throw new Error("not valid number!"); } return arg; } // 만약 타입을 string, boolean 등 다양한 경우로 설정하고 싶을 경우에 // 일일히 다 만들면...??? 😱 더럽고 긴 코드 내역 생성...두둥..! 타입별로 다 만들면 정말,,,, 비실용적이고 보기만해도 끔찍한 결과를 낳겠죠? any를 쓴다면? any는 타입보장이 안되고, 타입에 대한 정보가 없어지므로 .. 2021. 4. 16. Type Script_06 타입 추론 & 단언 (Inference & Assertion) 1. Inference Type (타입 추론) 타입을 우리가 명확하게 계속 명시해야 되는 경우보다는 알아서 자동으로 타입이 결정되는 경우가 있다. 그럴 때 선언함과 동시에 타입이 너무 뻔한 경우 생략 가능! (TS는 너무 똑똑해✨) function add(x: number, y: number): number { return x + y; } // 인자를 숫자로 받아와서 더한 값을 리턴하는 함수이기 때문에 결과값의 타입도 number로 추론함 const result = add(1, 2); // add함수는 number 타입임을 알고 있기 때문에 result: number 로 인식함 간단한 예제일 경우 추론이 간단하지만, 타입을 정확하게 정하는 것이 좋다. -> TypeScript를 사용하는 이유!! 2. T.. 2021. 4. 16. Type Script_05 Intersection Type (인터섹션 타입) 1. Intersection Type ' & '의 의미를 갖고 있는 타입. 타입 두가지를 함께 쓰고 싶을 때 쓰고, " 타입1 & 타입2 " 이렇게 사용한다. 함수 호출시, 타입1과 타입2에 들어있는 모든 요소들을 사용해야 컴파일 오류 나지 않는다. type Juice = { name: string; gram: number; }; type Coffee = { source: string; make: () => void; }; function juicyStore(menu: Juice & Coffee) { console.log(menu.name); console.log(menu.gram); console.log(menu.source); console.log(menu.make()); } juicyStore({ .. 2021. 4. 16. Type Script_03 Array & Tuple 배열타입 1. Array 배열은 2가지 형태로 정의할 수 있으나, ' type[ ] ' 형태로 코딩하는 것을 추천한다. const animals: string[] = ['멍멍이', '야옹이']; const scores: Array = [22, 55, 99]; function printArray(animals: readonly string[]) {} // Array의 형태를 지원안함 * readonly : 선언할 때만 값을 할당할 수 있고, 그 이후 재할당 불가능. 말 그대로 읽기전용 2. Tuple 2개 이상 타입을 같이 쓸 수 있으나, 가독성이 좋지 않아 쓰지 않는 것이 좋다... 대신 interface, type alias, class 로 대체 사용하는 것을 추천!! let student: [stri.. 2021. 4. 16. TypeScript_02 Function & Parameter 기본 함수 파라미터와 리턴값에 타입을 선언하여 엄격하게 관리할 수 있다. 자바스크립트 경우 리턴값이 다양하게 올 수 있지만, 타입스크립트는 내가 정한 타입만 값으로 들어올 수 있다. // JavaScript function jsAdd(num1, num2) { return num1 + num2; } // TypeScript function add(num1: number, num2: number): number { return num1 + num2; } Parameter 종류 1. Optional Parameter 인자를 전달해도 되고 전달하지 않아도 되는 기능으로 파라미터 이름 옆에 ?(물음표)를 입력하여, 그 해당 파라미터 값이 들어와도 되고 안 들어와도 오류가 안난다. function printName.. 2021. 4. 16. Type Script_01 기본 타입 마스터하기! 기본 타입 1. 숫자(number) const num: number = 1; const num: number = 0.1; const num: number = -1; 2. 문자(string) const str: string = 'hello'; // ' or " 사용가능 3. 불리언(boolean) const boal: boolean = false; //true or false 4. undefined, null let name: undefined; // 이렇게 사용은 안함 let age: number | undefined; // 주로 유니언 타입으로 사용함 let job: null; // 이렇게 사용은 안함 let job2: string | null; >> undefined와 null의 차이점 undefin.. 2021. 4. 15. 이전 1 다음
