打字稿中的 Javascript
Posted
技术标签:
【中文标题】打字稿中的 Javascript【英文标题】:Javascript in Typescript 【发布时间】:2021-07-02 13:19:36 【问题描述】:实际上每个 javascript 代码在打字稿中也应该是有效的,但是当我尝试运行下面的代码时,我得到了下面的错误。有人可以用打字稿写这个 javascript 代码吗?
Error: 20: 9 - error TS2531: Object is possibly 'zero'.20 document.getElementById ("navbar"). Style.top = "0";
组件.ts
var prevScrollpos = window.pageYOffset;
window.onscroll = function()
var currentScrollPos = window.pageYOffset;
if (prevScrollpos > currentScrollPos)
document.getElementById("navbar").style.top = "0";
else
document.getElementById("navbar").style.top = "-50px";
prevScrollpos = currentScrollPos;
html:
<nav class="navbar navbar-expand-lg navbar-dark pb_navbar pb_scrolled-light w3-animate-right navlist-right " id="navbar">
<div class="container">
<a class="navbar-brand" href="index.html"></a>
<button class="navbar-toggler d-block d-sm-none" (click)="toggleNavbar()" type="button" data-toggle="collapse" data-target="#probootstrap-navbar" aria-controls="probootstrap-navbar" aria-expanded="true" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse " [ngClass]=" 'show': navbarOpen " id="onright">
<ul class="navbar-nav ml-auto">
<li class="nav-item"><a class="nav-link" href="#" (click)= " NavBar()" >Home </a></li>
<li class="nav-item"><a class="nav-link" href="#service" (click)= " NavBar()">Service</a></li>
<li class="nav-item"><a class="nav-link" href="#blog" (click)= " NavBar()">Blog</a></li>
<li class="nav-item"><a class="nav-link" href="#contact" (click)= " NavBar()">Contact</a></li>
</ul>
</div>
</div>
</nav>
【问题讨论】:
您可能已将 tsconfig 设置为严格。您可以将其设置为非常宽松,让所有错误都过去。但也许如果你说document.getElementById("navbar")!.style.top = "0";
(即在那里放一个感叹号)它可能会起作用,虽然我还没有尝试过
您可以执行document.getElementById("navbar")?.style.top
或执行var navbar = document.getElementById("navbar")
之类的操作,然后基于navbar
执行if 语句。类似if (navbar != null) navbar.style.top = 0;
【参考方案1】:
该错误告诉您您可能有一个运行时错误,因为document.getElementById("navbar")
可能会返回 null,因此如果元素不存在,document.getElementById("navbar").style.top
可能会抛出错误。
如果您对它没问题,您可以添加内联异常或将您的 typescript 配置切换到非严格模式。
链接:strict
【讨论】:
【参考方案2】:为此尝试包装 document.getElementById("导航栏") 有了它的类型然后你也可以使用安全导航器是什么?仅在较早的对象不为空时导航
【讨论】:
【参考方案3】:解决方案:
component.ts:
import Inject from '@angular/core';
import DOCUMENT from '@angular/common';
constructor(@Inject(DOCUMENT) document)
prevScrollpos = window.pageYOffset;
@HostListener('window:scroll', ['$event'])
onWindowScroll()
var currentScrollPos = window.pageYOffset;
if (this.prevScrollpos > currentScrollPos)
window.document.getElementById('navbar')!.style.top = "0";
else if (this.prevScrollpos < currentScrollPos)
window.document.getElementById('navbar')!.style.top = "-50px";
this.prevScrollpos = currentScrollPos;
tsconfig.json
将此行添加到 compilerOptions:
"noImplicitAny": false,
【讨论】:
以上是关于打字稿中的 Javascript的主要内容,如果未能解决你的问题,请参考以下文章