ABOUT ME

-

Today
-
Yesterday
-
Total
-
  • Typescript - d.ts
    Front-end/Typesrcipt 2023. 4. 18. 23:32
    728x90
    반응형

    Typescript d.ts

    Typescript d.ts 파일이란 타입정의들을 보관하는 파일이다.

    d.ts파일은 자동으로 글로벌 모듈이 아니여서 다른파일이 참조하여 사용 할 수 없다.

    // test.d.ts
    // 타입들의 정의를 보관하는 파일이다.
    
    export type Age = number;	// export 키워드를 사용하여 다른 타입스크립트 파일에서 사용한다.
    export interface Person {
        name: string
    }

     

    모든 타입들을 정리해 놓은 레퍼런스용 d.ts 파일을 자동으로 생성하기 위해선 tsconfig.json 파일에서  옵션을 추가한다.

    // tsconfig.jon
    
    {
        "compilerOptions": {
            "target": "ES5",
            "module": "CommonJS",
            "strictNullChecks": true,
            "declaration": true	// declaration 옵션을 추가
        },
    }

    declaration 옵션을 추가하면 타입스크립트 파일을 저장 할 때 마다 d.ts파일이 자동으로 생성이된다.

     

    // index.ts
    // declaration 옵션을 추가한 후 변수를 저장한다.
    
    let myName: string = 'zelord';
    type Info = { name: string };

     

    declaration 옵션을 추가한 후 저장을 하면 자동으로 index.d.ts 파일이 생성된다.

    // index.d.ts
    // 자동으로 파일이 생성되어 타입정의들을 보관한다.
    
    declare let myName: string;
    type Info = {
        name: string;
    };

    자동으로 생성되는 d.ts파일들은 수정하면 안된다.

     

     

     

    반응형

     

     

     

    d.ts 파일들을 글로벌 모듈로 만들기 위해선 tsconfig.json 파일에서 typeRoots 옵션을 추가해줘야한다.

    // tsconfig.jon
    
    {
        "compilerOptions": {
            "target": "ES5",
            "module": "CommonJS",
            "strictNullChecks": true,
            "declaration": true,
            "typeRoots": ["./폴더명"],	// 폴더안에 들어있는 타입들은 글로벌 모듈이된다.
        },
    }

    폴더명을 입력한 후 폴더를 생성해서 그 폴더안d.ts파일을 넣어준다.

    typeRoots 옵션을 선언하면 외부라이브러리 타입들을 사용할 수 있는 @types 폴더가 자동으로 선언되지않아 추가를 해주어야한다.

     

    // ./types/common 파일 속 test.d.ts파일
    
    type Age = number;

    test.d.ts 파일 속 타입을 선언한다.

     

    // index.ts
    
    let myName: Age = 27;	// test.d.ts 파일 안에 선언된 타입을 사용할 수 있다.

    test.d.ts 파일 속 선언된 타입을 불러와 타입을 선언한다.

    728x90
    반응형

    'Front-end > Typesrcipt' 카테고리의 다른 글

    Typescript - index signatures  (0) 2023.04.19
    Typescript - implements  (2) 2023.04.19
    Typescript - declare  (0) 2023.04.18
    Typescript - tuple type  (0) 2023.04.18
    Typescript - generics  (0) 2023.04.18
Designed by Tistory.