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/15 15:00] – [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 69: Line 139:
  
 ===== Fundamentals ===== ===== Fundamentals =====
 +
 +  * 
   * 트랜스파일러(transpiler)   * 트랜스파일러(transpiler)
   * 비구조화 할당(destructuring assignment   * 비구조화 할당(destructuring assignment
Line 83: Line 155:
   * 추상 데이터 타입(abstract data type)   * 추상 데이터 타입(abstract data type)
   * 합집합 타일(union 또는 sum type), 교집합 타입(intersection 또는 product type)   * 합집합 타일(union 또는 sum type), 교집합 타입(intersection 또는 product type)
 +  * 
 +  * 
   * package.json   * package.json
   * tsconfig.json   * tsconfig.json
Line 105: Line 179:
   * 상속 extends, super 키워드   * 상속 extends, super 키워드
   * static 속성 in class   * static 속성 in class
-  * +  * 구조화 structuring <-> 비구조화 destructuring 
 +  * 잔여 연산자 rest operator, 전개 연산자 spread operator 
 +  * 타입 변환 type conversion, cf.) type casting, type coercion 
 +  * 타입 단언 type assertion 
 + 
 + 
 +  * 매개변수 parameter, 인수 혹은 인자 argument 
 +  * 함수 시그니처 function signature 
 +  * 타입 별칭 type alias 
 +  * undefined, null 
 +  * 선택적 매개변수 optional parameter 
 +  * 함수 표현식 function expression 
 +  * 일등 함수 first-class function 
 +  * 표현식, 함수 표현식, 계산법, 함수 호출 연산자, 익명 함수 
 +  * 실행문 지향 언어 execution-oriented language, 표현식 지향 언어 expression-oriented language, 다중 패러다임 언어 multi-paradigm language 
 +  * 표현식 문 expression statement 
 +  * 복합 실행문 compound statement 
 +  * 고차 함수 high-order function, 클로저 closure, 부분 애플리케이션 partial application, 부분 적용 함수 partially applied function 
 +  * 디폴트 매개변수 default parameter 
 +  * 클래스 메서드, this, 메서드 체인 method chain 
 + 
 + 
 +  * 배열, 튜플, 인덱스 연산자; [] 
 +  * for...in 인덱스값, for...of 아이템값 
 +  * 제네릭 타입 generics 
 +  * 선언형 프로그래밍 declarative programming, 명령형 프로그래밍 imperative programming,  
 +  * 배열의 map, reduce, filter 메서드 
 +  * 순수 함수 pure function, 불순 함수 impure function 
 +  * 타입 수정자 readonly 
 +  * 불변 immutable, 가변 mutable 
 +  * 깊은 복사 deep-copy, 얕은 복사 shallow-copy 
 +  * 가변 인수 variadic arguments 
 +  * 반복기 iterator, Iterable<T>와 Iterator<T> 인터페이스 
 +  * 생성기 generator, yield, function*, 세미코루틴 semi-coroutine 반협동 루틴, 멀티스레드 multi-thread, 싱글스레드 single-thread 
 +  * 세미코루틴, 코루틴 
 + 
 + 
 +  * 동기 synchronous, 비동기 asynchronous 
 +  * Promise -> resolve와 reject 함수, then-체인, .resolve 메서드, .reject 메서드, .race 메서드, .all 메서드 
 +  * async/await;  
 + 
 + 
 +  * 함수형 프로그래밍 = 순수 함수와 선언형 프로그래밍의 토대 위에 함수 조합(function composition)과 모나드 조합(monadic composition)으로 코드를 설계하고 구현하는 기법 
 +    * 람다수학(ramda calculus): 조합 논리와 카테고리 이론의 토대가 되는 논리 수학 
 +    * 조합 논리(combinatory logic): 함수 조합의 이론적 배경 
 +    * 카테고리 이론(category theory): 모나드 조합과 고차 타입의 이론적 배경 
 +    * 정적 타입(static type), 자동 메모리 관리(automatic memory management), 계산법(evaluation), 타입 추론(type inference), 일등 함수(first-class function)에 기반을 두고, 대수 데이터 타입(algebraic data type), 패턴 매칭(pattern matching), 모나드(monad), 고차 타입(high order type) 등의 고급 기능 제공 
 +    * cf.) LISP, meta language ML, Haskell, scala 
 +  * 제네릭 함수, 제네릭 타입 generic type 
 +  * 일대일 관계 one-to-one relationship, mapping, map 
 +  * 고차함수, 커리, 애리티(arity) 매개변수의 개수 
 +  * 고차 함수 high-order function, 1차 함수 first-order function, 2차 고차 함수 second-order function, 3차 고차 함수 third-order function 
 +  * 커리 curry 
 +  * 부분 적용 함수 partially applied function, 부분 함수 partial function 
 +  * 클로저 closure, 지속되는 유효 범위 persistence scope 
 +  * 바깥쪽 유효 범위 outer scope, 내부 범위 inner scope, 자유 변수 free variable 
 +  * 함수 조합 function composition 
 +  * compose 함수, pipe 함수 
 +  * 포인트가 없는 함수 pointless function 
 + 
 + 
 +  * 람다 라이브러리 
 +    * 타입스크립트 언어와 100% 호환 
 +    * compose와 pipe 함수 제공 
 +    * 자동 커리(auto curry) 기능 제공 
 +    * 포인트가 없는 고차 도움 함수 제공 
 +    * 조합 논리(combinatory logic) 함수 일부 제공 
 +    * 하스켈 렌즈(lens) 라이브러리 기능 일부 제공 
 +    * 자바스크립트 표준 모나드 규격(fantasyland-spec)과 호환 
 +    * https://ramdajs.com/docs : 함수를 알파벳 순서로 분류 
 +    * https://devdocs.io/ramda/ : 함수를 기능 위주로 분류 
 +  * 기본 사용, 배열에 담긴 수 다루기, 서술자와 조건 연산, 문자열 다루기, 렌즈를 활용한 객체의 속성 다루기, 객체 다루기, 배열 다루기, 조합 논리 
 + 
 +^  ramda 패키지가 제공하는 함수 구분  ^^ 
 +^ 구분  ^ 내용  ^ 
 +| 함수(function)  | R.compose, R.pipe, R.curry 등 52개 함수  |   
 +| 리스트(list)  | 배열을 대상으로 하는 R.map, R.filter, R.reduce 등  |   
 +| 로직(logic)  | R.not, R.or, R.cond 등 불리언 로직 관련  |   
 +| 수학(math)  | R.add, R.subtract, R.multiply, R.divide 등 수 관련  |   
 +| 객체(object)  | R.prop, R.lens 등 객체와 렌즈 관련  |   
 +| 관계(relation)  | R.lt, R.lte, R.gt, R.gte 등 두 값의 관계를 파악  |   
 +| 문자열(string)  | R.match, R.replace, R.split 등 문자열을 대상으로 정규식(regular expression) 등  |   
 +| 타입(type)  | R.is, R.isNil, R.type 등  대상의 타입을 파악  |   
 + 
 +  * 자동 커리 auto curry 
 +  * 가변 인수 variadic arguments 
 +  * 순수 함수 PURE FUNCTION 
 +  * 선언형 프로그래밍 declarative programming 
 +  * 2차 방정식 quadratic equation 
 +  * 서술자 predicate 
 +  * 낙타등 표기법 camel case convention 
 +  * 렌즈 
 +    - R.lens 함수로 객체의 특정 속성에 대한 렌즈를 만든다. 
 +    - 렌즈를 R.view 함수에 적용해 속성값을 얻는다. 
 +    - 렌즈를 R.set 함수에 적용해 속성값이 바뀐 새로운 객체를 얻는다. 
 +    - 렌즈와 속성값을 바꾸는 함수를 R.over 함수에 적용해 값이 바뀐 새로운 객체를 얻는다. 
 + *조합자 combinator 
 + 
 +^  람다가 제공하는 조합자  ^^^ 
 +^ 조합자 이름  ^ 의미  ^ 람다 함수 이름  ^ 
 +| I  | identity  | R.identity  | 
 +| K  | constant  | R.always  | 
 +| T  | thrush  | R.applyTo  | 
 +| W  | duplication  | R.unnest  | 
 +| C  | flip  | R.flip  | 
 +| S  | substitution  | R.ap  | 
 + 
 + 
 +  * 제네릭 프로그래밍 
 +  * 제네릭 타입의 이해 
 +  * 제네릭 사용 
 +  * 제네릭 타입 제약(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 114: 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.1639548019.txt.gz
  • Last modified: 2021/12/15 15:00
  • by alex