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

Question

I wanted to use the Dropbox API which is a javascript API in my angular cli project. 我想在我的angular cli项目中使用Dropbox API，这是一个javascript API。 The API ships with Typescript definitions. API附带了Typescript定义。 Here's what the dist folder looks like. 这是dist文件夹的样子。

They have a sample function that returns a list of files written in a .ts file and a .js file: Here's basic.js and basic.ts which returns a list of files: basic.js : 它们有一个示例函数，它返回一个以.ts文件和.js文件编写的文件列表：这里是basic.js和basic.ts ，它们返回一个文件列表： basic.js ：

and basic.ts : 和basic.ts ： Here is the html file the scripts are operating upon for reference: 以下是脚本操作的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>

How do I use this API? 我如何使用此API？ I installed the npm but how do I use the .d.ts files? 我安装了npm但是如何使用.d.ts文件？ Should I use the .ts or .js code for my angular project? 我应该使用.ts或.js代码进行角度项目吗？ I want to use the api in one of my typescript components? 我想在我的一个打字稿组件中使用api？ I don't know how to include definitions and use those definitions in my angular components. 我不知道如何包含定义并在我的角度组件中使用这些定义。 I assume I include Dropbox-sdk.min.js is my scripts in angular-cli.json but where or how do I include the .d.ts files and which ones are necessary? 我假设我包含Dropbox-sdk.min.js是我在angular-cli.json脚本但是我在哪里或如何包含.d.ts文件以及哪些是必要的？ I found no relevant documentation on the dropbox github. 我在dropbox github上找不到相关文档。 The github contains the full working examples for typescript and javascript use but it's a confusing project since it seems to mix many different things into the project and I don't know how to translate it for an angular-cli app https://github.com/dropbox/dropbox-sdk-js If there's something else I should include in the question let me know! github包含打字稿和javascript使用的完整工作示例，但它是一个令人困惑的项目，因为它似乎将许多不同的东西混合到项目中，我不知道如何将它转换为angular-cli应用程序https：// github。 com / dropbox / dropbox-sdk-js如果我还应该在问题中包含其他内容，请告诉我！

Answer 1

I was going to say you should just be able to import them like any other angular interface at the top, then reference them in your component, but looking on their repo how they generate their types it looks a little odd. 我要说你应该能够像顶部的任何其他角度界面一样导入它们，然后在你的组件中引用它们，但是看看它们的回购它们如何生成它们的类型看起来有点奇怪。 Almost like they are declaring modules that dynamically build types using a generator. 几乎就像他们声明使用生成器动态构建类型的模块一样。 I know nothing about that. 我对此一无所知。 You could always try removing the module wrapper around this Dropbox class - https://github.com/dropbox/dropbox-sdk-js/blob/master/generator/typescript/dropbox.d.ts 你总是可以尝试删除这个Dropbox类的模块包装器 - https://github.com/dropbox/dropbox-sdk-js/blob/master/generator/typescript/dropbox.d.ts

and then adding 'export' before the Dropbox class definition on the second line? 然后在第二行的Dropbox类定义之前添加'export'？

Here it is like that stripped of all the comments. 这就像剥夺了所有的评论。

EDIT - looks like you'll need to do the same with this file, the base class and interface. 编辑 - 看起来你需要对这个文件，基类和接口做同样的事情。 https://github.com/dropbox/dropbox-sdk-js/edit/master/generator/typescript/dropbox_types.d.ts export both the interface and class and remove the module lines. https://github.com/dropbox/dropbox-sdk-js/edit/master/generator/typescript/dropbox_types.d.ts导出接口和类并删除模块行。

Then you should be able to create an index.ts file that exports all of the statements from both files. 然后，您应该能够创建一个index.ts文件，该文件导出两个文件中的所有语句。

I feel like this is not the right way....but I dont see why it wont work. 我觉得这不是正确的方法....但我不明白为什么它不会工作。

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>;
}

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

问题描述

1 个解决方案

解决方案1
0 2017-08-23 16:11:49

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

问题描述

1 个解决方案

解决方案1 0 2017-08-23 16:11:49

解决方案1
0 2017-08-23 16:11:49