public:computer:typescript

Differences

This shows you the differences between two versions of the page.

Link to this comparison view

Both sides previous revision Previous revision
Next revision		 Previous revision
public:computer:typescript [2021/12/17 14:42] – alexpublic:computer:typescript [2023/01/03 11:34] (current) – alex
Line 1: Line 1:
 ====== TypeScript ====== ====== TypeScript ======
 +
 +
 +===== Quick Start =====
 +  * typescript 설치 <sxh bash>
 +$ npm i -g typescript  # install globally, use $ tsc <typescript file>
 +# or
 +$ npm i -D typescript  # install devDependency, use $ npx tsc <typescript file>
 +
 +$ npm ls -g --depth=0  # 확인
 +$ tsc -v  # global
 +$ npx tsc -v  # local
 +</sxh>
 +  * prettier <sxh bash>
 +$ npm i tslint-config-prettier
 +</sxh>
 +  * set tslint.json <sxh json>
 +{
 +  "defaultSeverity": "error",
 +  "extends": ["tslint:latest", "tslint-config-prettier"],
 +  "jsRules": {},
 +  "rules": {
 +    "semicolon": true
 +  },
 +  "rulesDirectory": []
 +}
 +</sxh>
 +  * generate tsconfig.json <sxh json>
 +$ tsc --init
 +</sxh>
 +  * edit package.json for prettier <sxh json>
 +  "prettier": {
 +    "printWidth": 80,
 +    "useTabs": false,
 +    "tabWidth": 2,
 +    "bracketSpacing": true,
 +    "semi": true,
 +    "singleQuote": false
 +  }
 +}
 +</sxh>
 +  * install ts-node <sxh bash>
 +$ npm install -g ts-node  # global
 +$ npm install --save-dev ts-node  # local
 +</sxh>
 +
 +  * 프로젝트 시작하기 <cli prompt="$" comment="  # ">
 +$ npm init -y  # create package.json in node.js project
 +$ npm install typescript --save-dev  # add typescript
 +$ npm install @types/node --save-dev  # add node.d.ts
 +$ npx tsc --init --rootDir src --outDir lib --esModuleInterop --resolveJsonModule --lib es6,dom --module commonjs  # initialize typescript with tsconfig.json
 +$ npm install ts-node --save-dev  # to support realtime compile using ts-node
 +$ npm install nodemon --save-dev  # monitoring file change using nodemon
 +</cli>
 +
 +  * package.json <code json>
 +"scripts": {
 +  "start": "npm run build:live",
 +  "build": "tsc -p .",
 +  "build:live": "nodemon --watch 'src/**/*.ts' --exec \"ts-node\" src/index.ts"
 +},
 +</code>
 +
 +  * 실행 <cli prompt="$" comment="  # ">
 +$ npm start
 +</cli>
 +
 +  * [[https://offbyone.tistory.com/445|Node.js + TypeScript 프로젝트 만들기]]
 +  * [[https://velog.io/@grinding_hannah/TypeScript-nodemon-ts-node-%EB%AA%A8%EB%93%88-%EC%84%A4%EC%B9%98%ED%95%98%EA%B8%B0|[TypeScript] nodemon, ts-node 모듈 설치하기]]
 +  * [[https://radlohead.gitbook.io/typescript-deep-dive/nodejs|Node.js 시작하기]]
 +
  
 ===== Setup ===== ===== Setup =====
Line 260: Line 330:
      
  
 +===== Examples =====
 +<sxh typescript title: value 값으로 key 값 찾기>
 +  this.listJoinPath[Object.keys(this.listJoinPath).find(key => this.listJoinPath[key].dtlCd === thisjoinPathCd)].joinPathCont
 +</sxh>
 +
 +  * [[https://velog.io/@try_catch/JS-value%EA%B0%92%EC%9C%BC%EB%A1%9C-key%EA%B0%92-%EC%B0%BE%EA%B8%B0|[JS] value값으로 key값 찾기!]]
  
  
Line 268: Line 344:
   * [[https://joshua1988.github.io/ts/|타입스크립트 핸드북]]   * [[https://joshua1988.github.io/ts/|타입스크립트 핸드북]]
   * [[https://medium.com/@rnrjsah789/vscode-%EC%97%90%EC%84%9C-typescript-%ED%99%98%EA%B2%BD-%EC%84%A4%EC%A0%95%ED%95%98%EA%B8%B0-e40c9cbc2dd5|VScode 에서 Typescript 환경 설정하기]]   * [[https://medium.com/@rnrjsah789/vscode-%EC%97%90%EC%84%9C-typescript-%ED%99%98%EA%B2%BD-%EC%84%A4%EC%A0%95%ED%95%98%EA%B8%B0-e40c9cbc2dd5|VScode 에서 Typescript 환경 설정하기]]
 +  * [[https://velog.io/@grinding_hannah/TypeScript-nodemon-ts-node-%EB%AA%A8%EB%93%88-%EC%84%A4%EC%B9%98%ED%95%98%EA%B8%B0|[TypeScript] nodemon, ts-node 모듈 설치하기]]
  • public/computer/typescript.1639719732.txt.gz
  • Last modified: 2021/12/17 14:42
  • by alex