[타입스크립트] 연습용으로 자주 사용하는 세팅

설치와 변환 한줄 요약

node.js 설치 → npm i -g typescript → tsconfig.json 생성 → tsc -w

<요약>
 ts는 브라우저에서도 node에서도 읽히지 않는다.

ts는 js 코드로 변환해주어야 한다. index.ts를 만들었다면

tsc index.ts 란 명령어를 입력 main.js란 파일이 새로 생성된다.

이 변환된 js는 이제 브라우저나 node에서 읽을 수 있다.

ts를 js로 매번 수동 변환

tsc 파일명.ts

 

노드에서 간편하게 실행

ts-node 설치 명령어: 내부적으로 타입스크립트 코드를 자바스크립트 코드로 변환해서 노드에서 실행하는 것을 한번에 할 수 있도록 도와주는 툴

npm install -g ts-node 설치 후

가령 index.ts를 실행하고 싶다면 

ts-node index.ts 만 써주면 된다.

ts-node src/index.ts (폴더에 있는 경우)

 

브라우저에서 간편하게 실행

tsc 파일명.ts -w
Watch mode
매번 변화가 있을 때마다 tsc명령어로 TypeScript 컴파일을 해주는 것 대신에, watch mode로 컴파일을 시작하면  TypeScript 파일 저장 후, 저장 전과 변화가 있을 때마다 자동 컴파일 해준다.
$ tsc -w
터미널이 계속 watching… ts를 바라본다는 의미이다.

 

 

타입스크립트 프로젝트 만들기 : 타입스크립트 프로그래밍(출판사 프로그래밍 인사이트)동일하게 구성

코드 편집기 설정


예비단계1. NodeJs

TSC 자체도 타입스크립트로 구현된 명령행 도구이므로 TSC를 실행하려면 NodeJS가 필요하다.(이런 이유로 TSC는 자체 호스팅 컴파일러 또는 자신을 컴파일하는 컴파일러라는 특별한 종류의 컴파일러가 된다.)

NodeJs는 프로젝트의 의존성이나 빌드를 관리하는 패키지 관리자 NPM을 포함한다. NPM을 이용해 TSC와 TSLint를 설치할 것이다.

1.
터미널 창을 열어 새 디렉터리를 만들고 그 안에 새 npm 프로젝트를 초기화한다.

mkdir chapter-2

cd chapter-2 

npm init -y : 새 NPM 프로젝트 초기화

npm install --save-dev typescript tslint @types/node : TSC,TSLint, NodeJS용 타입 선언 설치 


$ npm install --save-dev typescript tslint @types/node
npm WARN deprecated tslint@6.1.3: TSLint has been deprecated in favor of ESLint. Please see https://github.com/palantir/tslint/issues/4534 for more information.

added 43 packages, and audited 44 packages in 8s

4 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities
2. 
모든 타입스크립트 프로젝트는 루트 디렉터리에 tsconfig.json 이라는 파일이 존재해야 한다.

타입 스크립트 프로젝트에서 어떤 파일을 컴파일하고, 어떤 자바스크립트 버전으로 방출하는지 등을 정의한다.

 

./node_modules/.bin/tsc --init

--init 플래그와 함께 tsc를 실행한 후, tsconfig.json 파일이 몇 가지 기본 값들과 함께 프로젝트 폴더에 생겼다.

tsconfig.json


