Firebase function js to ts migration

js를 ts로 migration 하다가 실패했다. 일단은 github에 저장해둔게 있었기 때문에 , 다시 돌릴 수는 있었다. 

 

이번에는 다시 프로젝트를 만들어서 만들어보려고한다.

 

 

TsEatrip 이라는 폴더를 만들었다.

 

 

 

일단 일로 들어가서

 

프로젝트가 만들어진 것 같다. 

대충 세팅만 하고, function만 넣으면 될 것 같다.

 

잘 되는 지 확인이 어려울 것 같아서 일단은 다른 프로젝트 하나를 테스트 용으로 만들기로했다. 

 

만들고 deploy 까지 완성 !

 

https://us-central1-ggambbacknote.cloudfunctions.net/helloWorld

 

실행이 되는 것까지 확인하였다.!

 

자 이제 js를 ts로만 바꿔주면 될 것 같다. 코드를 하나씩 가져오면서, library 가져와야할 것 같다. 

일단은 코드부터 바꿔보자!

 

 

코드를 이러저리 바꿨다. any로 가장 쉽지만, 그렇게 하면, js 쓰는 것과 같다길래 최대한 strict하게 타입을 지정해줬다. 

 

 

성공!!!

 

생각보다 쉬운 것이었다!ㅎㅎ

 

 

 

중요한 건, js로 짜여진

 

일반 function의 폴더 형태가 아래와 같다면 

ts는 이런식으로 되어있는데

 

src(source) 폴더 안에 우리가 만든 js파일들을 하나씩 다 복사해서 넣고 ts로 바꾼다. 

ts로 바꾸면 아주 많은 error가 발생하는데, library 들은 npm i 로 설치를 해줘야하고, 

 

ts에 들어가는 변수 형태는  const a = '3'; => const a : string = '3' 대략 이런 형태로 저장해주면 된다.

이것은 ts 기초강의 1~2시간만 배우면 알게 되는 내용이라..

 

그리고 진짜 좋은 점은 Map 을 -> type이라는 걸로 특정해놓을 수가 있는데 마치 클래스를 지정해놓는 것처럼할 수 있다.

 

예전에는 map을 중구난방으로 해놓고 뭐 넣어야되지? 이러면서 고민했다면 

 

이런 식으로 DTO를 만들어줄 수도 있다는 것! 

 

xp : number | null => null or number 가 들어갈 수 있다는 뜻 (nullable 만들어 줌)

 

 

이런식으로 코딩하면 

 

코드가 아주 깔끔해져요~

 

오류들 하나씩 다 제거하고나서 firebase deploy --only functions 돌린 후에 잘 돌아갔는지 확인해보기,

잘 되었다면 기존의 코드는 사용할 필요가 없다..

Ts로 저장된 폴더로 이제부터 작업!