Story's G Blog

typescript 기본 프로젝트 생성

31 Jul 2021

ts project 구조 잡기

npm init -y
npm i typescript -D
node_modules/typescript/bin/tsc --init

Hello World console

mkdir src
touch src/index.ts

// index.ts
console.log("hello world");

// generate src/index.js
node_modules/typescript/bin/tsc src/index.ts

// src/index.js
console.log("hello world");
node src/index.js
=> hello world

tsconfig.json 수정

{
  "compilerOptions": {
    "target": "es2015",
    "module": "commonjs",
    // complie 된 파일이 있는 곳
    "outDir": "./out",
    "strict": true,
    // typescript 파일 있는 곳
    "rootDirs": ["src"],
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true
  }
}

rm src/index.js
# tsconfig.json 을 바탕으로 컴파일
node_modules/typescript/bin/tsc
# out/index.js 생성됨
node out/index.js
=> hello world

ts-node

npm i ts-node -D
node_modules/ts-node/dist/bin.js src/index.ts
=> hello world

ts jest

npm i jest @types/jest ts-jest
touch jest.config.js

module.exports = {
  transform: { "^.+\\.ts?$": "ts-jest" },
  testEnvironment: "node",
  testRegex: "/tests/.*\\.(test|spec)?\\.(ts|tsx)$",
  moduleFileExtensions: ["ts", "tsx", "js", "jsx", "json", "node"],
  cacheDirectory: ".jest/cache",
};

// package.json
"scripts": {
    "test": "jest"
  },

//sum.ts
export default (...a: number[]) => a.reduce((acc, val) => acc + val, 0);

//tests/sum.test.ts
import sum from "../src/sum";

test("basic", () => {
  expect(sum()).toBe(0);
});

test("basic again", () => {
  expect(sum(1, 2)).toBe(3);
});

npm t
//or
npm test
//or
npm run test

eslint 적용

npm install --save-dev eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin

한번에 적용하기

npm init -y
npm i typescript ts-node jest @types/jest ts-jest --save-dev
npm i tsconfig-paths tsconfig-paths-jest
mkdir src
mkdir tests
echo '{
  "compilerOptions": {
    "target": "ES2021",
    "module": "ESNext",
    // complie 된 파일이 있는 곳
    "outDir": "./out",
    "strict": true,
    // typescript 파일 있는 곳
    "declaration": true,
    "rootDirs": ["src"],
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true
  },
  "include": ["./src"]
}' > tsconfig.json
echo "module.exports = {
    transform: {'^.+\\.ts?$': 'ts-jest'},
    testEnvironment: 'node',
    testRegex: '/tests/.*\\.(test|spec)?\\.(ts|tsx)$',
    moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'node'],
    cacheDirectory: '.jest/cache',
}" > jest.config.js
echo "node_modules
.jest
" > .gitignore

Related Posts