안녕하세요 오랜만이군요 이것 저것하다가 유튜브로 만드는거 올릴까하다가 녹화를 안해서 못하고 이것저것 만지다가 만들던 프로젝트 망가지고 해서 오늘부터 typescript 다시 시작하게 되었습니다.
이제 기본설정 부터 작하겠습니다
폴더 만드시고 vscode 열어 주세요
이렇게 기본설정 해주시면
packaage.json이 생성될거고 이제 typescript 를 설치 해보겠습니다.
이렇게 설치 해주시고
tsconfig.json 파일 만들어주세요
tsconfifg.json
이렇게 작성 해주세요.
여기서 target은 js의 버전을 말하는겁니다 typescript도 기본 js를 배경으로 하는 것이므롤 어느 js인지 설정해주는 것입니다.
soucemap은 js파일과 함께 생기느 파일인데 true로 하면 생성되고 false면 생성도지 않습니다
outdir은 생성한것을 어디다 넣을지 입니다. 지금은 dist폴더에 넣는다고 설정 되어 있습니다.
include 는 실행할시 어떤것을 포함해서 js로 변경시킬것인가 인데 지금은 src폴더 안에 있는것을 한다고 설정되어있습니다.
exclude는 반대로 제외하는 것입니다
tsc-watch를 설치 해보겠습니다
그리고 src dist폴더를 만들어주시고 src 내부에 index.ts만들어주세요
index.ts에
console.log("hi) 입력 해주세요
그리고 터미널에 tsc 를 쳐주시면 타입스크립트를 실행하면서 js로 변경해줍니다
이런식으로 변경이 됩니다.
이런식으로 데이터가 변경되어서 저장된것을 볼수 있습니다. 우리가 주로 볼것은 index.js 입니다.
우선 타입스크립트에 대해 간단히 설명하면 자바스크립트에서 type을 강조한 상위버전이라고 보시면 됩니다.
자바스크립트는 변수에 어떤 타입이든 넣을수 있었지만 타입스크립트는 특정 지정해놓은 타입만 넣어 놓을수 있어서 제한이 걸립니다 처음에는 다소 불편하다고 생각할수 있는데 이게 사용하는 양이 커지면 제한해놓아서 오류를 방지하고 예상치 못한 결과를 방지해줘서 훨씬 좋습니다.
이렇게 type이 맞지 않는 것을 대입하면 오류를 발생시켜 줍니다
이렇게 변수에 어떤 type이 들어가는지 확인 시켜줄수 있습니다
배열도 이런식으롤 type[] 이런식으로 선언이 가능합니다.
그럼 이런게 어떻게 바뀌는지 보면
이렇게 변경이된것을 볼수 있습니다.
그런데 우리가 작성할때마다 tsc를 입력해주면 불편하기때문에 tsc-watch라는것을 설치했습니다
npc tsc-watch 터미널에 입력하면
우리가 tsc 입력하지 않아도 변경될시 자동으로 js를 변경시켜줍니다.
확인해보면
이렇게 변경 하면
짠 이렇게 자동으로 변경되어있습니다.
터미널에 node dist/index.js 입력하면
이렇게 consol.log로 찍은것들이 터미널에 찍히게 됩니다
우리는 npx tsc-watch 너무 길어서 짧게 단축키를 설정해보겠습니다.
package.json
여기서 scripts 부분을 변경
이렇게 하고 저장하면 터미널에 npm start를 치면 저렇게 긴명령어가 자동으로 실행됩니다
이렇게 단축키 등록으로 쉽게 이용할수 있습니다
--onsuccess는 성공시 실행할것을 설정하는 옵션입니다.
이제 시작할때 npm start 치고 작성하고 저장 하면 자동으로 js로 변환되서 저장이 될것 입니다.
이제 이어서 문법을 들어가면 함수를 보겠습니다
이렇게 js처럼 넣어도 제대로 동작되는게 보입니다 하지만 타입 스크립트처럼 한번 만들어보겠습니다.
이렇게 변수마다 type을 지정해주고 괄호 끝나고 : 이걸 사용해서 return 값의 type을 지정해줄수 있습니다.
이렇게 return값으리 type이 맞지 않으면 저렇게 빨간줄이 떠서 오류가 뜹니다.
변수도 똑같이 맞지 않으면 오류가뜰것입니다.
그럼 이제 마지막으로 class를 알아 보겠습니다.
우선 아까 설명했듯이 기존에꺼를 안고쳤더닌 type과 갯수가 맞지 않아서 오류가 나오는 것을 확인할수 있습니다.
class도 저런식으로 다 type을 지정해주고 생성자함수도 함수이므로 저렇게 type을 지정해줍니다. 그리고 return에 type을 지정해주지않으면 any또는 void가 들어가게 됩니다. 즉 왠만하면 다된다는 말입니다 ㅎ
hi 함수를 보면 type으로 저렇게 class를 넣어줄수 있습니다.
이렇게 정상적으로 작동 되는것을 확인할수 있습니다.
그럼 객체를 넣을때는 어떻게 해야될까요??
객체는 type이 아닌데.... 바로 interface를 이용하면 됩니다.
이렇게 gw 는 type이 아니므로 오류가 뜹니다.
typeog gw을 넣으면 되긴하지만 그건 임시방편이고 interface를 사용해야됩니다.
이렇게 화면 오류가 나지 않는것을 확인할수 있습니다. interface는 안에 내용은 없고 틀만 정해주게 됩니다.
여기서 다른점은 interface는 index.js에 작성되지 않습니다
이런식으로 index.js에는 보이지 않습니다.
여기까지 typescript 기본개념이였습니다.