[Typescript] 타입스크립트로 블록체인 만들기 강의 학습 #6

Polymorphism (다형성)

다형성은 다른 모양의 코드를 가질 수 있다.
인터페이스, 제네릭를 사용해서 로컬 스토리지 API와 같은 클래스를 작성한다.

// 기존에 선언되어 있는 인터페이스를 override
interface Storage {...}

interface SStorage<T> {
	[key: string]: T
}
class LocalStorage<T> {
	private storage: SStorage<T> = {}
    set(key: string, value: T){
    	if(this.storage[key] === undefine){
        	this.storage[key] = value
        }
    }
    remove(key: string){
    	delete this.storage[key]
    }
    get(key: string):T {
    	return this.storage[key]
    }
    clear(){
    	this.storage = {}
    }
}

// 타입스크립트가 제네릭을 통해 call signature을 자동으로 생성해준다. 
const stringStorage = new LocalStroage<string>()
stringStorage.set("key1", "hello");
stringStroage.get("key1");
const booleanStorage = new LocalStorage<boolean>()
booleanStorage.set("key1", true);

interface Storage는 이미 타입스크립트에 의해 이미 선언된 자바스크립트의 웹 스토리지 API를 위한 인터페이스다.

컴퓨터 시스템에서 타입스크립트 프로젝트를 설정하는 방법을 설명한다.
기존에는 타입스크립트 공식 웹사이트에서 제공하는 온라인 playground를 사용했다. (url: )

타입스크립트 프로젝트 설정

리액트에서 제공하는 Create React App 혹은 NextJS, NestJS를 통해 생성하는 프레임워크는 미리 타입스크립트를 사용하기 위한 설정들을 자동으로 해준다.
강의 영상에서는 node.js와 visual code를 사용했고, 본 글에서는 IntelliJ IDE를 사용한다.

typechain 이름의 폴더 생성
IDE로 해당 폴더 열기
npm init -y 로 package.json 생성
main 삭제 후 script 수정 (test는 필요없음)
npm install -D typescript
D를 입력함으로써 타입스크립트가 devDependecies로 추가된다.
src 폴더 생성하고 index.ts 파일 생성

// index.ts
const hello = () => "hi";

tsconfig.json 파일 생성 (IDE에게 타입스크립트를 사용한다는 것을 알려준다.)

타입스크립트 파일이 어디에 위치하는지 알려줘야 함
{
	"include": ["src"],
    "compilerOptions": {"outDir": "build}
}

• include 배열에는 자바스크립트로 컴파일하고 싶은 모든 디렉터리를 넣으면 된다.
  -compilerOptions에 outDir는 자바스크립트 파일이 생성될 디렉터리를 의미한다.

package.json에서 script.build 값을 수정한다.
"scripts": { "build": "tsc"},

package.json 파일을 수정한 후 npm run build를 입력해주면 tsc가 작동한다.
npm index.js 명령어 처럼 단일 js 파일을 터미널에서 실행할 수 있지만, 타입스크립트는 node index.ts로 실행할 때 에러가 발생한다. 따라서, ts 파일을 js 파일로 tsc 명령어를 통해 컴파일을 먼저 해야한다.
빌드는 src/index.ts 파일의 타입스크립트를 컴파일해서 build/index.js 자바스크립트로 변환된다.

{
	"include": ["src"],
    "compilerOptions": {
    	"outDir": "build,
        "target": "es6"
        "lib": ["ES6", "DOM"]
        "strict": true
    }
}

target은 어떤 버전의 자바스크립트로 컴파일 하고 싶은지 나타낸다. ex) 화살표 함수 () => {} 는 es5 이하이면 함수 표현식으로 변경된다.
lib는 해당 코드가 실행될 실행 환경에 대한 정보를 제공한다.
strict는 strict mode를 설정함으로써 타입스크립트가 컴파일 에러를 통해 개발자를 실수로부터 보호한다.

"lib": ["ES6", "DOM"]

