[Typescript] predictable Typescript

Typescript의 특징 중 하나는 Typed 언어라는 것인데, 내가 어떤 종류의 변수와 데이터 인지 설정을 해줘야한다는 것이다. 이 장점은 코드를 읽을 때 어떻게 실행이 되는지 예측이 가능하기 때문이다.

 

이렇게 함수를 부를 때 어떤 인수를 주어야할지 알 수 있다.

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

greeting("narang", 23, "female");

export {};

 

아래처럼 return 값의 타입을 정할 수도 있다.

const greeting = (name: string, age:number, gender: string): string=>{
    return `Hello ${name} ${age} ${gender}`;
}

greeting("narang", 23, "female");

export {};

 

watch모드에서 컴파일을 할 수 있도록 tsc-watch 패키지를 다운받는다.

yarn add tsc-watch --dev

 

dist와 src 폴더를 만들어주고 index.ts 파일을 src 안으로 넣어준다.

 

package.json

{
  "dependencies": {
    "tsc": "^2.0.3",
    "typescript": "^4.5.2"
  },
  "license": "MIT",
  "scripts": {
    "start" : "tsc-watch --onSuccess \" node dist/index.js\" "
  },
  "devDependencies": {
    "tsc-watch": "^4.5.0"
  }
}

 

 

sconfig.json

index.ts를 src/**/*로 바꿔준다.

이제 모든 것을 src안에 컴파일 해줄거라서 인덱스를 src로 옮겨줄 것이다.

그 외의 모든 typescript도 src로 들어갈 것이다.

그리고 outDir를 dist로 정해줘서 컴파일 된 것들을 dist로 들어가도록 해준다.

{
    "compilerOptions":{
        "module": "commonjs", // 다양한 것을 import, export 할 수 있도록
        "target": "ES2015", // 어떤 버전의 js로 컴파일?
        "sourceMap": true,
        "outDir" : "dist"
    },
    // 어떤 파일들이 컴파일 과정에 포함되는지
    "include" : ["src/**/*"],
    "exclude": ["node_modules"]

}

 

 

사진에서 보이는 것처럼 watch모드에서 컴파일을 시작했다.

src가 바뀌면 dist가 바뀐다는 것이다.

index.js indes.js.map을 지우고 다시 yarn start 를 하면 이번에는 dist에

js 파일들이 들어간 것을 확인할 수 있었다.

 

index.ts

const greeting = (name: string, age:number, gender: string): string=>{
    return `Hello ${name} ${age} ${gender}`;
}

console.log(greeting("narang", 23, "female"));

export {};

 

 

 

index.ts에서 함수를 호출할 떄 object를 넘겨줄 수도 있다.

그러기 위해서는 interface를 정의해준다.

typescript는 이 person이 Human 인터페이스와 같은 구조를 갖고있는지 체크한다.

interface는 타입스크립트에서만 작동한다.

interface Human {
    name: string,
    age: number;
    gender: string;
}

const person = {
    name: "narang",
    age: 22,
    gender: "male"
};

const greeting = (person: Human): string=>{
    return `Hello ${person.name} ${person.age} ${person.gender}`;
}

console.log(greeting(person));

export {};