[ typescript ] 타입스크립트 프로젝트 실행하는 방법, compile 방법

타입스크립트 프로젝트 시작하는 방법(라이브러리 설치와 TSC)

• 폴더를 만들고 'index.ts'파일 생성
• 타입스크립트 확장자는 모두 .ts 이다.

.ts 파일

• 자바스크립트를 입력해서 활용해도 상관없다.
• 자바스크립트에 자료형을 직접 정의해도 상관없다.

함수를 호출하면 브라우저에서 바로 실행하기에는 
브라우저가 아직까지는 타입스크립트 파일을 인식할 수 없다.

• ts 파일을 js파일로 변환을 해주어야 브라우저에서 실행 가능하다.
  • 컴파일(compile) 이라고 일컫는다.

compile 방법

• 터미널을 실행해서 컴파일 변환 작업을 해준다.

node.js 버전 확인하는 방법

• 터미널에서 node -v 이라고 입력.

추가 설치사항(js파일을 ts파일로 compile하기 위한 설치사항)

• npm i typescript -g 명령어 입력
  • npm install typescript -global
• npm : 노드패키지 교완 참고하기.
  • node 기반으로 사용하는 사용하는 자바스크립트
    라이브러리들을 설치하는 것.
• tsc : 타입스크립트 라이브러리를 수행하기 위한
  • 로컬시스템 레벨에 설치하는 과정
• tsc index.ts 명령어 입력
  • index.js 생긴다.
  • js 파일로 자동 컴파일 해주는 명령어
• js코드로 변환된 index.js 파일을 브라우저에서
  실행해보면 자바스크립트가 실행이 된다.

.node_modules 폴더 생성

• npm i

.eslintignore 파일 생성

node_modules

.eslintrc.js 파일 생성

module.exports = {
  root: true,
  env: {
    browser: true,
    node: true,
    jest: true,
  },
  extends: [
    'plugin:@typescript-eslint/eslint-recommended',
    'plugin:@typescript-eslint/recommended',
  ],
  plugins: ['prettier', '@typescript-eslint'],
  rules: {
    'prettier/prettier': [
      'error',
      {
        singleQuote: true,
        semi: true,
        useTabs: false,
        tabWidth: 2,
        printWidth: 80,
        bracketSpacing: true,
        arrowParens: 'avoid',
        endOfLine: 'auto',
      },
    ],
    '@typescript-eslint/no-explicit-any': 'off',
    'prefer-const': 'off',
  },
  parserOptions: {
    parser: '@typescript-eslint/parser',
  },
};

packeage.json, package-lock.json 파일 자동 생성

package.json

{
  "name": "1_todo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.9.0",
    "@babel/preset-env": "^7.9.5",
    "@babel/preset-typescript": "^7.9.0",
    "@typescript-eslint/eslint-plugin": "^2.27.0",
    "@typescript-eslint/parser": "^2.27.0",
    "eslint": "^6.8.0",
    "eslint-plugin-prettier": "^3.1.2",
    "prettier": "^2.0.4",
    "typescript": "^3.8.3"
  }
}