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. 线段树+哈希【CF580E】Kefa and Watch

    线段树+哈希[CF580E]Kefa and Watch Description \(n\)个数的字符串,\(m + k\)个操作 1 l r k把\(l - r\)赋值为\(k\) 2 l r d询 ...

  2. 关于ARM的开发环境IAR工程的配置问题

    1设置路径使IAR能够自动关联你的头文件 a.将自己的头文件..c文件..s文件放在不同的文件当中.(此处的.C文件和.S文件以及头文件都是开始一个项目所必须有的文件.例如每一个项目都需要对UArt串 ...

  3. RabbitMQ (九) 消息的参数详解

    上篇文章讲了声明一个队列时的参数设置,这篇文章主要说一说发布消息时的参数设置. 发布消息时的完整入参是这样的: channel.BasicPublish ( exchange: "test_ ...

  4. 【ModelMap】jsp中显示springmvc modelmap传递的对象

    最近在做一个小网站,功能非常基础,决定用springmvc搭建. 遇到一个问题,在controller向前端传值时,比如使用ModelMap传了一个字符串,modelmap.addattribute( ...

  5. 如何使用weinre来进行远程调试phonegap应用

    使用phonegap开发的应用在真机上和PC上的显示效果以及浏览器渲染方式还是有些区别的.在PC端很好调试,各种浏览器都自带了调试工具,使用起来很方便,但是在一旦安装到了手机上,这个时候要进行调试就需 ...

  6. 对有些反编译不成功的apk,请更新最新的apktool.jar、 dex2jar试试

    韩梦飞沙  韩亚飞  313134555@qq.com  yue31313  han_meng_fei_sha 对有些反编译不成功的apk,请更新最新的apktool.jar. dex2jar试试 a ...

  7. Luogu P3579 [POI2014]PAN-Solar Panels

    题目大意: 给出T组询问,每组询问给出四个数a,b,c,d,每次询问满足a<=x<=b,c<=y<=d的gcd(x,y)的最大值 首先可以想到如果存在gcd(x,y)=k,那么 ...

  8. 【最优比率生成树】poj2728 Desert King

    最优比率生成树教程见http://blog.csdn.net/sdj222555/article/details/7490797 个人觉得很明白易懂,但他写的代码略囧. 模板题,但是必须Prim,不能 ...

  9. 【(博弈)dfs序+树状数组】BZOJ2819-Nim

    [题目大意] 普通的Nim游戏为:两个人进行游戏,N堆石子,每回合可以取其中某一堆的任意多个,可以取完,但不可以不取.谁不能取谁输.这个游戏是有必胜策略的.现在对每一堆编号1,2,3,4,...n,在 ...

  10. 【KMP求最小周期】POJ2406-Power Strings

    [题意] 给出一个字符串,求出最小周期. [思路] 对KMP的next数组的理解与运用orz ①证明:如果最小周期不等于它本身,则前缀和后缀必定有交叉. 如果没有交叉,以当前的next[n]为最小周期 ...