자바스크립트 프로젝트를 타입스크립트로 변환

자바스크립트로 시작했던 동물의 숲 프로젝트를 타입스크립트로 작업하려고 한다.

왜냐면 이제 뭔가 파일이 js인게 익숙지가 않아.... 타입스크립트도 잘 못하기도 하고 해서

이 프로젝트는 온전히 공부용인데 익숙한(?) 자바스크립트로 하려고 하는 건! 공부가 아냐! 해서 타입스크립트로...

그러면 일단 이미 만들었던 자바스크립트 파일을 타입스크립트로 바꾸어야 한다..

 

참고 : https://steadily-worked.tistory.com/554

 

Typescript 환경 구성

• npm init -y (npm 초기화 명령어)로 package.json 파일 생성하기
• 프로젝트 폴더에서 npm i typescript -D 로 타입스크립트 라이브러리 설치하기
• 타입스크립트 설정 파일 tsconfig.json 을 생성하고 기본값  추가하기

{
  "compilerOptions": {
    "allowJs": true,
    "target": "ES5",
    "outDir": "./dist",
    "moduleResolution": "Node",
    "lib": ["ES2015", "DOM", "DOM.Iterable"]
  },
  "include": ["./src/**/*"],
  "exclude": ["node_modules", "dist"]
}

이 과정에서 오류가 한번 났다. 별건 아니었지만

No inputs were found in config file '경로/tsconfig.json'. Specified 'include' paths were '["./src/**/*"]' and 'exclude' paths were '["node_modules","dist"]'.

프로젝트 내에 생성했어야 하는데, 그 바깥 폴더에 생성을해서, ts파일이 하나도 없어서 생긴 오류였다.

 

 

 

js 확장자를 전부 ts로

이제 오류를 해결해주면 된다..

 

 

 

여기서 생긴 오류  1

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

vscode 내 버전이 내 버전과 달라서 생기는 오류이다.

tsconfig.json 내 compilerOptions 에 "jsx": "preserve" 를 추가해주면된다

 

 

villager.tsx

interface Villagers {
  name: string;
  gender: string;
  image_url: string;
  species: string;
}


function villagers({ name, gender, image_url, species }: Villagers) {
  return (
  
  ...

 

interface를 이용해서 타입을 지정해주고 났더니 모든 오류를 해결했다!

 

 

여기서 생긴 오류  2

문제는 이 친구였는데, 도통 원인이 뭔지 모르겠었던 것이다 ㅠ.ㅠ

에러 파티... 하나하나 해결해보자 ㅠㅠ

 

'App' refers to a value, but is being used as a type here. Did you mean 'typeof App'?

App.test.ts파일을 tsx 파일로 만들어줬어야 했는데 ts 로 만들어줘서 생기는 오류이다. tsx로 바꿔줬더니 잘 해결되었다!