typescript10 '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_11 Compiler (컴파일) TypeScript는 브라우저에서 바로 이해 하지 못하기 때문에 컴파일러를 통해 자바스크립트로 변환을 시켜줘야 한다. 우리는 node.js의 패키지 매니저인 npm을 통해 타입스크립트 컴파일러 설치하고 .js 파일로 변환시킬 것이다. (npm = Node Package Modules) : Node.js에서 사용가능한 모듈들을 패키지화시켜 모아놓은 것 * 모두 터미널을 열어서 작업! * VScode 사용 * tsc 명령을 사용하기 위해 타입스크립트를 글로벌 버전으로 설치 npm install -g typescript 1. 1개의 파일을 실시간으로 확인하면서 작업할 수 있도록 설정할 경우 tsc 파일명.ts -w tsc 타입스크립트 툴을 이용해서 watch mode로 동작하면 된다. 2. 여러개의 파일을 관.. 2021. 4. 20. Type Script_09 Type alias와 Interface 차이👀 interface PositionInterface { x: number; y: number; } type PositionType { x: number; y: number; } 1. 개념 - Type alias : 데이터의 타입을 사용자정의 / const과 같은 원리로 재정의 불가능 / 데이터 담는 목적으로 사용 - Interface : 일종의 계약서 개념 / let과 같은 원리로 재정의 가능 / 구현할 목적으로 사용 2. 유사점 - Object(객체)로 정의 내릴 수 있다. const obj1: PositionInterface = { x: 1, y: 1, } const obj2: PositionType = { x: 2, y: 2, } - Class(클래스)에서 구현 가능 -> implements 를 사용.. 2021. 4. 16. 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_04 타입스크립트의 꽃🌹 Type Alias & Union Type 타입스크립트의 꽃! 1. Type Alias 타입을 내가 지정해서 정의하고 사용하는 것을 말한다. (변수 정하는 것과 같은 원리라고 생각하면 편하다!) type Text = string; type Num = number; const animal: Text = 'kitty'; const age: Num = 3; type Person = { name: string; age: number; }; // 타입에 설정해놓은 값 모두 입력해야 오류가 안남 const sister: Person = { name: 'Joy', age: 26, }; 추가로 문자열로도 타입으로 지정할 수 있다. // String Literal Types 문자열 type Message = 'Good luck!'; let toYou: Messa.. 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. 이전 1 2 다음