ES6를 지원하는 서버와, DOM, 즉 브라우저 환경에서 코드를 실행시킨다.
lib에 "DOM"을 추가하면, index.ts에서 document가 가지고 있는 모든 이벤트와 메소드를 사용할 수 있도록 보여준다.

d.ts file

Declaration File이 뭔지, 그 것을 우리가 추가할 수는 없는지 알아본다.
타입스크립트는 내장된 자바스크립트 API를 위한 기본적인 타입 정의는 가지고 있다.
type definition (타입 정의)는 타입스크립트에게 몇몇 자바스크립트 코드의 타입을 설명해주기 위해 사용하는 것
우리는 다른 패키지나 프레임워크, 라이브러리를 사용하는데 대부분 타입스크립트가 아닌 자바스크립트로 만들어져있다. 따라서, 타입스크립트에서 자바스크립트로 만들어져 있는 것들의 타입에 대해 알 방법이 없다. 따라서, 타입스크립트는 개발자가 자바스크립트 코드를 쓸 수 있도록 해준다.
타입스크립트는 개발자가 자바스크립트 라이브러리나 패키지를 사용한다는 것을 알고 있다.
정의 파일 Declaration file은 자바스크립트 코드의 모양을 타입스크립트에게 설명해주는 파일이다.

// myPackage.js
export function init(config){
    return true;
}
export function exit(code){
    return code + 1;
}

myPackage.js 생성 후 index.tsx에서 import해도 찾을 수 없다. 자바스크립트로 작성된 myPackage.js를 타입스크립트로 읽을 수 있게 d.ts 파일을 작성해야 한다.

// myPackage.d.ts
interface Config {
    url: string;
}
declare module "myPackage"{
    function init(config: Config): boolean;
    function exit(code: number): number;
}

myPackage.d.ts 파일 생성 후 구현체가 아닌 call signature를 작성해서 타입스크립트에게 해당 패키지 정보를알려준다.

// index.ts
import { init, exit } from "myPackage";

init({
    url: "https://velog.io/@jhcha"
});

exit(1);

정의 파일 (d.ts)생성 후 index.ts 파일에서 정상적으로 자바스크립트 패키지를 호출할 수 있게 된다.
따라서, 컴파일러 옵션의 lib은 사용할 환경에 대해 사전에 정의되어 있는 정의 파일들을 포함하게 한다.

{
    "compilerOptions": {
        "lib": ["ES6", "DOM"]
    }
}

Commonjs

"compilerOptions": {
    	"esModuleInterop": true,
}

강의 중 자바스크립트로 직접 만든 패키지를 타입스크립트에서 불러오는 부분에서 갑자기 esModuleInterop 라는 옵션이 추가되어 찾아봤다.
먼저, commonjs 모듈은 nodejs에서 자바스크립트 패키지를 불러올 때 사용하는 방식이다. 현재는 ECMAScript(esmodule) 방식도 지원한다.

참고자료: https://yceffort.kr/2023/05/what-is-commonjs

"compilerOptions": {
    	"allowJs": true
}

allowJs 옵션을 통해 타입스크립트는 자바스크립트 코드를 자동으로 사용할 수 있다.
타입을 추론하여 call signature를 자동으로 생성하기 때문에 any 타입이 포함될 수 있다.

// myPackage.js
// @ts-check
/**
 * Initiallizes the project
 * @param {object} config 
 * @param {string} config.debug
 * @param {string} config.url
 * @returns boolean
 */
export function init(config){
    return true;
}
/**
 * 
 * @param {number} code 
 * @returns number
 */
export function exit(code){
    return code + 1;
}

// index.ts
import {init, exit} from "./myPackage"

console.log(init(
    {
        debug: "abc",
        url: "abc"
    }
))

console.log(exit(1))

만약, 패키지로 불러온 파일에서 js를 변경하기 어려운 경우 JSDoc을 사용해서 타입스크립트가 자바스크립트를 해석할 수 있도록 한다.
JSDoc과 정의 파일 (d.ts)은 타입스크립트에게 자바스크립트 코드를 알려주기 위한 같은 목적을 가진다.