如何使用 typescript 声明（.ts.d 文件）在 angular cli 应用程序中使用第三方 javascript API / SDK？答案

【问题标题】：How Do I use typescript declarations (.ts.d files) to consume a third party javascript API / SDK in an angular cli application?如何使用 typescript 声明（.ts.d 文件）在 angular cli 应用程序中使用第三方 javascript API / SDK？
【发布时间】：2025-12-06 22:10:01
【问题描述】：

我想在我的 Angular cli 项目中使用 Dropbox API，它是一个 javascript API。 API 附带 Typescript 定义。这是 dist 文件夹的样子。

他们有一个示例函数，它返回写在.ts 文件和.js 文件中的文件列表：这是basic.js 和basic.ts，它们返回文件列表： basic.js:

和basic.ts: 这是脚本正在操作的 html 文件以供参考：

<!doctype html>
<html>
<head>
  <title>Dropbox TypeScript SDK</title>
  <link rel="stylesheet" href="/styles.css">
  <script src="/__build__/Dropbox-sdk.min.js"></script>
</head>
<body>
  <!-- Example layout boilerplate -->
  <header class="page-header">
    <div class="container">
      <nav>
        <a href="/">
          <h1>
            <img src="https://cfl.dropboxstatic.com/static/images/brand/logotype_white-vflRG5Zd8.svg" class="logo" />
            TypeScript SDK Examples
          </h1>
        </a>
        <a href="https://github.com/dropbox/dropbox-sdk-js/tree/master/examples/typescript" class="view-source">View Source</a>
      </nav>
      <h2 class="code">
        <a href="/">examples</a> / basic
      </h2>
    </div>
  </header>

  <!-- Example description and UI -->
  <section class="container main">
    <p>This example fetches the contents of your root Dropbox directory. It uses the <code>Dropbox.filesListFolder()</code> method [<a href="http://dropbox.github.io/dropbox-sdk-js/Dropbox.html#filesListFolder">docs</a>].</p>

    <form onSubmit="return listFiles()">
      <input type="text" id="access-token" placeholder="Access token" />
      <button type="submit">Submit</button>
    </form>

    <!-- The files returned from the SDK will be added here -->
    <ul id="files"></ul>

    <p class="info">To obtain an access token for quick testing, you can go to <a href="https://dropbox.github.io/dropbox-api-v2-explorer/#files_list_folder" target="_blank">API Explorer</a> click the "Get Token" button on the top right, copy the token it creates and then paste it here.</p>
  </section>

  <!-- Scripts to run example -->
  <script src="basic.js"></script>
</body>
</html>

如何使用此 API？我安装了 npm 但如何使用 .d.ts 文件？我应该为我的 Angular 项目使用 .ts 或 .js 代码吗？我想在我的打字稿组件之一中使用 api？我不知道如何在我的角度组件中包含定义和使用这些定义。我假设我在angular-cli.json 中包含Dropbox-sdk.min.js 是我的脚本，但是我在哪里或如何包含.d.ts 文件以及哪些是必要的？我在 Dropbox github 上没有找到相关文档。 github 包含 typescript 和 javascript 使用的完整工作示例，但这是一个令人困惑的项目，因为它似乎将许多不同的东西混合到项目中，我不知道如何为 angular-cli 应用程序翻译它https://github.com/dropbox/dropbox-sdk-js 如果我应该在问题中包含其他内容，请告诉我！

【问题讨论】：

标签： javascript angular typescript dropbox-api

【解决方案1】：

我要说的是，您应该能够像在顶部的任何其他 Angular 界面一样导入它们，然后在您的组件中引用它们，但是查看他们的 repo 他们如何生成他们的类型看起来有点奇怪。几乎就像他们在声明使用生成器动态构建类型的模块一样。我对此一无所知。您可以随时尝试删除此 Dropbox 类周围的模块包装器 - https://github.com/dropbox/dropbox-sdk-js/blob/master/generator/typescript/dropbox.d.ts

