TypeScript | 이론 | Types

Typescript의 좋은 점은 Typed 언어라는 건데, 그 뜻은 어떤 종류의 변수와 데이터인지 설정해주는 것이다.

 

index.ts를 다음과 같이 수정해보자.

 

index.ts

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

sayHi("Teepo",28,"male");

export {};

 

sayHi 함수 위에 마우스를 올려보면

 

 

이렇게 세가지의 인자 값의 타입이 모두 any로 되어있는 것을 볼 수 있다. 타입이 지정되지 않을 땐 이렇게 any로 자동 타입이 지정된다. 마지막에 있는 void는 함수가 어떤 값을 반환하는지 나타내주는 것이다. 만약 반환 값이 없으면 void로 설정된다.

 

이번엔 타입을 지정해보자.

 

index.ts

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

sayHi("Teepo",28,"male");

export {};

 

name에 string, age에 number, gender에 string 이라는 타입을 지정해주었다.

 

age에 number가 아닌 string으로 선언을 해보면

 

 

이렇게 빨간 줄로 에러가 뜨는 것을 확인할 수 있다.

 

반환 값의 타입을 지정하려면

 

index.ts

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

sayHi("Teepo",28,"male");

export {};

 

이렇게 인자값을 선언한 뒤 타입을 지정해주고 반환 값을 설정해주면 된다.

 

sayHi의 반환값을 보기위해 함수를 console.log 안에 넣어보자.

 

index.ts

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

console.log(sayHi("Teepo",28,"male"));

export {};

 

 

이렇게 하고 실행을 해주면

 

정상적으로 로고가 찍히는 것을 볼 수 있다.

 

 

이번엔 tsc-watch라는 프로그램을 깔아보자.

$ npm i tsc-watch --dev

 

그다음 dist폴더를 생성해주고 pakage.json 파일을 수정해준다.

 

pakage.json

{
  "name": "Typescript",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start" : "tsc-watch --onSuccess \" node dist/index.js \""
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@types/jest": "^27.0.2",
    "awesome-typescript-loader": "^5.2.1",
    "ts-jest": "^27.0.5",
    "webpack": "^5.56.1",
    "webpack-dev-server": "^4.3.1"
  },
  "dependencies": {
    "tsc-watch": "^4.5.0"
  }
}

 

 

그다음 tsconfig.json파일을 수정해주고 src폴더를 생성한 뒤 index.ts파일을 넣어준다.

 

tsconfig.json

{
    "compilerOptions" : {
        "module" : "commonJS",
        "target": "ES3",
        "sourceMap": true,
        "outDir": "dist"
    },
    "include": [
        "src//**/*"
    ],
    "exclude": ["node_modules"]
}

 

 

이렇게 되면 내 모든 typescript는 src로 들어갈거고 컴파일 된 것들은 dist로 들어갈 것이다.

 

하고 npm start를 해보면!

 

이 오류가 뜰 수 있다. 당황하지말고 아래 명령어를 입력해주자.

$ npm i -D @types/node typescript ts-node

 

 

혹시나 아래와 같은 오류가 뜬다면 pakage.json안의 name과 프로젝트 최상위 폴더의 이름이 다른 것이니 주의하도록 하자.

 

 

이제 npm start를 해보면!

 

성공적으로 tsc-watch가 실행된 것을 볼 수 있다.