{
  "compilerOptions": {
    /* Visit https://aka.ms/tsconfig.json to read more about this file */

    /* Projects */
    // "incremental": true,                              /* Enable incremental compilation */
    // "composite": true,                                /* Enable constraints that allow a TypeScript project to be used with project references. */
    // "tsBuildInfoFile": "./",                          /* Specify the folder for .tsbuildinfo incremental compilation files. */
    // "disableSourceOfProjectReferenceRedirect": true,  /* Disable preferring source files instead of declaration files when referencing composite projects */
    // "disableSolutionSearching": true,                 /* Opt a project out of multi-project reference checking when editing. */
    // "disableReferencedProjectLoad": true,             /* Reduce the number of projects loaded automatically by TypeScript. */

    /* Language and Environment */
    "target": "es2016",                                  /* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */
    // "lib": [],                                        /* Specify a set of bundled library declaration files that describe the target runtime environment. */
    // "jsx": "preserve",                                /* Specify what JSX code is generated. */
    // "experimentalDecorators": true,                   /* Enable experimental support for TC39 stage 2 draft decorators. */
    // "emitDecoratorMetadata": true,                    /* Emit design-type metadata for decorated declarations in source files. */
    // "jsxFactory": "",                                 /* Specify the JSX factory function used when targeting React JSX emit, e.g. 'React.createElement' or 'h' */
    // "jsxFragmentFactory": "",                         /* Specify the JSX Fragment reference used for fragments when targeting React JSX emit e.g. 'React.Fragment' or 'Fragment'. */
    // "jsxImportSource": "",                            /* Specify module specifier used to import the JSX factory functions when using `jsx: react-jsx*`.` */
    // "reactNamespace": "",                             /* Specify the object invoked for `createElement`. This only applies when targeting `react` JSX emit. */
    // "noLib": true,                                    /* Disable including any library files, including the default lib.d.ts. */
    // "useDefineForClassFields": true,                  /* Emit ECMAScript-standard-compliant class fields. */

    /* Modules */
    "module": "commonjs",                                /* Specify what module code is generated. */
    // "rootDir": "./",                                  /* Specify the root folder within your source files. */
    // "moduleResolution": "node",                       /* Specify how TypeScript looks up a file from a given module specifier. */
    // "baseUrl": "./",                                  /* Specify the base directory to resolve non-relative module names. */
    // "paths": {},                                      /* Specify a set of entries that re-map imports to additional lookup locations. */
    // "rootDirs": [],                                   /* Allow multiple folders to be treated as one when resolving modules. */
    // "typeRoots": [],                                  /* Specify multiple folders that act like `./node_modules/@types`. */
    // "types": [],                                      /* Specify type package names to be included without being referenced in a source file. */
    // "allowUmdGlobalAccess": true,                     /* Allow accessing UMD globals from modules. */
    // "resolveJsonModule": true,                        /* Enable importing .json files */
    // "noResolve": true,                                /* Disallow `import`s, `require`s or `<reference>`s from expanding the number of files TypeScript should add to a project. */

    /* JavaScript Support */
    // "allowJs": true,                                  /* Allow JavaScript files to be a part of your program. Use the `checkJS` option to get errors from these files. */
    // "checkJs": true,                                  /* Enable error reporting in type-checked JavaScript files. */
    // "maxNodeModuleJsDepth": 1,                        /* Specify the maximum folder depth used for checking JavaScript files from `node_modules`. Only applicable with `allowJs`. */

    /* Emit */
    // "declaration": true,                              /* Generate .d.ts files from TypeScript and JavaScript files in your project. */
    // "declarationMap": true,                           /* Create sourcemaps for d.ts files. */
    // "emitDeclarationOnly": true,                      /* Only output d.ts files and not JavaScript files. */
    // "sourceMap": true,                                /* Create source map files for emitted JavaScript files. */
    // "outFile": "./",                                  /* Specify a file that bundles all outputs into one JavaScript file. If `declaration` is true, also designates a file that bundles all .d.ts output. */
    // "outDir": "./",                                   /* Specify an output folder for all emitted files. */
    // "removeComments": true,                           /* Disable emitting comments. */
    // "noEmit": true,                                   /* Disable emitting files from a compilation. */
    // "importHelpers": true,                            /* Allow importing helper functions from tslib once per project, instead of including them per-file. */
    // "importsNotUsedAsValues": "remove",               /* Specify emit/checking behavior for imports that are only used for types */
    // "downlevelIteration": true,                       /* Emit more compliant, but verbose and less performant JavaScript for iteration. */
    // "sourceRoot": "",                                 /* Specify the root path for debuggers to find the reference source code. */
    // "mapRoot": "",                                    /* Specify the location where debugger should locate map files instead of generated locations. */
    // "inlineSourceMap": true,                          /* Include sourcemap files inside the emitted JavaScript. */
    // "inlineSources": true,                            /* Include source code in the sourcemaps inside the emitted JavaScript. */
    // "emitBOM": true,                                  /* Emit a UTF-8 Byte Order Mark (BOM) in the beginning of output files. */
    // "newLine": "crlf",                                /* Set the newline character for emitting files. */
    // "stripInternal": true,                            /* Disable emitting declarations that have `@internal` in their JSDoc comments. */
    // "noEmitHelpers": true,                            /* Disable generating custom helper functions like `__extends` in compiled output. */
    // "noEmitOnError": true,                            /* Disable emitting files if any type checking errors are reported. */
    // "preserveConstEnums": true,                       /* Disable erasing `const enum` declarations in generated code. */
    // "declarationDir": "./",                           /* Specify the output directory for generated declaration files. */
    // "preserveValueImports": true,                     /* Preserve unused imported values in the JavaScript output that would otherwise be removed. */

    /* Interop Constraints */
    // "isolatedModules": true,                          /* Ensure that each file can be safely transpiled without relying on other imports. */
    // "allowSyntheticDefaultImports": true,             /* Allow 'import x from y' when a module doesn't have a default export. */
    "esModuleInterop": true,                             /* Emit additional JavaScript to ease support for importing CommonJS modules. This enables `allowSyntheticDefaultImports` for type compatibility. */
    // "preserveSymlinks": true,                         /* Disable resolving symlinks to their realpath. This correlates to the same flag in node. */
    "forceConsistentCasingInFileNames": true,            /* Ensure that casing is correct in imports. */

    /* Type Checking */
    "strict": true,                                      /* Enable all strict type-checking options. */
    // "noImplicitAny": true,                            /* Enable error reporting for expressions and declarations with an implied `any` type.. */
    // "strictNullChecks": true,                         /* When type checking, take into account `null` and `undefined`. */
    // "strictFunctionTypes": true,                      /* When assigning functions, check to ensure parameters and the return values are subtype-compatible. */
    // "strictBindCallApply": true,                      /* Check that the arguments for `bind`, `call`, and `apply` methods match the original function. */
    // "strictPropertyInitialization": true,             /* Check for class properties that are declared but not set in the constructor. */
    // "noImplicitThis": true,                           /* Enable error reporting when `this` is given the type `any`. */
    // "useUnknownInCatchVariables": true,               /* Type catch clause variables as 'unknown' instead of 'any'. */
    // "alwaysStrict": true,                             /* Ensure 'use strict' is always emitted. */
    // "noUnusedLocals": true,                           /* Enable error reporting when a local variables aren't read. */
    // "noUnusedParameters": true,                       /* Raise an error when a function parameter isn't read */
    // "exactOptionalPropertyTypes": true,               /* Interpret optional property types as written, rather than adding 'undefined'. */
    // "noImplicitReturns": true,                        /* Enable error reporting for codepaths that do not explicitly return in a function. */
    // "noFallthroughCasesInSwitch": true,               /* Enable error reporting for fallthrough cases in switch statements. */
    // "noUncheckedIndexedAccess": true,                 /* Include 'undefined' in index signature results */
    // "noImplicitOverride": true,                       /* Ensure overriding members in derived classes are marked with an override modifier. */
    // "noPropertyAccessFromIndexSignature": true,       /* Enforces using indexed accessors for keys declared using an indexed type */
    // "allowUnusedLabels": true,                        /* Disable error reporting for unused labels. */
    // "allowUnreachableCode": true,                     /* Disable error reporting for unreachable code. */

    /* Completeness */
    // "skipDefaultLibCheck": true,                      /* Skip type checking .d.ts files that are included with TypeScript. */
    "skipLibCheck": true                                 /* Skip type checking all .d.ts files. */
  }
}

