TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_TypeScript
git clone https://github.com/opensas/mdn-svelte-tutorial.git
Cloned the repo from that tutorial and checked if they had type checks outside
<script> tags... They do not
What the fuck, svelte?
type=1 is the same as type="1". What I wanted is type={1} to use the number 1 and not the string "1"
Hi,
A bit confused about the above error.
in the first appearance of state.financeAppData it has a specific object type. But in the second appearance it could be undefined
A bit confused about the above error.
in the first appearance of state.financeAppData it has a specific object type. But in the second appearance it could be undefined
I know that the event handler could be executed at any time, and if it was a mutable object the value can change, but in this case it is a deep readonly object.
I'd expect the function to have a reference, and since the data is immutable, the reference will point to the same value.
Am I missing something?
Also, does anyone know why this error is happening?
connect expects an AudioNode or AudioParam and I'm passing in an object of type AudioNode | AudioParam.
I just ended up adding this third line to d.ts:
connect(destinationNode: AudioNode, output?: number, input?: number): AudioNode;
connect(destinationParam: AudioParam, output?: number): void;
connect(destination: AudioNode | AudioParam, output?: number): void;Feel free to let me know if I can do better
1 reply
@carpben It would be awesome if typescript could infer that constants, once determined to be defined, cannot change. Unfortunately, right now, typescript does not share type narrowing information between function contexts.
If you can tolerate it, I'd use
state.financeAppData!.payoutInfo Or add a debugAssertNonNull(state.financeAppData).payoutInfo
I personally use the latter when I have a build chain sufficient to allow me to remove the
debugAssertNonNull in release builds
hello! I have a question about typescript generics but unsure exactly how to phrase it, so I'll demonstrate via brief example
The following works without issue
type SomeGeneric<T> = {
arr: T[];
}
function someFunction(test: SomeGeneric<any>[]) {
return test.map(t => t.arr);
}
const one: SomeGeneric<number> = { arr: [1] }
const two: SomeGeneric<string> = { arr: ["5"] }
const three: SomeGeneric<{[k: string]: string}> = { arr: [{"6": "7"}]}
someFunction([ one, two, three ])
but is there anyway to accomplish the same thing without having to type the
test parameter as <any>, and without hardcoding <number | string | ... etc> either?
map isn't clever enough to infer the return type, though.
i.e., preferably something like
function someFunction<T>(test: SomeGeneric<T>[]) but that gives me the error Type 'SomeGeneric<string>' is not assignable to type 'SomeGeneric<number>'.
@am2on:matrix.org If you really must have that syntax, you can use overloads:
function someFunction<T>(test: SomeGeneric<T>[]): T[][];
function someFunction<T extends SomeGeneric<unknown>>(test: T[]): T["arr"][];
function someFunction<T>(test: SomeGeneric<T>[]): T[][] {
return test.map(t => t.arr);
}
const x = someFunction([ one, two, three ]);
const y = someFunction<string | number>([one, two]);
both invocations work. But I wouldn't recommend using overloads unless you know you're going to be calling
someFunction with an explicit <string | number>
especially right now, since I added 2 lines of code to
d.ts
it made some errors go away in VSCode, but the same error still appears in the terminal
I tried rerunning
tsc -w and restarting VSCode
@JomoPipi The IDE sometimes gets out of sync. You can use the "Restart tsserver" command to try and get it back into sync. That's what usually works for me.
This message is replying to a Matrix event but we were unable to find associated bridged Gitter message to put it in the appropriate threaded conversation.
Switch to what, sorry? Gitter?
I'm trying to extend a browser built in feature called MutationObserver to have a property called "count".
const observer = new MutationObserver(callback);
observer.count = 0I can do this willy nilly in the JS above and then access .count while using the callback. I can't figure out how to make TS happy with this. I've written the following:
class ObserveWithCount extends MutationObserver {
count: number;
constructor(callback: () => void) {
super(callback);
this.count = 0;
}
}
const observer = new ObserveWithCount(async () => {
try {
const { data } = await axios.get('/cart.js');
shipping.update(data);
console.log(data)
observer.disconnect()
} catch (error) {
// Handle error(?)
}
});TypeScript is happy with an extended class definition, but when I run this compiled code in the browser, I get: Failed to construct 'MutationObserver': Please use the 'new' operator, this DOM object constructor cannot be called as a function. Any ideas?
After reading up, I found a solution that works:
declare global {
interface MutationObserver {
count: number
}
}
const observer = new MutationObserver(async (mutation) => {
try {
const { data } = await axios.get('/cart.js');
if (data.item_count !== observer.count) {
observer.count = data.item_count;
shipping.update(data);
}
} catch (error) {
// Handle error(?)
}
});Re-declaring MutationObserver as an interface on global seems sloppy, but the code runs without an issue.
That looks a lot nicer. I'm gapping on the
& operator. Can you point me in the right direction in the docs?