[Typescript] 간단하게 타입 지정 및 tsc-watch로 파일 변경될 때마다 실행

 

함수에서 타입확인

이전에 작성했던 파일에서 함수에 마우스를 올리면

해당 함수에서 받는 매개변수와 리턴되는 값의 타입 정보를 확인할 수 있습니다.

 

간단하게 살펴보자면 any 는 아무 타입의 값을 다 받을 수 있다는 의미입니다.

또한 void (빈공간) 는 해당 함수의 return 되는 값이 없다는 뜻이고요 .

 

타입 지정

sayHi 함수에서 받는 매개변수들의 타입을 지정해 주고 싶습니다.

이름이 숫자를, 나이가 문자열을 등등.... 엉뚱한 값을 넘기게 되면 안되니까 말이죠.

 

string 문자열 , number 숫자

다음과 같이 " 변수 : 타입 " 으로 타입을 지정해주면 됩니다.

name은 이름이니 문자열로, age는 나이니 숫자로, gender은 "male" 혹은 "female" 문자열로 받을거라 string으로 타입을 지정해줍니다.

const sayHi = (name: string, age: number, gender: string) => {
  console.log(`Hello ${name}, you are ${age}, you are a ${gender}`);
};

sayHi("홍길동", 20, "male");

export {};

 

나이의 매개변수 값을 타입과 맞지 않은 문자열로 넘겨보면

다음과 같이 에러 표시가 되며, number 타입으로 지정이 되어있다는 메세지를 볼 수 있습니다.

 

 

이로써 코딩을 하면서 실수를 하지 않도록 도와줍니다.

 

 

함수 반환 타입 지정1 : Void 빈공간

또한 위에서 한번 언급했던 void에 관련된 내용입니다.

함수 자체에 return 되는 값이 없다면 void 타입을 지정 해줍니다.

const sayHi = (name: string, age: number, gender: string): void => {
  console.log(`Hello ${name}, you are ${age}, you are a ${gender}`);
};

 

그 후 console.log 를 return 으로 대체를 해보면 다음과 같이 에러 표시가 됩니다.

 

 

함수 반환 타입 지정 : string 문자열

return 되는 값이 문자열이라면 void를 string으로 바꾸면 에러가 표시되지 않습니다.

 

 

 

 

tsc watch : 귀찮은 npm start 생략

 

지금까지는 npm start를 통해서 계속 파일을 컴파일하고 실행해주었습니다.

이제 이 과정을 모두 생략하기 위해 npm 을 통해서 "tsc watch" 라는 모듈 하나를 설치합니다.

// development 용으로 설치합니다.
$ npm install tsc-watch --dev

 

그 후에 수정해야 할 것들이 많습니다.

 

1. package.json 을 수정해줍니다.

npm start 명령어를 입력해주면

tsc-watch를 실행해 onSuccess 함수를 통해 성공하면 node 를 통해 dist/index.js 파일을 실행해줍니다.

그러면 dist라는 폴더가 필요하겠죠.

{
	...
    "scripts": {
    	"start": "tsc-watch --onSuccess \" node dist/index.js \" "
  	},
    ...
}

 

2. src 폴더, dist 폴더 생성, index.ts 파일 이동 및 index.js , index.js.map 삭제

최상단 루트에 src 와 dist 폴더를 생성해주고 index.ts 를 src 폴더로 이동시켜줍니다.

그리고 index.js, index.js.map 파일을 삭제해줍니다.

 

3. tsconfig.json 수정

 

"outDir" : "dist" 을 추가해줍니다. dist 폴더로 컴파일된 파일이 들어갑니다.

"include" : ["src/**/*"] 로 수정해줍니다. 이렇게 되면 src 폴더 내에 있는

모든 typescript 파일들이 컴파일 된다고 알려줄 수 있습니다.

{
  "compilerOptions": {
    "module": "commonjs",
    "target": "ES2015",
    "sourceMap": true,
    "outDir": "dist" // 추가
  },
  "include": ["src/**/*"], // 수정
  "exclude": ["node_modules"]
}

 

 

4. gitignore dist 추가

깃에 dist 폴더는 올라가지 않도록 dist 를 추가해줍니다.

 

 

5. npm start

다 설정후 npm start를 해주면 다음과 같이 watch 모드가 실행됩니다.

이제 ts 파일을 변경할 때마다 변경사항이 적용되어 파일이 실행됩니다.

이제 매번 npm start를 해줄 필요가 없습니다.

 

 

정리를 하자면,

src 폴더는 타입스크립트 파일을 모아둘것이고, dist 는 컴파일된 파일을 모아둘것입니다.

그리고 tsc-watch를 통해서 src 폴더에서 무언가를 변경하고 저장할 때마다 dist 폴더에 변경된 사항이 적용이 될것입니다.

 

따라서 귀찮게 npm start 를 통해 실행하지 않고 최초 한번만 실행하면 그 이후 파일이 변경될 때마다 실행이 됩니다.