如何查看HTML元素的TS类型

最新推荐文章于 2024-07-04 00:59:27 发布
最新推荐文章于 2024-07-04 00:59:27 发布
阅读量547 收藏 11
点赞数 9
文章标签： javascript 前端 typescript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_38902432/article/details/134685062
版权

在typescript项目开发中，我们难免会遇到获取DOM元素，并给其设置相应的ts类型，那么怎么知道HTML中DOM元素标签的ts类型了，请看下面：

1.用谷歌浏览器随便打开一个网页，

2.鼠标右击->检查

3.在开发者调试页面的`Elements`中找到对应的标签，并点击选中

4.点击`Console` Tab在其输入：
 

console.dir($0)

5.打印出来的最后一项[[Prototype]]的值就是该元素的ts类型

橙樱
关注
  • 9
    点赞
  • 踩
  • 11
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
index.html和ts交互
五千年的后羿
04-14 5202
（一）ts 传值给html ts调用html里的方法 index.html <script type="text/javascript"> function Read(url){ console.log("这是html里",url) } </script> GameMain.ts constructor() { window["R...
ts定义html是什么类型,TypeScript—类型定义文件（*.d.ts）
weixin_39894914的博客
06-20 1194
一、ts文件中引入jquery。1.大家是否有再vue 上使用过 ts,并再 .ts文件中引用过 jquery1.1是不是遇到过如下问题：import $ from 'jquery';/***Could not find a declaration file for module 'jquery'. 'd:/node-common/node_modules/jquery/dist/jquery.j...
TS所有dom元素的类型声明
热门推荐
weixin_44441196的博客
07-16 1万+
TS所有dom元素的类型声明，TS以声明，可以直接用 interface HTMLElementTagNameMap { "a": HTMLAnchorElement; "abbr": HTMLElement; "address": HTMLElement; "applet": HTMLAppletElement; "area": HTMLAreaElement; "article": HTMLElement; "aside": HTMLEleme.
DOM节点类型及属性
BReezeFK的博客
08-04 1638
DOM操作之——DOM节点类型及属性 虽然现在我们在开发中已经用不到自己操作DOM了，之前有JQ，现在更是有VUE、REACT两大框架供我们使用，但是我们也有必要了解下，关于原生JS中的DOM操作问题。 这次我们介绍一下DOM节点类型及获取节点的方法 我们认为在页面中所有呈现的内容，都是DOM文档中的一个节点（node），例如：元素标签是元素节点、注释的内容是注释节点、文本内容是文本节点、document是文档节点… 一、节点类型 1、文档节点 document 重点记忆属性： nodeType
HTML元素（标签）在TS中的类型表示
Ama_Lee的博客
04-02 7513
HTML元素（标签）在TS中的类型表示 在node_modules/typescript/lib/lib.dom.d.ts 中定义了有关DOM元素的接口，是可以直接使用的 在我们定义类型时输入HTML也会有相关的提示： 具体类型如下： 一般均为HTMLElement，特殊的为HTML+标签名+Element ，当然也有些标签名为单字母的例如h1-h6，他们的类型为HTMLHeadingElement。 "a": HTMLAnchorElement; "abbr": HTMLElement;
TS——基础类型
qq_52499745的博客
10-31 530
TS——基础类型
Vue3.0中element-plus按需引入
weixin_45389051的博客
08-01 4026
首先安装一个按需导入插件 yarn add babel-plugin-import -D 然后在babel.config.js中，没有的话创建一个 module.exports = { plugins: [ [ 'import', { libraryName: 'element-plus', customStyleName: (name) => { return `element-plus/lib/theme-c
原创组件化对话框ts+js脚本
12-09
在这个项目中，ts脚本用于定义对话框组件的结构和行为，提供更强大的类型检查和错误预防。 3. JavaScript实现：JavaScript是Web开发中的动态脚本语言，负责处理用户交互和动态更新页面内容。在这个组件中，js脚本...
Tarea_N2_Ingenieria_Web:HTML，CSS和TS的实现
04-06
CSS通过选择器（如元素选择器、类选择器、ID选择器）定位HTML元素，并应用样式规则。例如，`p {color: red;}`将所有段落文本设置为红色。使用外部样式表（`<link rel="stylesheet" href="style.css">`）、内部样式...
前端面试题html+css+js+ts+vue+react+uniapp
04-12
了解HTML5的新特性，如语义化标签（header, footer, section等），离线存储（Application Cache），拖放功能，媒体元素（audio, video）等，是现代前端开发的基础。 **CSS**：Cascading Style Sheets用于控制网页的...
calc-ts
03-30
5. **HTML和DOM操作**：`calc-ts`可能会与HTML元素交互，涉及DOM（Document Object Model）的操作，如选择元素、添加事件监听器、修改DOM结构等。 6. **计算逻辑**：根据项目名为“calc”，可能包含各种计算逻辑，如...
TS-Web-Components-multiple-HTML
02-06
4. **Custom Elements**: Web Components的一部分，允许开发者定义新的HTML元素。 5. **Babel7**: 是一个流行的JavaScript编译器，用于将现代JavaScript语法转换为浏览器支持的老版本JavaScript，确保代码兼容性。 6...
ts定义html是什么类型,JavaScript 和 TypeScript 交叉口 —— 类型定义文件(*.d.ts)
weixin_29696451的博客
06-20 1053
这篇文章有更新！！！！请去 原文 阅读！！！在 《从 JavaScript 到 TypeScript 系列》 文章我们已经学习了 TypeScript 相关的知识。TypeScript 的核心在于静态类型，我们在编写 TS 的时候会定义很多的类型，但是主流的库都是 JavaScript 编写的，并不支持类型系统。那么如何让这些第三方库也可以进行类型推导呢？这篇文章我们来讲解 JavaScript ...
vue3中使用ts
qq_42531108的博客
08-19 3887
路由中使用ts 路由表的类型和路由中的meta类型需要手动处理一下，其他地方（createRouter、useRoute、useRouter）默认已经处理好了。如果使用了volar插件 需要在tsconfig.json中通过compilerOptions.types指定全局组件类型。compositionApi默认启用了类型检测，定义基本类型数据可以使用泛型的形式绑定类型。使用defineComponent定义组件 => 启用类型推导。父子通信 => defineProps + 泛型。
vue TS项目
qt的博客
01-26 1844
一 、 搭建项目架构 使用vue-cli创建项目 vue create edu-boss-fed 使用自定义选项，选择babel,ts,route,vuex,css预处理，linter 使用class风格描述组件 选择ts和babel编译 不选择history路由模式 选择预处理器Sass，建议选择 dart-sass 选择ESlint 单独存放个自的配置文件 进入项目中，npm run serve 启动，默认打开8080地址 加入git 版本管理 创建远程仓库 本地代码提交远程仓库 生成git本地仓
TS学习笔记（ts基础类型 类型别名）
小小程序猿洋的博客
06-10 8090
中文文档网址https://www.tslang.cn/docs/home.html https://ts.xcatliu.com 与js不同的是 ts的变量都可以类型注解 ： 后面注明变量类型 let isDone: boolean = false; 与js的类型相比多出的 比如枚举（个人理解 将对象数据化了 类似数组通过下角标得到值） enum Color {Red,...
HTML元素类型总结
qq_52732369的博客
12-22 1090
html元素类型总结
TS学习笔记（八）：高级类型
weixin_33898876的博客
04-23 2153
交叉类型 交叉类型将多个类型合并为一个类型，相当于新类型具有这多个类型的所有特性，相当于是一种并的操作，通常在使用混入（mixin）的场合使用交叉类型，交叉类型的形式如： T & U 复制代码示例： interface IPerson { name: string; age: number; } interface IMan { love: string; age: nu...
Vue前端打包
最新发布
weixin_63680330的博客
07-04 300
介绍:Nginx是一款轻量级的Web服务器/反向代理服务器及电子邮件(IMAP/POP3)代理服务器。其特点是占有内存少，并发能力强，在各大型互联网公司都有非常广泛的使用。启动：双击nginx.exe 文件启动，服务器默认占用80端口。官网:https://nginx.org/打包好的dist目录赋值到html下。html静态资源文件目录。conf 配置文件目录。logs日志文件目录。temp临时文件目录。
vite 关闭ts校验
10-25
要关闭Vite中的Typescript（TS）校验，可以按照以下步骤进行操作： 1. 打开项目的根目录，在终端或命令提示符中运行以下命令以安装Vite的TS插件： ```bash npm install --save-dev @vitejs/plugin-vue2-typescript ``` 2. 打开项目中的`vite.config.js`文件（如果没有，请创建一个），确保以下内容存在： ```javascript import vuePlugin from '@vitejs/plugin-vue' import vue2Typescript from '@vitejs/plugin-vue2-typescript' export default { plugins: [ vuePlugin(), vue2Typescript({ //如果你只在编译时用到ts，可以在生产构建中禁用插件 include: [/\.vue$/, /\.tsx?$/], exclude: [/node_modules/, /path-to-exclude/] }) ] } ``` 3. 根据需要，可以进行配置以细化TS校验的范围。在示例代码中，我们使用`include`来指定需要进行TS校验的文件，并使用`exclude`来排除不需要进行校验的文件。根据实际需求，可以对这些选项进行配置。 4. 保存`vite.config.js`文件并重新启动Vite开发服务器。 这样，Vite将不再进行TS校验，而是将TS文件作为普通的JavaScript文件进行处理。请注意，关闭TS校验可能导致类型错误而不被发现，因此在进行此操作之前，请确保你的代码已经进行了充分的类型检查和测试。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值