1am wish

JSDoc : comment로만 이루어진 문법으로 이를 이용하여 js 파일에 ts 문법을 적용할 수 있다.

적용 조건 : tsconfig.json에 "allowJs": true  추가

함수 바로 위에 코멘트를 작성하는 방식으로 

js파일 위에 // @ts-check을 작성하면 js에서도 타입을 지정할 수 있다.

// @ts-check
/**
 * Intializes the project
 * @param {object} config 
 * @param {boolean} config.debug
 * @param {string} config.url
 * @returns boolean
 */

export function init(config) {
  return true;
}

/**
 * Exits the program
 * @param {number} code 
 * @returns number
 */
export function exit(code) {
  return code + 1;
}

1. directory 생성
2. %npm init -y
3. package.json
   1. main 제거
   2. 개발환경에서 build와 번거로움 없이 ts실행을 위해 ts-node 와 nodemon 설치
   3. npm i -D ts-node / npm i nodemon
4. src 디렉터리 생성하고 그안에 index.ts 생성
5. %touch tsconfig.json
   1. tsconfig.json가 있음으로써 vscode는 ts 프로젝트를 한다는 것을 정의 -> ts 관련 자동완성을 제공함
   2. ts 코드의 위치, 컴파일러 옵션(컴파일 결과 js 저장 위치, 컴파일 할 js 버전 등) 등을 작성함

{
  "include": ["src"], // ts code 위치
  "compilerOptions": {
    "outDir": "build",      // 컴파일 결과인 js가 저장될 위치
    "target": "ES6",        // 컴파일 결과인 js의 버전
    "lib": ["ES6", "DOM"],  // js가 동작하는 환경. front처럼 브라우저에서 작동한다면 "DOM". 즉 target runtime environment
    "strict": true,          // js 라이브러리나 패키지를 쓸 때, 타입을 설명해둔 declation file(~~~.d.ts을 참고하여 타입 checking
    "allowJs": true,        //d.js처럼 타입의 명시가 없는 경우에도 typescript가 타입을 추론하여 Call signature를 작성. js와 ts가 섞인 프로젝트가 가능
  }
}

{
  "name": "typechain",
  "version": "1.0.0",
  "description": "",
  "scripts": {
    "build": "tsc",
    "dev": "nodemon --exec ts-node src/index.ts",
    "start": "node build/index.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@types/node": "^18.11.9",
    "ts-node": "^10.9.1",
    "typescript": "^4.8.4"
  },
  "dependencies": {
    "nodemon": "^2.0.20"
  }
}

• Class
  • 추상 클래스(abstract) 작성이 가능하다
    • 추상 클래스는 표준화된 프로퍼티와 메소드 작성을 위해 필요 
    • private, public 말고도 protected라는 프로퍼티 접근 제어자 사용 가능
      • private : 클래스 내에서만 사용 가능. 자식 클래스에서도 사용 불가.
      • public : 클래스 내, 자식 클래스 내, 클래스 외 인스턴스에서 어디서든 사용 가능
      • protected : 클래스 내, 자식클래스에서 사용 가능. 클래스 외 인스턴스에서 사용 불가
  • 추상 메소드 작성이 가능하다
    • 추상 메소드는 Call Signature만 작성 가능하고 구현은 상속받은 클래스에서 해야한다
      • 상속받은 클래스에서 추상 메소드를 구현하지 않으면 에러 발생!
  • static 멤버를 허용한다
    • 특정 인스턴스와 연결되지 않음. 고로 클래스를 선언하지 않아도 사용 가능
• Interface
  • 오브젝트의 모양을 특정할 수 있는 간단한 방법
  • type과 다른 점 
    • 상속이 가능
    • 동명의 interface를 선언해도 typescript가 하나로 합쳐줌
  • 추상 클래스 대신 Interface를 implements하여 상속받을 수 있다.
    • 장점 : 코드가 단순화되고 가벼워짐, 여러개의 interface를 동시에 상속받을 수 있다
    • 단점 : private 과 protected는 불가하고 public 만 가능하다

