相关疑难解决方法(0)

如何在TypeScript中使用jQuery

我在尝试

$(function(){ 
    alert('Hello'); 
});
Run Code Online (Sandbox Code Playgroud)

它在Visual Studio中显示此错误:(TS) Cannot find name '$'..如何在TypeScript中使用jQuery?

typescript

129
推荐指数
11
解决办法
17万
查看次数

在TypeScript中创建一个全局变量

在JavaScript中,我可以这样做:

 something = 'testing';
Run Code Online (Sandbox Code Playgroud)

然后在另一个文件中:

 if (something === 'testing')
Run Code Online (Sandbox Code Playgroud)

它将something被定义(只要它们以正确的顺序被调用).

我似乎无法弄清楚如何在TypeScript中做到这一点.

这就是我尝试过的.

在.d.ts文件中:

interface Window { something: string; }
Run Code Online (Sandbox Code Playgroud)

然后在我的main.ts文件中:

 window.something = 'testing';
Run Code Online (Sandbox Code Playgroud)

然后在另一个文件中:

 if (window.something  === 'testing')
Run Code Online (Sandbox Code Playgroud)

这很有效.但我希望能够失去window.它的一部分,让我的something全球化.有没有办法在TypeScript中做到这一点?

(如果有人感兴趣,我真的想为我的应用程序设置日志记录.我希望能够log.Debug从任何文件调用而无需导入和创建对象.)

typescript

64
推荐指数
9
解决办法
9万
查看次数

如何扩展'Window'打字稿界面

在我的例子中,我正在尝试扩展TS Window接口以包含polyfill fetch.为什么无所谓.问题是" 我怎么告诉TS这window.fetch是一个有效的函数? "

我在运行TS v.1.5(IIRC)的VS Code,v.0.3.0中这样做.

在我想要使用它的TS类文件中声明接口不起作用:

///<reference path="typings/tsd.d.ts"/>

interface Window {
  fetch:(url: string, options?: {}) => Promise<any>
}
...
window.fetch('/blah').then(...); // TS objects that window doesn't have fetch
Run Code Online (Sandbox Code Playgroud)

但是如果我在一个单独的".d.ts"文件中声明这个相同的接口并在我的TS类文件中引用它,那就没关系.

这是"typings/window.extend.d.ts"

///<reference path="es6-promise/es6-promise"/>
interface Window {
  fetch:(url: string, options?: {}) => Promise<any>
}
Run Code Online (Sandbox Code Playgroud)

现在我可以在我的TS类文件中使用它:

///<reference path="typings/window.extend.d.ts"/>
...
window.fetch('/blah').then(...); // OK
Run Code Online (Sandbox Code Playgroud)

或者,我可以在我的TS类文件中使用另一个名称编写扩展接口,然后在强制转换中使用它:

interface WindowX extends Window {
  fetch:(url: string, options?: {}) => Promise<any>
}
...
(<WindowX> window).fetch('/blah').then(...); // OK
Run Code Online (Sandbox Code Playgroud)

为什么扩展接口工作在"d.ts"而不是就地? …

typescript typescript1.5 fetch-api

20
推荐指数
2
解决办法
2万
查看次数

如何在TypeScript中处理内置对象的专有/自定义属性的警告

我正在使用依赖于专有财产的navigator.id人物角色.由于此属性不是标准属性,因此TypeScript编译器会生成以下警告:

$ tsc home.ts --out my_ts_generated_code.js
/Users/..../home.ts(27,18): The property 'id' does not exist on value of type 'Navigator'
Run Code Online (Sandbox Code Playgroud)

但.js文件已成功生成并在FF15浏览器上运行,没有任何警告/错误消息.
我还navigator.id按照文档的说明包含了一个polyfill ,因此navigator.id肯定会在每个浏览器中提供.

有人可以建议我如何处理这个警告吗?

的index.html

