[TypeScript] Work with DOM Elements in TypeScript using Type Assertions
typescript in with type Using dom Elements work
2023-09-14 08:59:15 时间
The DOM can be a bit tricky when it comes to typing. You never really know exactly what you're going to get, so you have to educate your codebase into what you know you're using. This is done using Type Assertion where TypeScript types know they're a certain type, but you give it additional information so you can access the properties and methods that you know will be available.
For example you want to control input autofocus by TypeScript:
const input = document.getElementById("input"); input.autofocus = true;
You will get compiler error:
You have to tell TypeScript, HTMLELement is actully a HTMLInputElement:
const input = document.getElementById("input") as HTMLInputElement; input.autofocus = true;
The same case:
input.addEventListener("input", event => { console.log(event.currentTarget.value) })
To fix this:
input.addEventListener("input", event => { const i = event.currentTarget as HTMLInputElement; console.log(i.value) })
相关文章
- [Typescript] Generics in Type Arguments
- [React Typescript 2022] Use TypeScript to Type a React Class Component
- [React Typescript 2022] Type a Radio Button Component in React using TypeScript
- [Typescript] Narrow the unknown Type with TypeScript's Assertion Functions
- [Typescript] Statically Type Unknown Values with TypeScript's unknown Type
- [Typescript] Create Type From Any Given Data in TypeScript
- [Typescript] Extend Functionality of a TypeScript Class with Decorators
- [Typescript] Simplify iteration of custom data structures in TypeScript with iterators (backwards iteration with for ... of.. loop)
- [Typescript] Exclude Properties from a Type in TypeScript (Omit)
- [Vuex] Use Namespaces in Vuex Stores using TypeScript
- [Typescript] Improve Readability with TypeScript Numeric Separators when working with Large Numbers
- [Vue + TS] Watch for Changes in Vue Using the @Watch Decorator with TypeScript
- [Vue @Component] Extend Vue Components in TypeScript
- [TypeScript] Restrict null and undefined via Non-Nullable-Types in TypeScript
- [Vue + TS] Create your own Decorators in Vue with TypeScript
- [TypeScript] Create random integers in a given range
- [TypeScript] Distinguishing between types of Strings in TypeScript
- [TypeScript] Union Types and Type Aliases in TypeScript
- [Typescript] Making TypeScript Stick - 6 - infer, build a ConstructorArg Type
- [TypeScript] Dynamically Allocate Function Types with Conditional Types in TypeScript
- [TypeScript] Work with DOM Elements in TypeScript using Type Assertions
- [TypeScript] Loading Compiled TypeScript Files in Browser with SystemJS
- [Typescript Kaop-ts] Use AOP in Vue Components with TypeScript and Kaop-ts
- [Vue +TS] Use Two-Way Binding in Vue Using @Model Decorator with TypeScript
- [TypeScript] Model Alternatives with Discriminated Union Types in TypeScript
- [TypeScript] Understand lookup types in TypeScript
- Sqlachemy的警告SAWarning: The IN-predicate on "sns_object.BIZ_ID" was invoked with an empty sequence. This results in a contradiction, which nonetheless can be expensive to evaluate.