Comments (2)
<script lang="ts">
let self = $state<HTMLDivElement>()
function onclick(e: MouseEvent) {
// self can't be undefined here, but the type is HTMLDivElement | undefined
self.doSomething()
}
self.doSomething(); // error - `self` is undefined
onclick(); // error - `self` is undefined
</script>
<div bind:this={self} {onclick}>...</div>
People will make such mistakes because they are new to JS, doing it in a long file, being tired, editing unfamiliar code or code they haven't touched for months, etc. But with the current typing, TS will warn you. And you can always do if (!self) return;
or self!.doSomething()
to pass the error.
It's possible to achieve uninitialized states in classes, but for now, all the cases I make up are related to bad coding. I'd wait for #11455 and decide what to do.
from svelte.
I definitely do agree with this one - this is how state works in most frameworks, and even how it worked before with normal let
declarations. Especially useful when having to interact with the DOM directly:
<script lang="ts">
let self = $state<HTMLDivElement>()
function onclick(e: MouseEvent) {
// self can't be undefined here, but the type is HTMLDivElement | undefined
self.doSomething()
}
</script>
<div bind:this={self} {onclick}>...</div>
I would say most people are used to writing something like the code above, regardless of framework, without any typing issues.
from svelte.
Related Issues (20)
- pre-process script 'process-messages' not working when .DS_Store is in `messages/` directory
- Svelte 5: Properties on fallback prop value only initially reactive
- Invalid mutation or binding when modifying array elements
- Svelte 5 Runes: Not copying correct name using binding search with derived HOT 3
- Source Code permission HOT 3
- Reactivity not working on safari v12.5.7 HOT 1
- Svelte 5 watch derived change and run view-transition HOT 4
- Svelte 5 Map Reactivity issue HOT 3
- Relative import paths need explicit file extensions in ECMAScript imports when '--moduleResolution' is 'node16' or 'nodenext'. Did you mean './types.js'?ts(2835) HOT 1
- SVG animation with in:draw and delay is visible before the animation HOT 2
- Element with a fade in animation flickers HOT 3
- Pass Prop with Syntax as Object HOT 5
- a11y: Add #show directive to support dynamic show/hide of elements while being screen reader compatible HOT 1
- Svelte 5: Confusing and unclear warning `state_referenced_locally` HOT 7
- Svelte 5: Add element tag template literal shorthand HOT 1
- Incorrect warning on <div style="scroll:auto" tabindex="0"> HOT 2
- Svelet 5 REPL: Error compiling component (too much recursion) HOT 5
- can't define property Symbol("$state"): Object is not extensible
- Svelte 5 REPL: not display error or warning wavy lines when first opened HOT 2
- Svelte 5: `svelte-ignore unused-export-let` is ignored HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from svelte.