TIL 10/4

Rami·2024년 10월 4일
TIL

TodayILearn

목록 보기
15/61

type과 interface

공통점 : 타입스크립트에게 오브젝트의 모양과 타입을 알려주는 게 목표
차이점 : 이용해서 할 수 있는 것이 다름

공통점1

type

type PlayerA = {
    name: string
}
const playerA: PlayerA = {
    name: "nico"
}

interface

interface PlayerB {
    name: string
}
const playerB: PlayerB = {
    name: "nico"
}

공통점2 : 추상클래스 대체하는 방법

type

type PlayerA = {
    firstName: string
}
class User1 implements PlayerA {
    constructor(
        public firstName: string
    ){}
}

interface

interface PlayerB {
    firstName: string
}
class User2 implements PlayerB {
    constructor(
        public firstName: string
    ){}
}

차이점1 : 상속하는 방법

type

type playerA = {
  name: string
}

// 상속
type PlayerAA = PlayerA & {
  lastName: string
}

const playerA: PlayerAA = {
  name: "nico",
  lastName: "oh"
}

interface

interface PlayerB {
  name: string
}

// 상속
interface PlayerBB extends PlayerB {
  lastName: string
}

const playerB: PlayerB {
  name: "nico"
}

차이점2 : 프로퍼티에 type 추가하는 방법

type

type PlayerA = {
    name: string
}

type PlayerAA = PlayerA & { // 상속방법
    lastName: string
}

type PlayerAA = { // 타입추가 ❌ Error : Duplicate identifier 'PlayerAA'
    health: number
}
const playerA: PlayerAA = {
    name: "nico",
    lastName: "oh"
}

interface

interface PlayerB {
    name: string
}
interface PlayerBB extends PlayerB { // 상속방법
    lastName: string
}

interface PlayerBB { // 타입추가 ⭕
    health: number
}

const playerB: PlayerB = {
    name: "nico"
}

결론

  • 클래스나 오브젝트의 모양을 정의하고 싶으면 > type
  • 그외의 경우 > interface

Polymorphism

  • 다형성 : 다른 모양의 코드를 가질 수 있게 해 주는 것
  • 다형성을 이룰 수 있는 방법 : 제네릭 사용!
  • 제네릭 : placeholder 타입을 쓸 수 있도록 해줌(not concrete type!) -> 같은 코드를 다른 타입에 대해서 쓸 수 있도록 해준다.

로컬스토리지 API 따라해보기 : 제네릭으로

interface SStorage<T> {
    [key:string]
}

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

// LocalStrotage class를 쓰고 싶다면 아래와 같이 만들어야한다.
const stringsStorage = new LocalStrotage<string>()
stringsStorage.get("key") //  LocalStrotage<string>.get(key: string): string 
stringsStorage.set("hello", "how are you")

const booleansStorage = new LocalStrotage<boolean>()
booleansStorage.get("key") //  LocalStrotage<boolean>.get(key: string): boolean
booleansStorage.set("hello", true)

5.1 Targets

tsconfig.json

{
    "include": ["src"], // 자바스크립트로 컴파일하고 싶은 디렉터리를 넣어줌
    "compilerOptions": {
        "outDir": "build", // 자바스크립트 파일이 생성 될 디렉터리를 지정
        "target": "ES3", // target은 어떤 버전의 자바스크립트로 > 타입스크립트를 컴파일 하고 싶은지 나타냄
    }
}

"target": "ES3"으로 설정 후 npm run build

"target": "ES6"으로 설정 후 npm run build

ts 입력한 것 컴파일 된 js 모습

TS

class Block {
    constructor(private data: string){}
    static hello() {
        return "hiiii";
    }
}

JS

var Block = /** @class */ (function () {
    function Block(data) {
        this.data = data;
    }
    Block.hello = function () {
        return "hiiii";
    };
    return Block;
}());

5.2 Lib Configuration

tsconfig.json의 lib 옵션은 TypeScript가 특정 환경에서 사용할 수 있는 빌트인 라이브러리의 타입 정의 파일을 포함하도록 설정하는 옵션입니다. 이를 통해 특정 기능 및 API를 사용할 때, TypeScript가 올바른 타입 정보를 제공할 수 있게 해줍니다.

lib 옵션이란?

lib 옵션은 TypeScript 컴파일러가 참조할 내장 라이브러리의 타입 정의 파일을 지정합니다. 예를 들어, lib: ["ES6", "dom"]를 추가하면 TypeScript는 ES6의 기능 (예: Promise, Array.includes)과 DOM API (예: document, window)를 사용할 수 있게 됩니다.

