[Ts]Typescript 설정하기

HOU·2022년 7월 30일

JavaScript

목록 보기

16/20

Typescript 설정하기

대부분의 타입스크립트는 리액트를 사용하므로 따로 설정을 하지 않아도 괜찮지만
그래도 기본적인 정보는 알고 있어야 하기 때문에 그 부분을 정리하겠다.

Typescript 설치하기

터미널 창 오픈
npm init -y 입력
package.json 에서 main이 적혀 있는 라인 삭제
scripts 안에 test properties 삭제
터미널에 npm i -D typescript 입력
설치가 완료되면 package.json 의 devDependencies 프로퍼티에 typescript: 버전명이 적혀 있으면 정상 설치가 된것이다.
src 폴더안에 index.ts를 만들고 아래 코드 입력

const hello = () => console.log("hi")

터미널에서 code tsconfig.json파일을 만들고 ctrl + s 로 저장.
tsconfig.json파일 밑에 아래 코드 입력

{
  "include": ["src"],
  "compilerOptions": {
    "outDir":"build"
  }
}

니코쌤강의 에서는 저렇게만 입력하면 빌드 됫지만 나는 build 폴더가 생기지 않았다. 아래 댓글에 해결방법이 나와서 적용해보니 정상 작동 되었다.

"include": ["src"],
"compilerOptions": {
	"outDir": "build",
	"target": "ES6",
	"moduleResolution": "node"
}

package.json 의 script부분에 "build": "tsc" 추가

{
  "name": "typechain",
  "version": "1.0.0",
  "description": "",
  "scripts": {
    "build": "tsc",
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
}

npm run build로 build 한다. build폴더에 index.js를 확인한다. index.ts index.js로 변경 되어 있다.
index.js 를 보면 타입스크립트로 잘 변경된 것을 확인할 수 있다. tsconfig 의 target에 따라서 버전에 맞게 번들링된다.! typescript에서 권장 하는 버전은 es6이다.!

lib properties에 대하여

tsconfig.json파일은 여러가지 타입 스크립트 설정파일을 만질 수 있는 파일이다.

//tsconfig
{
  "include": ["src"],
  "compilerOptions": {
    "outDir": "build",
    "target": "ES6",
    "moduleResolution": "node",
    "lib": ["ES6"],
    "strict": true,
    "esModuleInterop": true,
  }
}

ts파일에서는 dom에 접근하려고 하면 자동완성이 되지 않는다.

하지만 lib에 dom을 넣어주는 순간 자동완성이 가능하다.

lib에 내가 무엇을 사용하는지 입력해주면 ts에서는 그것을 확인해서 자동완성 기능을 제공해준다.
lib 은 typescript에게 내가 어떤 라이브러리를 사용하는 지 알려주는 부분이다.Math의 fround
lib은 타입스크립트에게 어떤 API를 사용하고 어떤 환경에서 코드를 실행하는지 알려준다.
이게 가능한 것은 document를 입력후 fn + alt 키를 누르면 나오는데, 그 나오는 파일의 확장자가 d.ts파일이라고 되어있다. 여기에서 type을 지정해주었기 때문에 자동완성이 가능한 것이다!

d.ts 파일이란 뭘까?

module을 사용하기 위해 설정해줘야 하는 파일
우리가 직접 설정해줄 수 있다. 아래 코드 처럼 모듈을 만든다고 가정해보자

//myPackage.js
export function init(config) {
  return true;
}

export function exit(code) {
  return code + 1;
}

이것을 index.ts파일에서 사용하고 싶어서 import해주겠다.

import {init} from "myPackage"

별다른 오류가 발생하지 않는다. 더 빡빡한 TS의 도움을 받기 위해서 tsconfig.js에 strict옵션을 추가해주자

//tsconfig.json
{
  "include": ["src"],
  "compilerOptions": {
    "outDir": "build",
    "target": "ES6",
    "moduleResolution": "node",
    "lib": ["ES6"],
    "strict": true,
  }
}

다시 index.js로 돌아가보면 오류가 있는것을 확인이 가능
TS 에서는 어떻게 하면 이 문제를 해결해 줄 수 있을까?
위에서 말했듯이 d.ts 파일이 존재한다고 하였다. 이 파일을 우리도 동일하게 만들어주면 된다.
myPackage.d.ts파일을 만든다.

//myPackage.d.ts파일을 만든다.
interface Config {
  url: string;
}

declare module "myPackage" {
  function init(config: Config): boolean;
  function exit(code: number): number;
}

위와같이 선언해준다. 타입을 선언해주면 js 파일을 모듈로서 ts에서 사용할 수 있다.!
아래와 같이 말이다!

//index.ts
import {init,exit} from myPackage
init({url:"true"})
exit(1)

하지만 무언가 복잡하다 좀 더 쉽게 하고 싶다.! 프로젝트에 Ts와 Js가 같이있는 경우 매번 d.ts파일을 만들기 힘들다. 이럴때 쓸 수 있는 방법을 소개하겠다.

프로젝트안에 TS, JS가 둘이 있는 경우

JS파일을 불러오고 싶을때

myPackage.d.ts 파일은 지워주자~
tsconfig.js 파일 안에
allow라는 프로퍼티를 입력하고 값을 true로 해주자!
타입스크립트 안에 자바스크립트를 허용한다.라는 의미이다.

그러면 기존의 파일들은 TS 의 보호를 받을 수 없을 것이다. 그러면 JS파일들은 어떻게 보호를 받을 수 있을까?!

JS파일은 사용하면서 TS 의 보호는 받고 싶을 땐? JSDoc!!

@use JSDoc이란 기능을 사용하면 되는데 params로 타입들을 지정해주면 Ts의 보호를 받을 수 있다 정말 엄청난 기능이라고 할 수 있다.

//@ts

/**
 *
 * @param {object} config
 * @param {string} config.url
 * @param {string} config.def
 * @returns {boolean}
 */
export function init(config) {
  return true;
}

/**
 *
 * @param {number} code
 * @returns {number}
 */
export function exit(code) {
  return code + 1;
}

Ts는 기존 JS를 사용하는데 큰 변경이 필요없다는게 정말 큰 장점 중 하나 인거 같다. 대형 코드들은 원하는 것만 바꿀수도 있고!

build, start

build 와 start를 계속 수행하게 되면 처리가 느려질 수 있다. 그것을 도와주는 것이 바로 tsnode와 nodemon 이다.

ts-node

npm i -D ts-node tsnode설치

package.json script 부분에 아래 처럼 dev 추가
dev추가
npm i nodemon 로 nodemon 설치

script 아래와 같이 추가
dev추가 2

npm run dev 실행

그러면 출력 파일이 찍혀서 아래와 같이 나온다.

//index.ts

console.log("hello")

nodemon

파일 Import 하기

위에서 보았듯이 module을 import 해보자

import crypto from "crypto"

위와 같이 작성하면 오류가 발생한다.

import * as crypto from "crypto"

가독성이 영 별로다..! ㅡㅡ;

위에 ts-node를 설치 했으면 crypto오류가 나지 않을 수 있다. 하지만 다른 module에선 오류가 날 수 있으니 같은 방법으로 해결해주면 되겠다! 해결방법은 아까 처럼 d.ts파일을 직접만들어주는건데..
이게 한두줄의 로직도 아니고 우리가 직접 만들기엔 보통일이 아니다! 하지만 개발자들은 다 편하고 쉬운 방법을 마들어 놓는법이다.