<!-- some HTML omit above -->
<script src="https://login.persona.org/include.js"></script>
<script src="my_ts_generated_code.js"></script>
<button class="btn" id="signin">Sign in</button>
<button class="btn" id="signout">Sign out</button>
<!-- some HTML omit below -->
Run Code Online (Sandbox Code Playgroud)

home.ts

declare var $;

class Student {
    fullname : string;
    constructor(public firstname, public middleinitial, public lastname) {
        this.fullname = firstname + " " + middleinitial + …
Run Code Online (Sandbox Code Playgroud)

javascript jquery typescript

18
推荐指数
1
解决办法
3万
查看次数

有人使用redux开发工具在TS中遇到此错误吗?“类型'Window'上不存在属性'__REDUX_DEVTOOLS_EXTENSION_COMPOSE__'。”?

我在index.tsx上收到此错误。

属性“ REDUX_DEVTOOLS_EXTENSION_COMPOSE ”在类型“窗口”上不存在。

这是我的index.tsx代码:

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import App from './App';
import './index.css';
import registerServiceWorker from './registerServiceWorker';

import { Provider } from 'react-redux';

import { createStore, compose, applyMiddleware } from 'redux';
import rootReducer from './store/reducers';

import thunk from 'redux-thunk';

const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;

 const store = createStore(rootReducer, composeEnhancers(
     applyMiddleware(thunk)
 ));

ReactDOM.render(  <Provider store={store}><App /></Provider>, document.getElementById('root'));

registerServiceWorker();
Run Code Online (Sandbox Code Playgroud)

我已经安装了@ types / npm install --save-dev redux-devtools-extension,并且正在使用create-react-app-typescript。非常感谢您提前进行的提示。

typescript reactjs redux react-redux redux-devtools-extension

14
推荐指数
5
解决办法
6098
查看次数

如何在Google Maps API中使用Webpack?

我使用Webpack + html-webpack-plugin来构建我的所有静态文件.问题是,当我使用谷歌地图API时,它不起作用.

我有这个代码:

var map;
function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    center: {lat: -34.397, lng: 150.644},
    zoom: 6
  });
  // the other code, irrelevant
}
Run Code Online (Sandbox Code Playgroud)

还有一个HTML文件:

<!doctype html>
<html>
<head>
</head>
<body>
  <div id="map"></div>
  <script async="async" defer="defer"
      src="https://maps.googleapis.com/maps/api/js?key=<token here>&callback=initMap">
    </script>
   <script src="script.js"></script>
</body>
</html>
Run Code Online (Sandbox Code Playgroud)

如果我只运行这个文件,一切正常.但是,如果我运行它,webpack就会抱怨'initMap不是一个函数'.我查看了输出内部,似乎initMap被声明为不是全局函数,而是作为模块内部的函数或类似的东西,所以也许这就是问题.

我应该如何在webpack中使用Google Maps API?我知道我可以用我的脚本捆绑一些libs,比如反应,我应该这样做吗?这里的方法应该是什么?

UPD:这是我的webpack.config.js:

/* eslint-disable */
const path = require('path')
const fs = require('fs')
const webpack = require('webpack')
const HtmlWebpackPlugin = require('html-webpack-plugin')

