TypeScript—类型定义文件（*.d.ts）
<h5 id="一ts文件中引入jquery">一、ts文件中引入jquery。</h5><h6 id="1大家是否有再vue-上使用过-ts并再-ts文件中引用过-jquery">1.大家是否有再vue 上使用过 ts,并再 .ts文件中引用过 jquery</h6>
<p>1.1是不是遇到过如下问题：</p>
<pre><code class="language-javascript">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';`
/
</code></pre>
<h6 id="2上述提示">2.上述提示：</h6>
<p>2.1.<code>找不到模块“jquery”的声明文件</code></p>
<p>2.2.尝试<code>npm install @types/jquery</code> (如果存在的话)</p>
<p>2.3.添加一个包含<code>declare module 'jquery'; </code>的声明(.d.ts)文件</p>
<h6 id="3尝试安装-npm-install-typesjquery-文件">3.尝试安装 <code>npm install @types/jquery</code> 文件</h6>
<p>执行后，发现npm仓库下是有这个包的，而且不需要引用该包，且项目能够正常运行了，是不是很神奇。</p>
<p>其实这里可以理解为，ts文件并不知道jquery文件到底暴露出的什么东西，无法获取。.d.ts 会把jquery 文件里面的方法属性重新定义为它能够认识的类型。</p>
<p>比如说常用到的<code>$.ajax</code>;<code>$.get</code>，在node_modules/types/jquery/JqueryStatic.d.ts 中我们可以看到对其的定义</p>
<pre><code class="language-javascript">interface JQueryStatic {
ajax(settings?JQuery.AjaxSettings):Jquery.jqXHR;
get(url: string,
data: JQuery.PlainObject | string,
success: JQuery.jqXHR.DoneCallback | null,
dataType?: string): JQuery.jqXHR;
}
</code></pre>
<p>说到这里你可能还不太懂 .d.ts文件怎么去用。</p>
<p>那么接下来和大家一起分享如何在自己的项目中使用.d.ts文件，（如2.3中所说，也可以自己创建.d.ts文件，对jquery 进行定义）。</p>
<h5 id="二了解下ts数据类型">二、了解下TS数据类型</h5>
<h6 id="简单的数据类型">简单的数据类型：</h6>
<p><code>number</code>:包括数字，浮点数，以及NAN、+-Infinity</p>
<p><code>string</code>:字符串类型</p>
<p><code>boolean</code>：布尔类型</p>
<p><code>null</code>,<code>undefined</code>类型</p>
<p><code>void</code>类型：可以用于表示没有返回值的函数</p>
<h6 id="对象类型">对象类型</h6>
<pre><code class="language-typescript">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<T> 实现可选属性
//先看一下Partial 类型的定义
type Partial<T> = {
?: T;
};
let ball6:Partial<ball3Type> = {}//正确
let ball7:Partial<ball3Type> = {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;
:string|number; // 表示，可含有string类型的key，且值为stirng或number类型。
}
let ball9:ball4Type = {color:'red',r:10,title:'ball',x:10,y:10} //正确
</code></pre>
<h6 id="函数类型">函数类型</h6>
<pre><code class="language-typescript">//声明函数类型
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;
}
}
</code></pre>
<p>还有一些混合类型，类型的并集，联合,结构子类型等，</p>
<pre><code class="language-typescript">//简单列举下类型的并集和联合
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}
</code></pre>
<h6 id="泛型">泛型</h6>
<pre><code class="language-typescript">//泛型很重要，大家可以查阅资料细看，这里简单列举一下
//函数泛型
function get1<T>(num:T[]):T{
return num
}
//接口泛型
interface gen2Type<T>{
getColor(ball:T):string;
saveBall(ball:T):void;
}
//类的泛型
class gen3<T>{
info(i:T):T{
return i;
}
}
</code></pre>
<h5 id="三类">三、类</h5>
<pre><code class="language-typescript">//定义一个类
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){}
}
</code></pre>
<h5 id="四动手编写dts文件让ts文件识别js">四、动手编写.d.ts文件，让ts文件识别js</h5>
<p>新建index.js文件</p>
<pre><code class="language-javascript">module.exports = {
url:'https://www.cnblogs.com/zcookies/'
}
</code></pre>
<p>新建custom.d.ts</p>
<pre><code class="language-typescript">//定义模块
declare module '*/index.js'{
const content: {
url:string
};
export = content;
}
</code></pre>
<p>入口文件main.ts</p>
<pre><code class="language-typescript">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文件即可。
*/
</code></pre>
<p>大家可以利用上面的知识点，实现对更复杂的js文件进行声明.d.ts文件；</p><br><br>
来源：https://www.cnblogs.com/zcookies/p/14100538.html
頁:
[1]