一、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 文件

執(zhí)行后，發(fā)現(xiàn)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中所說，也可以自己創(chuàng)建.d.ts文件，對jquery 進行定義)。

二、了解下TS數(shù)據(jù)類型

簡單的數(shù)據(jù)類型：

number:包括數(shù)字，浮點數(shù)，以及NAN、+-Infinity

string:字符串類型

boolean：布爾類型

null,undefined類型

void類型：可以用于表示沒有返回值的函數(shù)

對象類型

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都可以去定義類型。具體也是有區(qū)別 如interface 只能定義function、object、class類型，type 不僅可以定義此類型，還可以定義其它類型 type msg = string; 具體差異可自行查閱資料

*/

//順帶著說一下 可選屬性

interface ball3Type {

color:string;

r:number;

index?:number // ? 把該屬性設(shè)為可選屬性，即該屬性可有可無

}

let ball3:ball3type = {color:'red',r:10} //正確

let ball4:ball3type = {color:'red'} //錯誤，ball3Type 需要有r屬性

let ball5:ball3type = {color:'red',r:10,index:1} //正確

//Partial 實現(xiàn)可選屬性

//先看一下Partial 類型的定義

type Partial = {

[P in keyof T]?: T[P];

};

let ball6:Partial = {}//正確

let ball7:Partial = {r:10} //正確

//實際上 Partial 轉(zhuǎn)化 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} //正確

函數(shù)類型

//聲明函數(shù)類型

type funType = (name:string) = >void;

let fun:funType = (name)=>{ console.log(name) }

//多態(tài)

interface fun2Type = {

set(name:string):void;

get(x:number):number;

}

let fun2:fun2Type = {

set(name){},

get(x){

return x;

}

}

還有一些混合類型，類型的并集，聯(lián)合,結(jié)構(gòu)子類型等，

//簡單列舉下類型的并集和聯(lián)合

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}

泛型

//泛型很重要，大家可以查閱資料細看，這里簡單列舉一下

//函數(shù)泛型

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{

//靜態(tài)成員

static classId:number;

//成員變量，默認為public 公有屬性

name:string;

age:number|void;

s?:string;

//構(gòu)造函數(shù)

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;

}

//當(dāng)作變量類型

const M:Bni = {

kinds:1,

time:new Date(),

draw(name:string){},

getKinds(){

return this.kinds;

},

setTime(time:Date){}

}

//當(dāng)作接口

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);

//此時發(fā)現(xiàn)引入index.js 不會報錯，而且會智能提示 config下面的url 屬性;

/***

1.如果沒有custom.d.ts

代碼會拋出：Could not find a declaration file for module './index.js';

且沒有智能提示；

2.如果聲明 declare module '*.js'，這樣做可以解決掉錯誤提示，但是沒有智能提示；

3.想要正確的智能提示，需要按照js文件，輸入對應(yīng)的.d.ts文件即可。

*/

大家可以利用上面的知識點，實現(xiàn)對更復(fù)雜的js文件進行聲明.d.ts文件；

總結(jié)

以上是生活随笔為你收集整理的ts定义html是什么类型,TypeScript—类型定义文件（*.d.ts）的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。