当我tsc
在终端中运行时(无论在哪里)我都会返回:
$ npx tsc --version
This is not the tsc command you are looking for
To get access to the TypeScript compiler, tsc, from the command line either:
- Use npm install typescript to first add TypeScript to your project before using npx
- Use yarn to avoid accidentally running code from un-installed packages
Run Code Online (Sandbox Code Playgroud)
据我所知,我没有在全球范围内安装 TypeScript,所以我期望它找不到tsc
.
嘿大家我得到了一个linting错误,我不确定它在说什么,这是错误:
src/app/particles/particles.component.ts[4, 1]: Implement lifecycle hook interfaces (https://angular.io/docs/ts/latest/guide/style-guide.html#!#09-01)
行nr 4是@Component({
行
我已经阅读了它给出的链接,我得到了它试图告诉我的内容(至少我是这么认为:))但我看不出它在这种情况下是如何应用的.
谢谢你的帮助.
import { Component, ViewChild, ElementRef, HostListener} from '@angular/core';
import { Particle } from './particle';
@Component({
selector: 'km-particles',
styles: ['canvas { transition: opacity 0.5s cubic-bezier(0.4, 0.0, 0.2, 1);}'],
template: ` <canvas #canvas
[attr.width]='width'
[attr.height]='height'
[style.opacity]='opacity'>
</canvas>`
})
export class ParticlesComponent {
private ctx: CanvasRenderingContext2D;
private width: number;
private height: number;
private opacity: number;
private particles: Particle[];
private particleClearLoop: any;
public playParticles: boolean;
// get the element with …
Run Code Online (Sandbox Code Playgroud) 我从Typescript收到错误,我不知道如何纠正它."编译"时代码工作正常,但我无法纠正错误.我从代码中提取了涉及错误的部分.我想我必须预先确定src但不确定如何.
编辑器和Gulp编译错误消息:
"属性'src'不存在于类型'HTMLElement'.at第53行col 17"
...
element:HTMLElement; /* Defining element */
'''
this.element = document.createElement('img'); /*creating a img*/
'''
Run Code Online (Sandbox Code Playgroud)
这是我运行的方法,用于渲染元素,位置,顶部和左边的所有工作而没有给出错误.
display() {
this.element.src = this.file; /*This is the line that gives the error*/
this.element.style.position = "absolute";
this.element.style.top = this.pointX.toString() + "px";
this.element.style.left = this.pointY.toString() + "px";
document.body.appendChild(this.element);
};
Run Code Online (Sandbox Code Playgroud) 更新的问题:
如果我在滚动之前在输入字段中输入某些内容,则expanded
道具将设置为 true - 正确
如果我向下滚动 - 展开设置为 false - 正确
如果我现在在输入字段中输入expanded
内容仍然是false
- 我希望再次expanded
设置为true
。
代码:
export default () => {
const [expanded, setExpanded] = useState(true)
let searchInput = React.createRef()
let scrollTopValue = 0;
function handleSearchInput() {
console.log(Boolean(searchInput.current.value.length))
setExpanded(Boolean(searchInput.current.value.length)) // first time true, don't get re triggered
}
useEffect(() => {
window.addEventListener('scroll', handleScroll)
return () => window.removeEventListener('scroll', handleScroll)
}, []);
function handleScroll() {
setExpanded(scrollTopValue > document.documentElement.scrollTop)
scrollTopValue = document.documentElement.scrollTop
}
return ( …
Run Code Online (Sandbox Code Playgroud) 嘿所有人都遇到了npm和tslint的问题我希望你能帮助我.好的,我的情况和代码:
的package.json
"scripts": {
"lint": "tslint -c tslint.json 'src/app/**/*.ts'",
"pretest": "npm run lint ",
"test": "echo 'No test are made'",
...
},
Run Code Online (Sandbox Code Playgroud)
当我运行命令时,npm test
这是输出:
输入终端
$ npm test
Run Code Online (Sandbox Code Playgroud)
输出终端
> keoom@1.0.0 pretest c:\Users\Hjorth\Documents\github\keoom-angular
> npm run lint
> keoom@1.0.0 lint c:\Users\Hjorth\Documents\github\keoom-angular
> tslint -c tslint.json 'src/app/**/*.ts'
> keoom@1.0.0 test c:\Users\Hjorth\Documents\github\keoom-angular
> echo 'No test are made'
'No test are made'
Run Code Online (Sandbox Code Playgroud)
如果我只运行命令tslint -c tslint.json 'src/app/**/*.ts'
I,另一方面看到linting错误.
输入终端
$ tslint -c tslint.json 'src/app/**/*.ts' …
Run Code Online (Sandbox Code Playgroud) 尝试webcomponents但是我得到了一个错误.
标记很简单,应该可行.2个文件,都是html文件.
错误标记在<script>
控制台中的标记上.
谢谢你的帮助.
PS.我正在运行Google Chrome测试版以使customElements正常运行.
KM-button.html
<script>
class KmButton extends HTMLButtonElement {
constructor() {
super();
}
}
customElements.define('km-button', KmButton, {extends: 'button'});
</script>
Run Code Online (Sandbox Code Playgroud)
的index.html
<!DOCTYPE html>
<html>
<head>
<!-- import webcomponents -->
<link rel="import" href="./components/km-button.html">
</head>
<body>
<km-button>hej</km-button>
</body>
</html>
Run Code Online (Sandbox Code Playgroud)
错误
km-button.html:1 Uncaught TypeError: Illegal constructor(…)KmButton @ km-button.html:7
Run Code Online (Sandbox Code Playgroud) 尝试从反应示例中实现自定义钩子:https : //reactjs.org/docs/hooks-faq.html#how-to-get-the-previous-props-or-state,但出现以下错误:
错误:
Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
Run Code Online (Sandbox Code Playgroud)
useEffect
当我尝试将其作为自定义 hook 导入时会发生错误usePrevious
。
我尝试了以下操作:验证 react-dom 和 react 在同一版本上 …
尝试使用 moment.js 的 rangePicker 选项来实现 Angular Material v10 datepicker 但是当我将 moment 与 rangePicker 结合使用时,它给了我这个错误。
Error: date.getFullYear is not a function
当我尝试选择第二个日期时发生此错误matEndDate
修改后的 Google Stackblitz 示例显示错误:
https://stackblitz.com/edit/angular-imb7gg?file=src/app/datepicker-moment-example.ts
问题如下,当我在devtool或js代码中更新attr sticky时,无法触发attributeChangedCallback。滚动和添加和删除粘性属性时,_updateSticky()方法运行得很好。
class HeaderLogo extends HTMLElement {
static get observedAttribute() {
return ['alt-logo', 'sticky'];
}
constructor() {
super();
}
connectedCallback() {
this._updateSticky();
window.addEventListener('scroll', () => {
this._updateSticky();
}, false);
}
attributeChangedCallback(attrName, oldVal, newVal) {
console.log("attr changed");
}
/* evaluates if the logo should be in sticky state or not */
_updateSticky() {
let scrollTop = window.pageYOffset || (document.documentElement || document.body.parentNode || document.body).scrollTop;
let breakpoint = 50;
if (scrollTop > breakpoint) {
this.setAttribute('sticky', '');
} else {
this.removeAttribute('sticky');
}
}
} …
Run Code Online (Sandbox Code Playgroud) 所以我只是用模板文字练习一点,,
我的html输出似乎出乎意料.任何人都可以向我解释为什么这些,
节目在我使用时map
?
this.highscore = [
{
"username" : "Thor",
"highScore": 1002023
},
{
"username" : "Hulk",
"highScore": 1037465
},
{
"username" : "Superman",
"highScore": 5948393
},
{
"username" : "Spiderman",
"highScore": 5949384
}
]
template() {
return `high score: ${this.highscore.map(user => `<p>Username: ${user.username} <br> ${user.highScore}</p>`)}`
}
render() {
this.innerHTML = this.template()
}
Run Code Online (Sandbox Code Playgroud)
以HTML格式输出
Username: Thor
1002023
, /* <----- where does this sucker come from? */
Username: Hulk
1037465
,
Username: Superman
5948393
,
Username: …
Run Code Online (Sandbox Code Playgroud) javascript ×7
npm ×3
angular ×2
react-hooks ×2
reactjs ×2
typescript ×2
gatsby ×1
html ×1
lint ×1
momentjs ×1
tsc ×1
tslint ×1