TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
git clone https://github.com/opensas/mdn-svelte-tutorial.git
<script>
tags... They do not
type=1
is the same as type="1"
. What I wanted is type={1}
to use the number 1
and not the string "1"
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
state.financeAppData!.payoutInfo
Or add a debugAssertNonNull(state.financeAppData).payoutInfo
debugAssertNonNull
in release builds
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 ])
test
parameter as <any>
, and without hardcoding <number | string | ... etc>
either?
map
isn't clever enough to infer the return type, though.
function someFunction<T>(test: SomeGeneric<T>[])
but that gives me the error Type 'SomeGeneric<string>' is not assignable to type 'SomeGeneric<number>'.
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]);
someFunction
with an explicit <string | number>
d.ts
tsc -w
and restarting VSCode
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 = 0
I 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.
&
operator. Can you point me in the right direction in the docs?