const nodeModules = {}
fs.readdirSync('node_modules')
  .filter(function(x) {
    return ['.bin'].indexOf(x) …
Run Code Online (Sandbox Code Playgroud)

javascript google-maps webpack html-webpack-plugin

13
推荐指数
1
解决办法
1万
查看次数

如何访问angular2组件中的全局js变量

我有一个下面定义的全局js变量(@Url是一个ASP.Net MVC html帮助器,它将转换为字符串值):

<script>
  var rootVar = '@Url.Action("Index","Home",new { Area = ""}, null)';
  System.import('app').catch(function(err){ console.error(err); });
</script>
Run Code Online (Sandbox Code Playgroud)

如何在angular2组件中访问rootVar?我曾经在角度1.5中使用窗口服务,在angular2中有类似的方法吗?

具体来说,我想使用该rootVar变量来帮助生成此组件中的templateUrl:

import { Component, Inject} from '@angular/core';

@Component({
    selector: 'home-comp',
    templateUrl: '../Home/Root'
})

export class HomeComponent {   
    constructor( ) {  }
}
Run Code Online (Sandbox Code Playgroud)

typescript angular

12
推荐指数
4
解决办法
3万
查看次数

[GSI_LOGGER]:“callback”的值不是函数。配置被忽略

我正在从Google 登录平台迁移到较新的Google Identity Services 库

应用程序.svelte:

<svelte:head>
    <script src="https://accounts.google.com/gsi/client" async defer></script>
</svelte:head>

<div id="g_id_onload"
     data-client_id="x.apps.googleusercontent.com"
     data-callback="handleCredentialResponse">
</div>
<div class="g_id_signin"
     data-type="standard"
     data-size="large"
     data-theme="outline"
     data-text="sign_in_with"
     data-shape="rectangular"
     data-logo_alignment="left">
</div>
Run Code Online (Sandbox Code Playgroud)
<script>
    function decodeJwtResponse(token) {
        let base64Url = token.split('.')[1]
        let base64 = base64Url.replace(/-/g, '+').replace(/_/g, '/');
        let jsonPayload = decodeURIComponent(atob(base64).split('').map(function(c) {
            return '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2);
        }).join(''));
        return JSON.parse(jsonPayload)
    }

    let responsePayload;
    function handleCredentialResponse(response) {
        // decodeJwtResponse() is a custom function defined by you
        // to decode the credential response. …
Run Code Online (Sandbox Code Playgroud)

google-identity svelte

11
推荐指数
2
解决办法
9138
查看次数

Datalayer.push 与 Angular 6 中的 Typescript

当我点击按钮时,我应该发送到数据层信息,但我不知道该怎么做,因为我使用的是 Angular 6,所以我需要使用 Typescript 和 window.dataLayer.push 不工作并给我这个错误

在此处输入图片说明

形式

<form>
            <div class="radio">
              <input value="Yes" id="radio-1" [(ngModel)]="answer" name="radio" type="radio">
              <label class="radio-label rob-l" for="radio-1">Yes</label>  
          </div>
          <div class="radio">
            <input value="No" id="radio-2" [(ngModel)]="answer" name="radio" type="radio">
            <label class="radio-label rob-l" for="radio-2">No</label>
          </div>
          </div>
        <div class="btn">
          <button (click)="Next()" type="submit">Next question</button>
        </div>
      </form>
Run Code Online (Sandbox Code Playgroud)

我想收到这样的消息

Next(){
    if ((this.path == 1) && (this.answer === "Yes" || this.answer === "No"))
          {
            // window.dataLayer = window.dataLayer || [];
            // window.dataLayer.push({
            // 'event': 'answer',
            // 'answer': this.answer 
            // });
            this.path++;
            this.answer = "";
          } …
Run Code Online (Sandbox Code Playgroud)

data-layers typescript angular

10
推荐指数
1
解决办法
7158
查看次数

将属性添加到错误对象“属性...在类型‘错误’上不存在”时出现打字稿错误

我正在尝试使用 Node/Express 应用程序转向打字稿。以前我的代码是:

//app.js
const error = new Error('Not Found');
error.status = 404;
Run Code Online (Sandbox Code Playgroud)

当我尝试这个时:

//app.ts
const error = new Error('Not Found');
error.status = 404; // Property 'status' does not exist on type 'Error'.ts(2339)
Run Code Online (Sandbox Code Playgroud)

我从developer.mozilla.org 文档中了解到,Error 构造函数具有以下可选参数:messageoptionsfileNamelineNumber- 所以我想status不应该允许?我想我是从 YouTube 教程中复制的,所以我想这实际上不是一个好的做法?

error-handling node.js express typescript

8
推荐指数
1
解决办法
5238
查看次数