기본적으로 tsconfig.json의 lib 옵션을 설정하지 않으면, TypeScript는 현재 설정된 target에 따라 자동으로 적절한 라이브러리를 포함합니다. 예를 들어, target이 ES5로 설정된 경우, lib 옵션은 ["ES5"]가 기본값으로 설정되고, target이 ES6로 설정된 경우 lib 옵션은 ["ES6", "dom"]으로 설정됩니다.

왜 lib 옵션을 추가하지 않아도 타입 정의가 잘 나올까?

lib 옵션을 추가하지 않아도 call signature가 잘 나오는 이유는 기본 lib 설정이 이미 TypeScript 환경에서 충분한 타입 정의를 제공하기 때문입니다.

  1. lib 기본 설정:

    • tsconfig.json 파일에서 lib 옵션을 설정하지 않으면, TypeScript는 target 옵션에 따라 자동으로 적절한 라이브러리 정의를 포함합니다.
    • 예를 들어, target: "ES6"로 설정된 경우, TypeScript는 자동으로 ES6의 라이브러리 타입 정의와 DOM API 타입 정의를 포함합니다.
    • 즉, lib 옵션을 따로 지정하지 않아도, TypeScript는 ES6 및 DOM 환경에서 사용할 수 있는 타입 정보를 자동으로 제공하게 됩니다.

  2. lib 옵션의 기본값:

    • lib 옵션이 설정되지 않았을 때, 기본적으로 TypeScript는 target에 맞는 내장 라이브러리 파일들을 포함합니다.
    • 예를 들어, target: "ES5"일 경우 기본값은 ["ES5", "DOM"]입니다.
    • target: "ES6"일 경우 기본값은 ["ES6", "DOM"]입니다.
    • 만약 target이 ESNext로 설정된 경우, 최신 ECMAScript의 타입 정의 파일과 DOM 라이브러리가 포함됩니다.

  3. IDE 및 에디터의 자동 포함 기능:

    • 만약 tsconfig.json 파일에 lib 설정이 없더라도, Visual Studio Code 같은 IDE는 내부적으로 lib 옵션을 자동으로 감지하고 필요한 라이브러리 정의를 포함하여, 올바른 타입 정보를 제공합니다.
    • TypeScript 서비스가 동작하면서 프로젝트의 환경에 맞는 타입 정보를 제공하기 때문에, lib 설정 없이도 call signature가 자동으로 표시될 수 있습니다.

예시를 통한 설명

다음 예시를 통해, lib 옵션이 없어도 call signature가 잘 나오는 이유를 이해해볼 수 있습니다.

예제 1: tsconfig.json에 lib 옵션이 없는 경우

tsconfig.json 파일이 다음과 같이 설정되어 있다고 가정해봅시다:

{
  "compilerOptions": {
    "target": "ES6"
  }
}
  • 이 경우, TypeScript는 ES6 표준을 지원하는 타입 정의 파일(es6.d.ts)과 DOM 타입 정의 파일(dom.d.ts)을 자동으로 포함합니다.
  • 따라서, lib 옵션을 추가하지 않아도 Promise, Array.includes, document, window와 같은 타입 정보가 잘 나타나고 call signature도 정상적으로 표시됩니다.

예제 2: lib 옵션을 명시적으로 지정한 경우

{
  "compilerOptions": {
    "target": "ES6",
    "lib": ["ES6", "DOM"]
  }
}
  • lib 옵션을 명시적으로 지정하면, TypeScript는 설정된 라이브러리만 참조하여 타입 정보를 제공합니다.
  • 이 경우에도 Promise, Array.includes, document, window 등의 타입 정보가 잘 나타납니다.

정리

  • 기본적으로 lib 옵션을 설정하지 않아도 TypeScript는 target에 따라 적절한 라이브러리를 자동으로 포함합니다.
  • target이 ES6로 설정되면, ES6와 DOM 라이브러리가 자동으로 포함되므로 lib 옵션을 추가하지 않아도 대부분의 타입 정보를 확인할 수 있습니다.
  • IDE(예: VS Code)가 TypeScript 서비스와 연동되어, 필요한 타입 정보를 자동으로 로드하여 call signature를 표시해주는 기능도 있기 때문에, lib 옵션이 없어도 call signature가 잘 나타날 수 있습니다.

5.5 Blocks

$ npm i -D ts-node
빌드없이 타입스크립트를 실행할 수 있게 됨.

$ npm i nodemon
자동으로 커맨드를 실행해줘서 일일히 커맨드를 실행할 필요가 없어짐 (서버를 재시작할 필요가 없다)

npm run dev 입력후

5.6 DefinitelyTyped

$ npm i -D @types/node
: nodejs를 위한 type 전부 설치하는 코드
즉, 타입을 먼저 설치하고 > node를 설치하면 됨
ex) axon : axon을 먼저 설치하고 @types/axon 하면 됨

profile
Rami
YOLO
이전 포스트

TIL 10/2

다음 포스트

TIL 10/7

0개의 댓글