Typescript 프로젝트 만들기

안녕하세요 여러분, 오늘은 새로운 타이프스크립트 프로젝트를 만드는 방법을 알려 드리겠습니다. 여기에 있는 대부분의 파일은 내 개인 취향에 기반하지만 원하는 대로 변경할 수 있습니다. monorepos(작업 공간) 작업 및 필요한 Visual Studio Code Extensions 설치에 대한 일련의 게시물을 만들 계획입니다.

설치

모든 패키지 관리자(yarn 또는 npm)를 사용할 수 있지만 오늘은 pnpm 을 사용하겠습니다.

프로젝트 초기화

이 명령은 우리가 사용할 템플릿 package.json 파일을 생성합니다. 이 파일은 모든 종속성 버전과 npm 스크립트를 저장합니다.

pnpm init -y

우리가 실행할 다음 명령은 git repository 을 초기화하는 것입니다. Gitversion control system은 코드를 관리 및 저장하고 협업을 도와줍니다.

git init

Typescript + Prettier + ESLint 설치

다음으로 해야 할 일은 모든 개발 종속성을 설치하는 것입니다. Prettier는 코드 형식을 지정하여 훨씬 더 읽기 쉽게 만듭니다.

pnpm i -D typescript @types/node prettier eslint eslint-config-prettier eslint-plugin-prettier @typescript-eslint/eslint-plugin @typescript-eslint/parser

구성 파일 설정

다음으로 다양한 패키지에 대한 구성 파일을 설정해야 합니다.

.prettierrc (더 예뻐요)

{
    "tabWidth": 4,
    "printWidth": 80,
    "trailingComma": "all",
    "semi": true
}

.eslintrc.json(ESLint)

{
    "extends": [
        "prettier",
        "plugin:@typescript-eslint/recommended",
        "prettier/@typescript-eslint"
    ],
    "parser": "@typescript-eslint/parser"
}

tsconfig.json(타입스크립트)

이것은 우리의 typescript 빌드 구성 파일입니다. 다른 개발자가 자신의 패키지에서 사용할 라이브러리를 만드는 경우 선언을 true로 설정할 수 있습니다.

{
    "compilerOptions": {
        "target": "ES2019",
        "module": "CommonJS",
        "moduleResolution": "node",
        "skipLibCheck": true,
        "resolveJsonModule": true,
        "esModuleInterop": true,
        "emitDecoratorMetadata": true,
        "experimentalDecorators": true,
        "allowSyntheticDefaultImports": true,
        "declaration": false,
        "outDir": "dist"
    },
    "include": ["src"],
    "exclude": ["node_modules", "**/*.spec.ts"]
}

.gitignore

# Distribution
dist
out
build
node_modules

# Logs
*.log*
logs

# Environment
*.env*

# Misc
.DS_Store

패키지.json

마지막으로 package.json에 스크립트 섹션을 추가합니다. 이것은 pnpm run build 를 사용하여 프로젝트를 빌드하도록 합니다. 다음 코드 블록에는 전체 package.json이 포함되어 있지 않으며 스크립트 섹션만 ​​포함되어 있습니다.

    "scripts": {
        "build": "tsc --build"
    },

최종 메모

이제 프로젝트의 src 폴더에 소스 파일을 만들 수 있습니다. 또한 새 프로젝트를 만들 때마다 이 모든 단계를 따르고 싶지 않은 경우 프로젝트를 초기화할 수 있도록 github template repository도 만들었습니다.

그게 다야! 내 첫 번째 dev.to 게시물 중 하나를 읽어 주셔서 감사합니다.