然后在第二行的 Dropbox 类定义之前添加“导出”？

这里就像剥夺了所有的 cmets。

EDIT - 看起来你需要对这个文件、基类和接口做同样的事情。 https://github.com/dropbox/dropbox-sdk-js/edit/master/generator/typescript/dropbox_types.d.ts 导出接口和类并删除模块行。

然后您应该能够创建一个 index.ts 文件，该文件从两个文件中导出所有语句。

我觉得这不是正确的方法....但我不明白为什么它不起作用。

export class Dropbox extends DropboxBase {

constructor(options: DropboxOptions);


public authTokenFromOauth1(arg: auth.TokenFromOAuth1Arg): Promise<auth.TokenFromOAuth1Result>;

public authTokenRevoke(arg: void): Promise<void>;

public filesAlphaGetMetadata(arg: files.AlphaGetMetadataArg): Promise<files.FileMetadataReference|files.FolderMetadataReference|files.DeletedMetadataReference>;

public filesAlphaUpload(arg: files.CommitInfoWithProperties): Promise<files.FileMetadata>;

public filesCopy(arg: files.RelocationArg): Promise<files.FileMetadataReference|files.FolderMetadataReference|files.DeletedMetadataReference>;

public filesCopyBatch(arg: files.RelocationBatchArg): Promise<files.RelocationBatchLaunch>;


public filesCopyBatchCheck(arg: async.PollArg): Promise<files.RelocationBatchJobStatus>;


public filesCopyReferenceGet(arg: files.GetCopyReferenceArg): Promise<files.GetCopyReferenceResult>;

public filesCopyReferenceSave(arg: files.SaveCopyReferenceArg): Promise<files.SaveCopyReferenceResult>;


public filesCopyV2(arg: files.RelocationArg): Promise<files.RelocationResult>;


public filesCreateFolder(arg: files.CreateFolderArg): Promise<files.FolderMetadata>;

public filesCreateFolderV2(arg: files.CreateFolderArg): Promise<files.CreateFolderResult>;


public filesDelete(arg: files.DeleteArg): Promise<files.FileMetadataReference|files.FolderMetadataReference|files.DeletedMetadataReference>;

public filesDeleteBatch(arg: files.DeleteBatchArg): Promise<files.DeleteBatchLaunch>;

public filesDeleteBatchCheck(arg: async.PollArg): Promise<files.DeleteBatchJobStatus>;

public filesDeleteV2(arg: files.DeleteArg): Promise<files.DeleteResult>;

public filesDownload(arg: files.DownloadArg): Promise<files.FileMetadata>;

public filesGetMetadata(arg: files.GetMetadataArg): Promise<files.FileMetadataReference|files.FolderMetadataReference|files.DeletedMetadataReference>;

public filesGetPreview(arg: files.PreviewArg): Promise<files.FileMetadata>;

public filesGetTemporaryLink(arg: files.GetTemporaryLinkArg): Promise<files.GetTemporaryLinkResult>;

public filesGetThumbnail(arg: files.ThumbnailArg): Promise<files.FileMetadata>;

public filesListFolder(arg: files.ListFolderArg): Promise<files.ListFolderResult>;

public filesListFolderContinue(arg: files.ListFolderContinueArg): Promise<files.ListFolderResult>;

public filesListFolderGetLatestCursor(arg: files.ListFolderArg): Promise<files.ListFolderGetLatestCursorResult>;

public filesListFolderLongpoll(arg: files.ListFolderLongpollArg): Promise<files.ListFolderLongpollResult>;

public filesListRevisions(arg: files.ListRevisionsArg): Promise<files.ListRevisionsResult>;

public filesMove(arg: files.RelocationArg): Promise<files.FileMetadataReference|files.FolderMetadataReference|files.DeletedMetadataReference>;

public filesMoveBatch(arg: files.RelocationBatchArg): Promise<files.RelocationBatchLaunch>;

public filesMoveBatchCheck(arg: async.PollArg): Promise<files.RelocationBatchJobStatus>;

public filesMoveV2(arg: files.RelocationArg): Promise<files.RelocationResult>;

public filesPermanentlyDelete(arg: files.DeleteArg): Promise<void>;

public filesPropertiesAdd(arg: files.PropertyGroupWithPath): Promise<void>;

public filesPropertiesOverwrite(arg: files.PropertyGroupWithPath): Promise<void>;

public filesPropertiesRemove(arg: files.RemovePropertiesArg): Promise<void>;

public filesPropertiesTemplateGet(arg: properties.GetPropertyTemplateArg): Promise<properties.GetPropertyTemplateResult>;

public filesPropertiesTemplateList(arg: void): Promise<properties.ListPropertyTemplateIds>;

public filesPropertiesUpdate(arg: files.UpdatePropertyGroupArg): Promise<void>;

public filesRestore(arg: files.RestoreArg): Promise<files.FileMetadata>;

public filesSaveUrl(arg: files.SaveUrlArg): Promise<files.SaveUrlResult>;

public filesSaveUrlCheckJobStatus(arg: async.PollArg): Promise<files.SaveUrlJobStatus>;

public filesSearch(arg: files.SearchArg): Promise<files.SearchResult>;

public filesUpload(arg: files.CommitInfo): Promise<files.FileMetadata>;

public filesUploadSessionAppend(arg: files.UploadSessionCursor): Promise<void>;

public filesUploadSessionAppendV2(arg: files.UploadSessionAppendArg): Promise<void>;

public filesUploadSessionFinish(arg: files.UploadSessionFinishArg): Promise<files.FileMetadata>;

public filesUploadSessionFinishBatch(arg: files.UploadSessionFinishBatchArg): Promise<files.UploadSessionFinishBatchLaunch>;

public filesUploadSessionFinishBatchCheck(arg: async.PollArg): Promise<files.UploadSessionFinishBatchJobStatus>;

public filesUploadSessionStart(arg: files.UploadSessionStartArg): Promise<files.UploadSessionStartResult>;

public paperDocsArchive(arg: paper.RefPaperDoc): Promise<void>;

public paperDocsDownload(arg: paper.PaperDocExport): Promise<paper.PaperDocExportResult>;

public paperDocsFolderUsersList(arg: paper.ListUsersOnFolderArgs): Promise<paper.ListUsersOnFolderResponse>;

public paperDocsFolderUsersListContinue(arg: paper.ListUsersOnFolderContinueArgs): Promise<paper.ListUsersOnFolderResponse>;

public paperDocsGetFolderInfo(arg: paper.RefPaperDoc): Promise<paper.FoldersContainingPaperDoc>;

public paperDocsList(arg: paper.ListPaperDocsArgs): Promise<paper.ListPaperDocsResponse>;

public paperDocsListContinue(arg: paper.ListPaperDocsContinueArgs): Promise<paper.ListPaperDocsResponse>;

public paperDocsPermanentlyDelete(arg: paper.RefPaperDoc): Promise<void>;

public paperDocsSharingPolicyGet(arg: paper.RefPaperDoc): Promise<paper.SharingPolicy>;

public paperDocsSharingPolicySet(arg: paper.PaperDocSharingPolicy): Promise<void>;

public paperDocsUsersAdd(arg: paper.AddPaperDocUser): Promise<Array<paper.AddPaperDocUserMemberResult>>;

public paperDocsUsersList(arg: paper.ListUsersOnPaperDocArgs): Promise<paper.ListUsersOnPaperDocResponse>;

public paperDocsUsersListContinue(arg: paper.ListUsersOnPaperDocContinueArgs): Promise<paper.ListUsersOnPaperDocResponse>;

public paperDocsUsersRemove(arg: paper.RemovePaperDocUser): Promise<void>;

public sharingAddFileMember(arg: sharing.AddFileMemberArgs): Promise<Array<sharing.FileMemberActionResult>>;

public sharingAddFolderMember(arg: sharing.AddFolderMemberArg): Promise<void>;

public sharingChangeFileMemberAccess(arg: sharing.ChangeFileMemberAccessArgs): Promise<sharing.FileMemberActionResult>;

public sharingCheckJobStatus(arg: async.PollArg): Promise<sharing.JobStatus>;

public sharingCheckRemoveMemberJobStatus(arg: async.PollArg): Promise<sharing.RemoveMemberJobStatus>;

public sharingCheckShareJobStatus(arg: async.PollArg): Promise<sharing.ShareFolderJobStatus>;

public sharingCreateSharedLink(arg: sharing.CreateSharedLinkArg): Promise<sharing.PathLinkMetadata>;

public sharingCreateSharedLinkWithSettings(arg: sharing.CreateSharedLinkWithSettingsArg): Promise<sharing.FileLinkMetadataReference|sharing.FolderLinkMetadataReference|sharing.SharedLinkMetadataReference>;

public sharingGetFileMetadata(arg: sharing.GetFileMetadataArg): Promise<sharing.SharedFileMetadata>;

public sharingGetFileMetadataBatch(arg: sharing.GetFileMetadataBatchArg): Promise<Array<sharing.GetFileMetadataBatchResult>>;

public sharingGetFolderMetadata(arg: sharing.GetMetadataArgs): Promise<sharing.SharedFolderMetadata>;

public sharingGetSharedLinkFile(arg: sharing.GetSharedLinkFileArg): Promise<sharing.FileLinkMetadataReference|sharing.FolderLinkMetadataReference|sharing.SharedLinkMetadataReference>;

public sharingGetSharedLinkMetadata(arg: sharing.GetSharedLinkMetadataArg): Promise<sharing.FileLinkMetadataReference|sharing.FolderLinkMetadataReference|sharing.SharedLinkMetadataReference>;

public sharingGetSharedLinks(arg: sharing.GetSharedLinksArg): Promise<sharing.GetSharedLinksResult>;

public sharingListFileMembers(arg: sharing.ListFileMembersArg): Promise<sharing.SharedFileMembers>;

public sharingListFileMembersBatch(arg: sharing.ListFileMembersBatchArg): Promise<Array<sharing.ListFileMembersBatchResult>>;

public sharingListFileMembersContinue(arg: sharing.ListFileMembersContinueArg): Promise<sharing.SharedFileMembers>;

public sharingListFolderMembers(arg: sharing.ListFolderMembersArgs): Promise<sharing.SharedFolderMembers>;

public sharingListFolderMembersContinue(arg: sharing.ListFolderMembersContinueArg): Promise<sharing.SharedFolderMembers>;

public sharingListFolders(arg: sharing.ListFoldersArgs): Promise<sharing.ListFoldersResult>;

public sharingListFoldersContinue(arg: sharing.ListFoldersContinueArg): Promise<sharing.ListFoldersResult>;

public sharingListMountableFolders(arg: sharing.ListFoldersArgs): Promise<sharing.ListFoldersResult>;

public sharingListMountableFoldersContinue(arg: sharing.ListFoldersContinueArg): Promise<sharing.ListFoldersResult>;

public sharingListReceivedFiles(arg: sharing.ListFilesArg): Promise<sharing.ListFilesResult>;

public sharingListReceivedFilesContinue(arg: sharing.ListFilesContinueArg): Promise<sharing.ListFilesResult>;

public sharingListSharedLinks(arg: sharing.ListSharedLinksArg): Promise<sharing.ListSharedLinksResult>;

public sharingModifySharedLinkSettings(arg: sharing.ModifySharedLinkSettingsArgs): Promise<sharing.FileLinkMetadataReference|sharing.FolderLinkMetadataReference|sharing.SharedLinkMetadataReference>;

public sharingMountFolder(arg: sharing.MountFolderArg): Promise<sharing.SharedFolderMetadata>;

public sharingRelinquishFileMembership(arg: sharing.RelinquishFileMembershipArg): Promise<void>;

public sharingRelinquishFolderMembership(arg: sharing.RelinquishFolderMembershipArg): Promise<async.LaunchEmptyResult>;

public sharingRemoveFileMember(arg: sharing.RemoveFileMemberArg): Promise<sharing.FileMemberActionIndividualResult>;

public sharingRemoveFileMember2(arg: sharing.RemoveFileMemberArg): Promise<sharing.FileMemberRemoveActionResult>;

public sharingRemoveFolderMember(arg: sharing.RemoveFolderMemberArg): Promise<async.LaunchResultBase>;

public sharingRevokeSharedLink(arg: sharing.RevokeSharedLinkArg): Promise<void>;

public sharingShareFolder(arg: sharing.ShareFolderArg): Promise<sharing.ShareFolderLaunch>;

public sharingTransferFolder(arg: sharing.TransferFolderArg): Promise<void>;

public sharingUnmountFolder(arg: sharing.UnmountFolderArg): Promise<void>;

public sharingUnshareFile(arg: sharing.UnshareFileArg): Promise<void>;

public sharingUnshareFolder(arg: sharing.UnshareFolderArg): Promise<async.LaunchEmptyResult>;

public sharingUpdateFileMember(arg: sharing.UpdateFileMemberArgs): Promise<sharing.MemberAccessLevelResult>;

public sharingUpdateFolderMember(arg: sharing.UpdateFolderMemberArg): Promise<sharing.MemberAccessLevelResult>;

public sharingUpdateFolderPolicy(arg: sharing.UpdateFolderPolicyArg): Promise<sharing.SharedFolderMetadata>;

public teamLogGetEvents(arg: team_log.GetTeamEventsArg): Promise<team_log.GetTeamEventsResult>;

public teamLogGetEventsContinue(arg: team_log.GetTeamEventsContinueArg): Promise<team_log.GetTeamEventsResult>;

public usersGetAccount(arg: users.GetAccountArg): Promise<users.BasicAccount>;

public usersGetAccountBatch(arg: users.GetAccountBatchArg): Promise<users.GetAccountBatchResult>;

public usersGetCurrentAccount(arg: void): Promise<users.FullAccount>;

public usersGetSpaceUsage(arg: void): Promise<users.SpaceUsage>;
}

