英文:
"Declare function" typescript is ignored in js file
问题
我只是在这里帮你翻译代码:
type PropEventSource<Type> = {
on<Key extends string & keyof Type>(
eventName: `${Key}Changed`, callback: (newValue: Type[Key]) => void ): void;
};
declare function makeWatchedObject<Type>(obj: Type): Type & PropEventSource<Type>;
const person = makeWatchedObject({
firstName: "Saoirse",
lastName: "Ronan",
age: 26
});
person.on("firstNameChanged", newName => {
console.log(`new name is ${newName.toUpperCase()}`);
});
person.on("ageChanged", newAge => {
if (newAge < 0) {
console.warn("warning! negative age");
}
})
// this is my console.log
console.log(person.firstName);
JS 代码:
var person = makeWatchedObject({
firstName: "Saoirse",
lastName: "Ronan",
age: 26
});
person.on("firstNameChanged", function (newName) {
console.log("new name is ".concat(newName.toUpperCase()));
});
person.on("ageChanged", function (newAge) {
if (newAge < 0) {
console.warn("warning! negative age");
}
});
// this is my console.log
console.log(person.firstName);
英文:
I'm just trying to learn typesript and have a problem. I can't figure out how declare function
works in ts.
The TS documentation has a section about Template Literal Types.
It has the following code:
type PropEventSource<Type> = {
on<Key extends string & keyof Type>
(eventName: `${Key}Changed`, callback: (newValue: Type[Key]) => void ): void;
};
declare function makeWatchedObject<Type>(obj: Type): Type & PropEventSource<Type>;
const person = makeWatchedObject({
firstName: "Saoirse",
lastName: "Ronan",
age: 26
});
person.on("firstNameChanged", newName => {
console.log(`new name is ${newName.toUpperCase()}`);
});
person.on("ageChanged", newAge => {
if (newAge < 0) {
console.warn("warning! negative age");
}
})
// this is my console.log
console.log(person.firstName);
Сompiles to this js code:
var person = makeWatchedObject({
firstName: "Saoirse",
lastName: "Ronan",
age: 26
});
person.on("firstNameChanged", function (newName) {
console.log("new name is ".concat(newName.toUpperCase()));
});
person.on("ageChanged", function (newAge) {
if (newAge < 0) {
console.warn("warning! negative age");
}
});
// this is my console.log
console.log(person.firstName);
I'm trying to run it and I get this error: enter image description here
Could you explain to me what I'm doing wrong? Why is declare function ignored? Thank you.
答案1
得分: 1
该代码不完整,不可单独执行。
你会注意到这段代码:
declare function makeWatchedObject<Type>(obj: Type): Type & PropEventSource<Type>;
这是一个没有实现的函数。它里面没有任何代码。因此没有输出内容。
当你使用 declare
关键字时,你在告诉 TypeScript 编译器假定该函数或变量存在,即使它没有值或实现供 TypeScript 编译器看到。这意味着在编译后的 JavaScript 中 没有 输出。
declare
通常仅在 .d.ts
文件中使用,这些文件仅包含类型。这些文件用于为普通的 JS 文件提供类型。它覆盖了 TypeScript 无法获取类型的代码。
它也适用于示例代码。它允许你使用函数的类型,而无需编写实现。如果你的示例是关于编译时类型,而不是用于运行,则可以使用 declare
提供这些类型并简化示例。
这正是文档所做的。该示例并非用于 运行,但会通过类型检查。
在这里阅读更多关于 declare
关键字的信息:https://www.typescriptlang.org/docs/handbook/declaration-files/by-example.html
英文:
That code is incomplete and is not meant to executed on its own.
You'll note that that this code:
declare function makeWatchedObject<Type>(obj: Type): Type & PropEventSource<Type>;
is a function that has no implementation. There is no code in it. So there is nothing to output.
When you use the declare
keyword, you are telling the typescript compiler to assume that function or variable exists, even though it has no value or implementation that the typescript compiler can see. Which means that it provides no output in the compiled javascript.
declare
is typically used only in .d.ts
files that are types only. These files are meant to provide types for plain JS files. It covers code that Typescript can't otherwise see the types for.
It's also useful for example code. It allows you use the types of a function without having to write the implementation. And if your example is about compile time types and not intended to run, then you can use declare
to provide those types and simplify your example.
This second one is what that documentation is doing. The example is not intended to run, but it will pass type checking.
Read more about the declare
keyword here: https://www.typescriptlang.org/docs/handbook/declaration-files/by-example.html
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论