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] Work with DOM Elements in TypeScript using Type Assertions的更多相关文章

  1. 玩转TypeScript(引言&文章目录) --初看TypeScript.

    JavaScript过去一直被当作一种玩具语言存在,直到2005年以后,这门语言又开始活跃并可以说是火爆,而且随着浏览器版本的不断升级和完善,各种DOM之间的兼容性已经渐渐的被各种技术解决了,比如经典 ...

  2. Adding DOM elements to document

    1.JavaScript 添加DOM Element 执行效率比较: 抄自:http://wildbit.com/blog/2006/11/21/javascript-optimization-add ...

  3. [Cypress] Create Aliases for DOM Elements in Cypress Tests

    We’ll often need to access the same DOM elements multiple times in one test. Your first instinct mig ...

  4. [D3] Create DOM Elements with D3 v4

    Change is good, but creating from scratch is even better. This lesson shows you how to create DOM el ...

  5. [D3] Modify DOM Elements with D3 v4

    Once you can get hold of DOM elements you’re ready to start changing them. Whether it’s changing col ...

  6. [D3] Select DOM Elements with D3 v4

    Before you can create dazzling data driven documents, you need to know how D3 accesses the DOM. This ...

  7. ReactDOM & DOM Elements

    一.ReactDOM 1.1 render() ReactDOM.render(element,container,[callback]) 在container中渲染一个React元素,然后返回组件一 ...

  8. electron教程(番外篇二): 使用TypeScript版本的electron, VSCode调试TypeScript, TS版本的ESLint

    我的electron教程系列 electron教程(一): electron的安装和项目的创建 electron教程(番外篇一): 开发环境及插件, VSCode调试, ESLint + Google ...

  9. TypeScript完全解读(26课时)_11.TypeScript完全解读-类型推论和兼容性

    11.TypeScript完全解读-类型推论和兼容性 在一些时候省略指令,ts会帮我们推断出省略的类型的地方适合的类型,通过学习ts的类型推论了解ts的推论规则 类型兼容性就是为了适应js灵活的特点, ...

随机推荐

  1. 前端读者 | 嗨,你知道this吗

    本文来自 @position_柚子,地址:https://juejin.im/post/5995c7a76fb9a0247a60c407 在平时的代码中,相信大家经常用到 this,可是你真的明白此 ...

  2. 解决CentOS7.4KDE桌面或者gnome桌面安装VLC及声音问题

    一.安装VLC 1.下载源 https://mirrors.tuna.tsinghua.edu.cn/epel/7/x86_64/e/epel-release-7-11.noarch.rpm http ...

  3. CentOS7.3安装electronic-wechat

    方法一.简单粗暴 1.到https://github.com/geeeeeeeeek/electronic-wechat/找到最新的安装包linux-x64.tar.gz 2.解压tar -zxvf ...

  4. LeetCode 344. Reverse String(反转字符串)

    题目描述 LeetCode 344. 反转字符串 请编写一个函数,其功能是将输入的字符串反转过来. 示例 输入: s = "hello" 返回: "olleh" ...

  5. Java数据库连接池-proxool

    连接池技术的思想: 连接复用(高效.安全),避免数据库频繁建立.关闭的开销 --------------------极客学院(参考lulei) 1.配置文件 <proxool> <! ...

  6. Ionic-wechat项目边开发边学(三):自定义样式,指令,服务

    摘要 上一篇文章主要介绍了一个ionic项目的标准目录结构,header标签的使用,以及页面之间的切换.这篇文章实现的功能有: 消息数据的获取, 消息列表的展示, 消息标为已读/未读, 主要涉及的到的 ...

  7. vue-music 关于Search(搜索页面)-- 搜索历史

    搜索历史展示每一次搜索过,并选中的关键字,保存数据到数组.搜索历史数据是需要在多个组件中共享的,所以保存在vuex 中 searchHistory 数组中,保存触发在搜索列表点击选中之后派发事件到se ...

  8. Java实现蛇形矩阵

    public class Solution { //下x++ 左y-- 上x-- 右y++ public void prints(int n) { int[][] mp = new int[n][n] ...

  9. CodeVS1169 传纸条 [DP补完计划]

    题目传送门 题目描述 Description 小渊和小轩是好朋友也是同班同学,他们在一起总有谈不完的话题.一次素质拓展活动中,班上同学安排做成一个m行n列的矩阵,而小渊和小轩被安排在矩阵对角线的两端, ...

  10. 【Java NIO】一文了解NIO

    Java NIO 1 背景介绍 在上一篇文章中我们介绍了Java基本IO,也就是阻塞式IO(BIO),在JDK1.4版本后推出了新的IO系统(NIO),也可以理解为非阻塞IO(Non-Blocking ...