class와 interface 모두 타입으로 사용 가능 !

Polymorphism 다형성 : 여러 타입을 받아들임으로써 여러 형태를 가지는 것. generic type

• concrete type : number, boolean 등 명시가 가능한 타입
• generic type : 타입의 placeholder. replace가 가능한 것

다양한 경우의 인자를 수용하는 함수를 작성할 때, 모든 경우의 Call Signature를 작성하는 것은 어렵기 때문에 다형성을 가질 수 있는 generic type을 이용한다.

generic type : 제네릭은 선언 시점이 아니라 생성 시점에 타입을 명시하여 하나의 타입만이 아닌 다양한 타입을 사용할 수 있도록 하는 기법

내가 함수를 사용한 방식을 토대로 Call Signature를 생성한다는 점에서 any와 다르다

type SuperPrint={
  <T>(arr:T[]):T;
}

const superPrint:SuperPrint=(arr)=>{return arr[0]}

// 내가 함수를 사용한 방식을 토대로 Call Signature를 생성한다.
const a=superPrint([1,2,3])
const b=superPrint([true,false,true])
const c=superPrint(["a","b"])
const d=superPrint([1,2,"a","b",true])

Call Signatures : 함수를 어떻게 선언하고 반환하는지 알려주는 것. 함수위에 마우스를 올렸을 때 보이는 것

함수의 인자와 반환 값의 타입을 미리 선언하는 방식으로 Call Signature 타입을 만들 수 있다

type Plus = (a:number, b:number) => number;
const plus : Plus = (a,b) => a+b;

Overloading : 함수가 서로 다른 여러개의 Call Signatures를 가지고 있을 때 발생시킨다.

type Plus = {
  (a:number, b:number) : number
  (a:number, b:string) : number
}

• javascript에 Type안정성을 부여하기 위해 마이크로 소프트에서 만들어진 언어이다
  • type 안정성 -> 생산성 증대 
  • 기존 javascript에서는 Type에 대한 명시가 없다. 고로 변수, 인자로 어떤 타입이 들어와야하는지 모르기 때문에 실행 전에는 에러를 감지 불가 -> 런타임 에러 발생
• 기능
  • javascript에 타입을 지정한다
    • Implicit Types : Type checker가 타입을 추론. 쉽고 가독성이 좋아서 👍
      let a = 1;
    • Explicit Types : Type을 명시
      let a : number = 1;
    • any를 사용하여 타입 미지정도 가능. 타입스크립트의 보호장치 비활성화.
  • Type alias
    • 코드의 재사용을 위해
    • type Teacher = {
          name : string,
          age : number
      }
      
      const sowon = {
          name : 'sowon',
          age : 25
      }
  • optional paramiter 선택적 변수 : 객체의 요소가 있을 수도 있고 없을 수도 있을 땐 ?를 붙임
    • ? : 정해진 타입 or undefined 
    • type Teacher = {
        name : string,
        age? : number
      }
      
  • readonly 수정 불가 옵션 : 객체의 요소를 수정할 수 없도록 하는 보호장치 like const
    • type Teacher = {
        readonly name : string,
        age? : number
      }
    • const age : readonly number[] = [1,2,3];
  • tuple : 정해진 길이와 타입을 가져야하는 array 를 지정
    • const student : [string, number] = ['sowon', 25];
  • Typescript에만 존재하는 타입
    • unknown : 변수의 타입을 미리 알지 못할 때 사용
    • void : return이 없는 함수. 따로 지정해줄 필요는 없음. (c랑 java에 있지 않나 ..?)
    • never : 절대 return 하지 않는 함수. 주로 return 하지 않고 오류를 발생시킬때 또는 타입이 여러개일 수 있을 때, 절대 되지 않을 경우 사용
      • function a() : never {
            throw new Error("no ..")
        }