타입스크립트 프로그래밍(출판사 프로그래밍 인사이트)과 동일하게 구성(tsconfig.json 를 직접 만들어서 아래와 같이 작성해도 된다)


{
  "compilerOptions": {
    "lib": ["es2015"],
    "module": "commonjs",
    "outDir": "dist",
    "sourceMap": true,
    "strict": true,
    "target": "es2015"
  },
  "include": ["src"]
}
각 카테고리 설명:

{
  "compilerOptions": {         
    "lib": ["es2015"],                TSC가 코드 실행 환경에서 이용할 수 있다고 가정하는 API
    "module": "commonjs",     TSC가 코드를 컴파일할 대상 모듈 시스템(CommonJS, SystemJS, ES2015 등)
    "outDir": "dist",                  생성된 자바스크립트 코드를 출력할 디렉터리
    "sourceMap": true,           소스 맵(Source Map)이란 배포용으로 빌드한 파일과 원본 파일을 서로 연결시켜주는 기능
    "strict": true, 강력추천  유효하지 않은 코드를 확인할 때 가능한 엄격하게 검사 코드가 적절 타입을 갖추도록 강제
    "target": "es2015"            어떤 버전의 자바스크립트로 컴파일 되고 싶은 지
  },
  "include": ["src"]               TSC[]가 타입스크립트 파일을 찾을 디렉터리로, 어떤 파일들이 컴파일 과정에 포함되는지 TSC에게 알려주는 부분, 컴파일 과정에서 포함할 파일의 배열 []을 적으면 된다.
} 

 

