谷歌登录(GSI)库的TypeScript类型声明在哪里

Question

我正在实现"使用谷歌登录"；使用谷歌"；GSI"；图书馆我的应用程序使用Next.js和TypeScript，所以我正在寻找：

1. 包含GSI客户端库的npm包
2. GSI客户端库的TypeScript类型声明

我找不到其中任何一个：我只看到一个从https://accounts.google.com/gsi/client加载的脚本，以及这里的非正式API引用。

在哪里可以找到npm上的GSI库和类型声明

Answer 1

1. accounts.google.com/gsi/client的NPM包不存在，至少目前还不存在。使用它的唯一方法是通过脚本标记
2. 除了jameshfisher的答案中的@types/google，还有@types/google.accounts

google-one-tap或google.accounts都可以添加到tsconfig类型中。

tsconfig.json

"types": ["google-one-tap", "google.accounts"]

Answer 2

类型位于@types/google-one-tap，可以这样使用：

declare global {
const google: typeof import('google-one-tap');
}

不过，我不知道在npm上哪里可以找到真正的库。

Answer 3

这些类型声明现在可用！(通过确定性类型(

• https://www.npmjs.com/package/@types/google一键
• https://www.npmjs.com/package/@类型/谷歌账户

Answer 4

类型可以安装在带有NPM 的typescript项目中

npm install @types/google.accounts

以下是我捆绑的可能经常使用的TSDoc类型的列表，因为我意识到，每当我搜索一个TSDoc时，我都会出现在这个页面上。

@types/google.accounts
# Type definitions for Google Identity Services JavaScript SDK
@types/gapi
# TypeScript definitions for Google API Client
@types/gapi.client
# TypeScript definitions for Google API client
@types/gapi.client.discovery
# TypeScript definitions for API Discovery Service v1
@types/gapi.client.sheets
# TypeScript definitions for Google Sheets API v4
@types/gapi.client.drive
# TypeScript definitions for Drive API v3
@types/gapi.client.bigquery
# TypeScript definitions for BigQuery API v2
@types/gapi.client.storage
# TypeScript definitions for Cloud Storage JSON API v1
@types/gapi.client.youtube
# TypeScript definitions for YouTube Data API v3 v3
@types/gapi.client.androidpublisher
# TypeScript definitions for Google Play Android Developer API v3
@types/gapi.client.oauth2
# TypeScript definitions for Google OAuth2 API v2
@types/gapi.client.calendar
# TypeScript definitions for Calendar API v3
@types/gapi.client.gmail
# TypeScript definitions for Gmail API v1
@types/gapi.client.people
# TypeScript definitions for People API v1
@types/gapi.client.analytics
# TypeScript definitions for Google Analytics API v3
@types/gapi.client.fcm
# TypeScript definitions for Firebase Cloud Messaging API v1
@types/gapi.client.speech
# TypeScript definitions for Cloud Speech-to-Text API v1
@types/gapi.client.language
# TypeScript definitions for Cloud Natural Language API v1
@types/gapi.client.tagmanager
# TypeScript definitions for Tag Manager API v2
@types/gapi.client.analyticsadmin
# TypeScript definitions for Google Analytics Admin API v1alpha
@types/gapi.client.analyticsreporting
# TypeScript definitions for Analytics Reporting API v4
@types/gapi.client.customsearch
# TypeScript definitions for Custom Search API v1
@types/gapi.client.sqladmin
# TypeScript definitions for Cloud SQL Admin API v1
@types/gapi.client.deploymentmanager
# TypeScript definitions for Cloud Deployment Manager V2 API v2
@types/gapi.client.pubsub
# TypeScript definitions for Cloud Pub/Sub API v1
@types/gapi.client.cloudbuild
# TypeScript definitions for Cloud Build API v1
@types/gapi.client.logging
# TypeScript definitions for Cloud Logging API v2
@types/gapi.client.iam
# TypeScript definitions for Identity and Access Management (IAM) API v1
@types/gapi.auth2
# TypeScript definitions for Google Sign-In API
@types/gapi.client.translate
# TypeScript definitions for Cloud Translation API v3
@types/gapi.client.firebase
# TypeScript definitions for Firebase Management API v1beta1
@types/gapi.client.adsense
# TypeScript definitions for AdSense Management API v2
@types/gapi.client.analyticshub
# TypeScript definitions for Analytics Hub API v1beta1
@types/gapi.client.firestore
# TypeScript definitions for Cloud Firestore API v1
@types/gapi.client.firebasestorage
# TypeScript definitions for Cloud Storage for Firebase API v1beta
@types/gapi.client.dialogflow
# TypeScript definitions for Dialogflow API v3

Answer 5

如果您不想使用非官方类型库，您可以选择如下。

// initialize gsi client
(window as any).google.accounts.id.initialize({
client_id: GOOGLE_CLIENT_ID,
callback: onSuccess
})
// render the login button
(window as any).google.accounts.id.renderButton(
document.getElementById('sign-in-div'),
{
type: 'standard'
}
)

您可以在访问google对象之前使用(window as any)。但只有在您知道google对象可用后，才需要使用此。