类型'HTMLElement'上不存在Typescript属性'style'

Question

虽然我的代码有效（下图），但是打字稿会抛出错误，说“属性'风格''在'HTMLElement'类型中不存在。”

正如你所看到的，我正在通过jQuery和amp;抓取元素元素的ID。

$(this.id).click(function () {
  this.style.display = 'none';
});

但是这会导致以下错误：

`TS2339: Property 'style' does not exist on type 'HTMLElement'`.

我不确定处理这个ts错误的正确方法是什么。

有人会告诉我吗？

提前谢谢。

更多代码，因为它被请求了：

`/**
* Class represents a flash message
*/
export class FlashMessage {    
flashMessageParentDivID:string;
iconID:string;
textID:string;
$: JQuery;

/**
 * 
 * @param {string} flashMessageParentDiv - the string of the div's ID.
 */ 
constructor (flashMessageParentDiv: string, $: JQuery) {
    this.flashMessageParentDivID = "#"+flashMessageParentDiv;
    this.iconID = "#flash-message-icon",
    this.textID = "#flash-message-text";
    this.$ = $;
}

/**
 * Displays the passed in message with the appropriate status.
 * @param {string} message - the message we want to flash.
 * @param {string} status: either 'error' or 'success'
 */
showWithMessage = function (message: string, status: string) {
    //@todo: maybe throw an error if status does not equal error or   success.
    this.clearAndCreateFlashMessageInnerds();
    this.$(this.flashMessageParentDivID).removeAttr("class");
    this.$(this.flashMessageParentDivID).addClass(status);

    this.$(this.iconID).removeAttr("class");
    this.$(this.iconID).addClass("k-icon k-i-" + status);

    this.$(this.textID).text(message);
    this.$(this.flashMessageParentDivID).show();   

    this.$(this.flashMessageParentDivID).click(function () {
        (<any>this).style.display = 'none';
    });
};

...`

Answer 1

在你的方法中使用它

(<HTMLElement>document.querySelector('#yourDomElmentID')).style.display = 'none';

我在我的代码中测试你的代码编译成功。

Answer 2

Manohar Gavit建议，我需要进行类型转换。但是，他的建议并没有解决我的问题。由于某种原因，我的jQuery定义文件无法将import React from 'react'; import ReactDOM from 'react-dom'; import { createStore , applyMiddleware } from 'redux' import createSagaMiddleware from 'redux-saga' import { Provider } from 'react-redux' import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider'; import darkBaseTheme from 'material-ui/styles/baseThemes/darkBaseTheme'; import getMuiTheme from 'material-ui/styles/getMuiTheme'; import './index.css'; import "font-awesome/css/font-awesome.css"; import MainComponent from './pages/main/main.component'; import reducers from './_redux'; import reduxSaga from './_reduxSaga'; import registerServiceWorker from './registerServiceWorker'; const sagaMiddleware = createSagaMiddleware(); let store = createStore( reducers , applyMiddleware( sagaMiddleware ) ); sagaMiddleware.run( reduxSaga ); const Container = () => ( // <MuiThemeProvider muiTheme={getMuiTheme(darkBaseTheme)} > <Provider store={ store } > <MuiThemeProvider> <MainComponent /> </MuiThemeProvider> </Provider> ); ReactDOM.render( <Container /> , document.getElementById( 'root' ) ); package.json: { "name": "my-app", "version": "0.1.0", "private": true, "dependencies": { "axios": "^0.16.2", "font-awesome": "^4.7.0", "history": "^4.7.2", "material-ui": "^0.19.2", "prop-types": "^15.6.0", "react": "^15.6.1", "react-bootstrap": "^0.31.3", "react-dom": "^15.6.1", "react-foundation": "^0.9.2", "react-redux": "^5.0.6", "react-router": "^4.2.0", "react-router-dom": "^4.2.2", "recharts": "^1.0.0-alpha.6", "redux": "^3.7.2", "redux-saga": "^0.15.6" }, 识别为具有HTMLElement属性，但正如您在下面看到的那样...定义文件确实接受style具有该属性。

any

Answer 3

实际上，为了从TypeScript的类型安全中获得帮助，我认为最好的解决方案是创建自定义事件类型，因为我们只有很少的Event用例，我来举例说明。

1. event.target.value
2. event.current.target.value
3. event.className
4. event.target.style
   ，如果出现其他用例，可以将其添加到列表中。
   我们正在创建自定义事件类型，因为否则，我们将不得不处理Event，HTMLButtonElement，HTMLSpanElement的不必要的分隔，而所有这些对于我们的前端代码而言并没有太大的用途。所以我创建了如下的自定义界面
   

interface IDom{
  value?:string;
  name?:string;
  className?:string;
  style?:any;
}
interface IEvent{
  target?:IDom,
  currentTarget?:IDom
}

const handleChange = (event:IEvent)=>{console.log(event?.target?.name)}

请注意，所有属性都保持为可选，因为否则我们不必要地会遇到打字错误，而如果我们不传递某些属性来定义事件侦听器，这将没有太大的作用！

Answer 4

我在 forEach 中遇到过这个错误，NodeListOf<HTMLElement> 挽救了我的生命

document.querySelectorAll('.my-element').forEach((p: HTMLElement, i:number, arr:NodeListOf<HTMLElement>) => {
 arr[arr.length - i].style.color = 'red';
})