3. 
TSLint는 선택사항이지만,

보통 프로젝트는 TSLint 설정을 정의하는 tslint.json 파일도 포함한다. 모든 TS 프로젝트에 일관된 코딩 스타일(탭, 공백 등…)을 사용하도록 강력 권장해준다. 코드리뷰 시간이 짧아진다.

./node_modules/.bin/tslint --init : 디폴트 tslint.json 파일 생성 명령어

tslint.json


{
    "defaultSeverity": "error",
    "extends": [
        "tslint:recommended"
    ],
    "jsRules": {},
    "rules": {},
    "rulesDirectory": []
}
만들어진 파일은 자신의 코딩 스타일에 맞게 편집할 수 있다.

저자와 똑같이 편집


{
  "defaultSeverity": "error",
  "extends": ["tslint:recommended"],
  "rules": {
    "semicolon": false,
    "trailing-comma": false
  }
}
4.
 이제 src 디렉터리에 index.ts를 추가한다.

index.ts


console.log("Hello Ts!");
 


tsc 명령어를 이용해 컴파일


#TSC로 타입스크립트 컴파일
./node_modules/.bin/tsc
#NodeJS로 코드 실행
node ./dist/index.js
 


이제 JavaScript 파일과 .map 파일이 생성되었다.

index.js


"use strict";
console.log("Hello Ts!");
//# sourceMappingURL=index.js.map

index.js.map


{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":";AAAA,OAAO,CAAC,GAAG,CAAC,WAAW,CAAC,CAAC"}
 

<연습문제>

타입스크립트 타입 추론확인 : 


let a = 1 + 2; //number
let b = a + 3; //number
let c = {
  apple: a,
  banana: b,
};
//let c = {
//  apple: a,
//  banana: b,
//}
let d = c.apple * 4; //number

 
 

대체 개인 연습 설정

npm start 입력하면 node로 실행하게끔

package.json


{
  "name": "trash",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "node dist/index.js",
    "prestart": "tsc"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@types/node": "^17.0.23",
    "tslint": "^6.1.3",
    "typescript": "^4.6.3"
  }
}

tsconfig.json


{
  "compilerOptions": {
    "lib": ["es2015"],
    "module": "commonjs",
    "outDir": "dist",
    "sourceMap": true,
    "strict": true,
    "target": "es2015"
  },
  "include": ["src"],
  "exclude": ["node_modules"]
}