React/JavaScript 에서 React/TypeScript 마이그레이션 중 발생한 오류목록 [Solved 해결]

마이그레이션에 들어가기 전 준비사항/알고가야하는 사항들! 

• jsx 가 들어간 문법은 .ts가 아닌 .tsx로 확장자를 변환해줘야한다. 
• 루트에 tsconfig.json 파일을 생성 해줘야 함 (대부분의 설정 오류들이 tsconfig.json을 수정하여 해결 가능하다.)
• .less 등 모듈을 declare 해서 타입을 지정해줘야지 사용할 수 있다. 

오류 목록

Cannot use JSX unless the '--jsx' flag is provided

수정 파일 = ./tsconfig.js

"include": [
	"./src/**/*.ts"
]

• tsconfig.json 에서 "./src/**/*"로 설정되어있던 값을 "./src/**/*.ts"로 바꾸어 타입스크립트에서만 적용될 수 있도록 설정하면 에러 해결, 이렇게 해도 오류가 난다면 하단의 코드를 추가.

{
  "compilerOptions": {
  	"jsx": "react"
  }
}

 

 

Typescript cannot find name window or document

메타마스크 정보를 가지고 있는 윈도우 객체를 불러와 사용하고 싶은데 위 에러가 떴다.

돔을 인식 할 수 있도록 Lib 옵션에 "dom"을 추가해주면 윈도우 객체를 사용할 수 있다.

 

수정 파일 = ./tsconfig.js

{
//... rest of code
  "compilerOptions": {
    "lib": ["dom"]
  }
}

 

typescript can't find module less

기존 자바스크립트 프로젝트에 타입스크립으를 도입하는데 사용하던 less 모듈이 인식되지 않는 이슈가 있었다.

webpack.config.json에서 잘못 설정한 건줄 알고 여러가지 찾아보니 해결책은 tsconfig.json의 include 옵션에

less 모듈을 선언한 d.ts 파일을 추가시켜 인식할 수 잇도록 만들어 주는 것이었다.

 

수정파일 = ./tsconfig.json 

{
//...rest of code
  "typeRoots": [
    "./types",
    "./node_modules/@types"
  ]
}

옵션의 ./types 내에 모든 d.ts 파일들이 있다.

./types 내에 d.ts 파일을 하나 만들어준다.

 

파일 위치/명 = ./types/index.d.ts

declare module '*.less' {
  const resource: {[key: string]: string};
  export = resource;
}

이렇게 less를 읽을 수 있도록 만들어 준 후 다시 tsconfig.json 내의 include 옵션에서

해당 파일을 추가해준다.

 

수정파일 = ./tsconfig.json 

{
//...rest of code
  "include": [
    "./src/**/*.ts",
    "./src/**/*.tsx",
    "./types/index.d.ts" //+ 추가된 파일
  ],
}

 

에러가 사라진다 👍