75259


下記のコードを参考に

[code]

    declare module 'foo' {
      export val bar: number;
    }
    
[/code]

型の再利用を出来るようにしたくて、ルートに `@types/api.d.ts` とファイルを作成してそこに下記のようにして記述したのですが、
`module` にあたるものをどう書いて良いか分からないです。教えて頂けないでしょうか？ `export`の位置もおかしい気がします。

[code]

    export declare type Article = {
      name: string;
      sha: string;
      size: number;
      url: string;
      html_url: string;
      git_url: string;
      download_url: string;
      type: string;
      _links: {
        self: string;
        git: string;
        html: string;
      }
    };
    
[/code]

**呼び出し側**

[code]

    import { Article } from '../@types/api'
    
[/code]

### 参照

[TypeScriptの型: 既存の JavaScript ライブラリに型情報を追加する（.d.ts
ファイル）](https://maku.blog/p/s7wk5k3/)


CC BY-SA 4.0
2021-04-13T23:27:48.623
75252
2021-04-14T04:58:37.787
2021-04-14T00:08:42.353
3060
22565
question
typescript
TypeScriptで定義した型を再利用出来るようにapi.d.tsに書いてimportしたい。


**1\. TypeScriptを使用しているプロジェクトで、型Aliasを複数のファイルで使用したい場合**

型Aliasはexport可能ですので、exportして再利用してください。

**Article.ts**

[code]

    export type Article = {
      ...
    }
    
[/code]

**Foo.ts**

[code]

    import { Article } from "./Article";
    
    const article: Article = ...
    
[/code]

**2\. あなたがJavaScriptライブラリを開発中で、そのライブラリの為の型定義ファイルを同梱して提供したい場合**

参照されているリンクのタイトルにも書かれていますが、`module`(.d.tsファイル)はJavaScriptライブラリをTypeScriptで利用するためのものです。

TypeScript の型定義ファイルと仲良くなろう - Hatena Developer Blog  
<https://developer.hatenastaff.com/entry/2016/06/27/140931#module>

この場合、JavaScriptライブラリを公開(参照)する際のモジュール名があるはずですので、その名前のmoduleないしnamespaceを`declare`で定義します。

例えばmoment.jsの場合は `moment` になります。

<https://github.com/moment/moment/blob/2.29.1/package.json#L27>

<https://github.com/moment/moment/blob/2.29.1/moment.d.ts#L19>

これにより、TypeScriptでmomentをimportした際にこのライブラリの型定義が自動で参照され、TypeScriptで利用可能になります。

**Foo.ts**

[code]

    import moment from 'moment';
    
    moment().format();
    
[/code]

moduleとnamespaceの使い分けですが、ごくごく簡単に言うとWebアプリケーションで`<script>`タグ内で全ての依存が解決されるようなライブラリの場合は`namespace`で良いです(例:`react`や`moment`)。

これに該当しない場合やNode.jsでの使用が前提の場合は`module`を使用してください。

<https://www.typescriptlang.org/docs/handbook/namespaces-and-
modules.html#using-modules>

> Namespaces can be a good way to structure your code in a Web Application,
> with all dependencies included as `<script>` tags in your HTML page.


CC BY-SA 4.0
2021-04-14T04:45:03.460
75259
2021-04-14T04:58:37.787
2021-04-14T04:58:37.787
3068
3068
75252
answer