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/16 23:35] – [Fundamentals] 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 218: Line 288:
  
   * 제네릭 프로그래밍   * 제네릭 프로그래밍
 +  * 제네릭 타입의 이해
 +  * 제네릭 사용
 +  * 제네릭 타입 제약(generic type constraint)
 +  * new 타입 제약
 +    * 팩토리 함수(factory function)
 +  * 인덱스 타입 제약(index type constraint)
 +  * 대수 데이터 타입(algebraic data type)
 +    * ADT 추상 데이터 타입(abstract data type)
 +    * 합집합 타입(union type) or |, 교집합 타입(intersection type) and &
 +  * 식별 합집합(discriminated unions)
 +  * 타입 가드(type guard)
 +    * instanceof 연산자
 +    * is 연산자
 +  * F-바운드 다형성(F-bound polymorphism)
 +  * nullable 타입
 +  * 옵션 체이닝(option chaining)
 +  * 널 병합 연산자(nullish coalescing operator)
 +  * 세이프 내비게이션 연산자(safe navigation operator)
 +  * 펑터(functor)
 +  * NaN(Not a Number)
 +  
 +
 +
 +  * 모나드(Monad)
 +  * 카테고리 이론(category theory)
 +  * 코드 설계 패턴(design pattern)
 +  * 타입 클래스(type class)
 +  * 고차 타입(higher-kinded type)
 +  * 판타지랜드 규격(fantasy-land)
 +  * 모나드 조건
 +    * 펑터(Functor): map이라는 인스턴스 메서드를 가지는 클래스
 +    * 어플라이(Apply): 펑터이면서 ap라는 인스턴스 메서드를 가지는 클래스
 +    * 애플리커티브(Applicative): 어플라이이면서 of라는 클래스 메서드를 가지는 클래스
 +    * 체인(Chain): 애플리커티브이면서 chain이라는 메서드를 가지는 클래스
 +  * 모나드 룰, 왼쪽 법칙, 오른쪽 법칙
 +  * 엔도(endo)-, 엔도펑터(endofunctor)
 +  * Maybe 모나드; Just 모나드, Nothing 모나드
 +  * Validation 모나드; Success 모나드, Failure 모나드, -> 비밀번호 검증, 이메일 주소 검증, 
 +  * IO 모나드;
 +
 +  
 +
 +===== 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 226: 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.1639665345.txt.gz
  • Last modified: 2021/12/16 23:35
  • by alex