ts定义html是什么类型,TypeScript—类型定义文件(*.d.ts)
一、ts文件中引入jquery。
1.大家是否有再vue 上使用过 ts,并再 .ts文件中引用过 jquery
1.1是不是遇到过如下问题:
import $ from 'jquery';
/***
Could not find a declaration file for module 'jquery'. 'd:/node-common/node_modules/jquery/dist/jquery.js' implicitly has an 'any' type.
Try `npm install @types/jquery` if it exists or add a new declaration (.d.ts) file containing `declare module 'jquery';`
/
2.上述提示:
2.1.找不到模块“jquery”的声明文件
2.2.尝试npm install @types/jquery (如果存在的话)
2.3.添加一个包含declare module 'jquery';的声明(.d.ts)文件
3.尝试安装 npm install @types/jquery 文件
执行后,发现npm仓库下是有这个包的,而且不需要引用该包,且项目能够正常运行了,是不是很神奇。
其实这里可以理解为,ts文件并不知道jquery文件到底暴露出的什么东西,无法获取。.d.ts 会把jquery 文件里面的方法属性重新定义为它能够认识的类型。
比如说常用到的$.ajax;$.get,在node_modules/types/jquery/JqueryStatic.d.ts 中我们可以看到对其的定义
interface JQueryStatic {
ajax(settings?JQuery.AjaxSettings):Jquery.jqXHR;
get(url: string,
data: JQuery.PlainObject | string,
success: JQuery.jqXHR.DoneCallback | null,
dataType?: string): JQuery.jqXHR;
}
说到这里你可能还不太懂 .d.ts文件怎么去用。
那么接下来和大家一起分享如何在自己的项目中使用.d.ts文件,(如2.3中所说,也可以自己创建.d.ts文件,对jquery 进行定义)。
二、了解下TS数据类型
简单的数据类型:
number:包括数字,浮点数,以及NAN、+-Infinity
string:字符串类型
boolean:布尔类型
null,undefined类型
void类型:可以用于表示没有返回值的函数
对象类型
type ballType = {
color:string;
r:number;
}
let ball : ballType = {color:'red',r:10}
interface ball2Type{
color:string;
r:number;
}
let ball2:ballType = {color:'red',r:0.5}
/***
interface 和 type都可以去定义类型。具体也是有区别 如interface 只能定义function、object、class类型,type 不仅可以定义此类型,还可以定义其它类型 type msg = string; 具体差异可自行查阅资料
*/
//顺带着说一下 可选属性
interface ball3Type {
color:string;
r:number;
index?:number // ? 把该属性设为可选属性,即该属性可有可无
}
let ball3:ball3type = {color:'red',r:10} //正确
let ball4:ball3type = {color:'red'} //错误,ball3Type 需要有r属性
let ball5:ball3type = {color:'red',r:10,index:1} //正确
//Partial 实现可选属性
//先看一下Partial 类型的定义
type Partial = {
[P in keyof T]?: T[P];
};
let ball6:Partial = {}//正确
let ball7:Partial = {r:10} //正确
//实际上 Partial 转化 ball3Type 后,其类型就变成了,每个属性都是可选属性,如下
type Patial_ball3Type = {
color?:string | undefined; // | 如 js 里面的 ‘||’ 或的意思
r?:number | undefined;
index?number | undefined;
}
//类型的拓展属性
let ball8:ball3Type = {color:'red',r:10,title:'ball'} //error ,title 属性不属于ball3Type,所以呢,怎么处理这种方式呢,如下:
type ball4Type = {
color:string;
r:number;
index?number;
[key:string]:string|number; // 表示,可含有string类型的key,且值为stirng或number类型。
}
let ball9:ball4Type = {color:'red',r:10,title:'ball',x:10,y:10} //正确
函数类型
//声明函数类型
type funType = (name:string) = >void;
let fun:funType = (name)=>{ console.log(name) }
//多态
interface fun2Type = {
set(name:string):void;
get(x:number):number;
}
let fun2:fun2Type = {
set(name){},
get(x){
return x;
}
}
还有一些混合类型,类型的并集,联合,结构子类型等,
//简单列举下类型的并集和联合
type A = {
x:number;
y:number;
}
type B = {
z:number;
x:number;
}
let m : A&B = {x:1,y;1,z:1}
let z:A|B = {z:1,x:1}
泛型
//泛型很重要,大家可以查阅资料细看,这里简单列举一下
//函数泛型
function get1(num:T[]):T{
return num[0]
}
//接口泛型
interface gen2Type{
getColor(ball:T):string;
saveBall(ball:T):void;
}
//类的泛型
class gen3{
info(i:T):T{
return i;
}
}
三、类
//定义一个类
class A{
//静态成员
static classId:number;
//成员变量,默认为public 公有属性
name:string;
age:number|void;
s?:string;
//构造函数
constructor(name:string,age?:number);
//方法
setS(s:string){
this.s = s;
}
}
//通过 new 实例化一个对象
const stu = new A('zhangsan');
const stu1 = new A('lisi',18);
stu1.setS("hello");
A.classId = 123;
console.log(`A.classId=${A.classId}`)
//类的继承
class A {
name:string;
constructor(name:string){
this.name = name;
}
}
class B extends A {
age:number;
constructor(name:string,age:number){
super(name);
this.age = age;
}
}
console.log(new B("zhangsan",18));
// B {name:'zhangsan',age:18}
//接口
interface Ani{
kinds:number;
draw(name:string):void;
getKinds():number;
}
interface Bni extends Ani{
time:Date;
setTime(time:Date):void;
}
//当作变量类型
const M:Bni = {
kinds:1,
time:new Date(),
draw(name:string){},
getKinds(){
return this.kinds;
},
setTime(time:Date){}
}
//当作接口
class M implements Bni {
kinds = 1;
time = new Date();
draw(name:string){}
getKinds(){
return this.kinds;
}
setTime(time:Date){}
}
四、动手编写.d.ts文件,让ts文件识别js
新建index.js文件
module.exports = {
url:'https://www.cnblogs.com/zcookies/'
}
新建custom.d.ts
//定义模块
declare module '*/index.js'{
const content: {
url:string
};
export = content;
}
入口文件main.ts
import config from './index.js';
console.log(config.url);
//此时发现引入index.js 不会报错,而且会智能提示 config下面的url 属性;
/***
1.如果没有custom.d.ts
代码会抛出:Could not find a declaration file for module './index.js';
且没有智能提示;
2.如果声明 declare module '*.js',这样做可以解决掉错误提示,但是没有智能提示;
3.想要正确的智能提示,需要按照js文件,输入对应的.d.ts文件即可。
*/
大家可以利用上面的知识点,实现对更复杂的js文件进行声明.d.ts文件;
ts定义html是什么类型,TypeScript—类型定义文件(*.d.ts)相关推荐
- class ts 扩展方法_如使用Typescript撸Vue(Vue2 + TS +TSX+CSS module)
Vue对TS的支持一致不太好,连Vue作者尤大也自嘲真香压错了宝.期待Vue3.0会用TS重构且会有较大改进.不过目前有一些第三方的库可以曲线优化对TS的支持.主要就介绍下过下面两个库来写Vue. 总 ...
- js定义全局变量 vue页面_vue + typescript,定义全局变量或者方法
众所周知,在 vue中,如果想定义一个全局变量的方法很简单,直接在 vue的原型上挂载属性或者方法即可. 但是,加上了typescript之后, Vue.prototype.$xxx = xxx 这 ...
- typescript 入门例子 Hello world——ts就是一个宿主机语言
安装 TypeScript TypeScript 的命令行工具安装方法如下: npm install -g typescript 安装完成之后,就有了 tsc 命令.编译一个 TypeScript 文 ...
- JavaScript 和 TypeScript 交叉口 —— 类型定义文件(*.d.ts)
在 <从 JavaScript 到 TypeScript 系列> 文章我们已经学习了 TypeScript 相关的知识. TypeScript 的核心在于静态类型,我们在编写 TS 的时候 ...
- TypeScript类型检查机制
类型推断 指不需要指定变量的类型,TS编译器可以根据某些规则自动推断出类型. 什么时候会有类型推断? 声明变量时没有指定类型 函数默认参数 函数返回值 ...... let a; // 这时自动推断为 ...
- Typescript 类型的常用知识与技能
Typescript 类型系统 本文主要整理与翻译自 lib.es5.d.ts与微软Typescript文档.MDN文档. 邮箱 :291148484@163.com CSDN 主页:https:// ...
- typescript学习之路(三) —— ts定义类的方法(包含es5以及es6的定义类)
提起类,不得不说一下,强类型编程语言,如php,java,c++等都有类的概念.而js作为一门弱类型语言,是没有类这个概念的,虽然也能模拟类的实现,但总归不是类.so,ts也只是模拟类而已,使得更贴切 ...
- 你所不了解的TypeScript 类型编程
点击上方"前端开发博客",选择"设为星标" 回复"2"加入前端群 前言 作为前端开发的趋势之一,TypeScript正在越来越普及,很多人像 ...
- 【TypeScript】(一)快速上手TypeScript类型语法
文章目录 1.概述 2.TS中的类型 2.1.类型推断 2.2.类型定义 2.3.复杂类型 2.3.1.联合 2.3.2.泛型 2.4.type关键字 3. 总结 1.概述 TypeScript(TS ...
最新文章
- 使用AD5933分析复阻抗的时钟频率设置
- 微信小程序-智能机器人
- php判断服务器操作系统的类型
- Mybatis高级应用 整合Ehcache
- Spring Boot基础学习笔记12:组件注册整合Servlet三大组件
- git 裁切_GitHub - taiyang0725/PicCrop: 图片裁剪的工具类,基于uCrop封装,使用十分便捷...
- Centos7挂载iso镜像文件配置本地yum源
- mac内存空间不足怎么办?试试删除这几个文件夹!
- BZOJ2754 [SCOI2012]喵星球上的点名
- linux 命令:nohup 详解
- NI软件卸载以及清除残余文件
- 【蓝牙】什么?还不知道蓝牙协议栈开源了?
- PicGo+Gitee(码云)搭建个人博客的免费图床
- 机器学习笔记09:支持向量机(二)-核函数(Kernels)
- 使用 SAP UI5 绘制 Business Rule Control
- 任意分布的随机数的产生方法
- Android 仿Windows Metro 界面UI
- JavaSwing页面的简单操作
- 统计学习方法--牛顿法和拟牛顿法
- Qt入门基础知识(vs2017+Qt5.12)
热门文章
- K-均值对地图上的点进行聚类(2)
- 浅析网页meta标签中X-UA-Compatible属性的使用
- dubbo管理控制台安装和使用
- 百度数据可视化图表套件echart实战
- 大型软件公司.Net面试题(二)
- 鸿蒙自研系统,华为已注册“华为鸿蒙”商标,自研操作系统最快秋季发布
- jquery中的ajax如何接收json串形式的接口
- 安装 MongoDB PHP 驱动 在CentOS 6.x和遇到的问题
- 单机运行环境搭建之 --CentOS-6.4安装MySQL 5.6.10并修改MySQL的root用户密码
- php strstartwith,PHP8新增的三个字符串函数 str_contains, str_starts_with, str_ends_with