如何将Telegram Web App接入Angular？组件调用函数存疑

1. 解决TypeScript全局变量识别问题 #

Angular基于TypeScript，直接引入脚本后window.Telegram会被TS视为未定义。在组件文件顶部添加全局声明：

declare global {
  interface Window {
    Telegram: any;
  }
}

如果需要更严谨的类型检查，可在src目录下创建typings.d.ts文件补充类型定义：

declare interface TelegramWebAppUser {
  id: number;
  first_name: string;
  last_name?: string;
  username?: string;
  language_code?: string;
}

declare interface TelegramWebApp {
  ready: () => void;
  initDataUnsafe: { user?: TelegramWebAppUser };
  setHeaderColor: (color: string) => void;
  confirm: (msg: string, callback: (confirmed: boolean) => void) => void;
  // 按需添加其他API类型
}

declare global {
  interface Window {
    Telegram: { WebApp: TelegramWebApp };
  }
}

2. 初始化Telegram Mini App #

在组件的ngOnInit钩子中完成初始化（确保DOM和脚本已加载完成）：

import { OnInit } from '@angular/core';

export class YourComponent implements OnInit {
  ngOnInit(): void {
    const tg = window.Telegram.WebApp;
    // 必须调用ready()告知Telegram应用已加载完成
    tg.ready();

    // 可选：配置主题样式
    tg.setHeaderColor('#2196F3');
    tg.setBackgroundColor('#f5f5f5');
  }
}

3. 调用Telegram API函数 #

以下是几个常用场景的代码示例：

• 获取用户信息（需Bot提前配置权限）：

getTelegramUser(): void {
  const user = window.Telegram.WebApp.initDataUnsafe.user;
  if (user) {
    console.log('当前用户:', user.first_name, user.username);
    // 此处可处理用户数据，比如渲染到页面
  }
}

• 弹出确认弹窗：

showConfirm(): void {
  window.Telegram.WebApp.confirm('确定执行此操作？', (isConfirmed) => {
    if (isConfirmed) {
      // 用户确认后的业务逻辑
      console.log('用户已确认');
    }
  });
}

注意事项 #

• 确保telegram-web-app.js的路径正确，本地文件需放在assets目录下，且Angular.json中已配置assets资源的打包规则
• 必须在Telegram客户端内测试，浏览器环境无法正常加载Telegram Web App的API
• 敏感数据建议使用initData而非initDataUnsafe，需自行验证签名

内容的提问来源于stack exchange，提问作者Jackie Chan