【讨论】：

所以为了澄清，您建议创建一个 d.ts（名称重要吗？）文件并将该代码粘贴到我的 Angular 项目中使用打字稿示例？我必须将它导入到我的组件中吗？如果是这样，那是怎么做的？是否应该在 app.module.ts 中添加一些东西。抱歉，我没有任何使用 d.ts 文件的经验。
如果您手动将其导入到需要它的组件/服务中，则名称应该无关紧要。您可以将其称为 dropbox.d.ts 以将其分开。但我确实相信 index.ts 文件必须这样命名才能用作打字稿桶，因此可能会创建一个名为 dropbox 的文件夹，其中包含这两个文件。只要您删除“模块”包装并将类声明转换为“导出类”和“导出接口”，我认为它会起作用。
我是否使用 app.module.ts 注册课程？如果是这样，在哪里/如何？你能举一个导入组件的例子吗？
那么创建 2 个修改后的 .d.ts 文件和一个 index.ts 文件？ index.ts 文件中应该包含什么？
在这里，我将它们全部合并到一个文件中。它似乎满足了 Typescript 在 VS Code 中的类型检查。也许它会起作用。 brocco.ly/assets/dropbox.d.ts import into component like import { DropboxBase, Dropbox, ...也许它会警告您可能需要的其他东西... } from './assets/dropbox.d.ts' 您可以将文件放在我想的任何地方。