客服电话
APP下载
迪恩网络APP
随时随地掌握行业动态
官方微信
扫描二维码
关注迪恩网络微信公众号
|
ts的类型声明有两个特征：
1. 类型声明1. 基本类型声明对于变量，函数，类，type，接口的声明 declare let name: string; declare function getName(params: string):void; declare class Animal{name: string} interface Person{ name: string } type User = { name: string } 2. 外部枚举声明declare enum Season { SPRING, SUMMER, AUTUMN, WINTER } let seacons = [ Season.SPRING, Season.SUMMER, Season.AUTUMN, Season.WINTER ] // 常量枚举 declare const enum Season2 { SPRING, SUMMER, AUTUMN, WINTER } 3. 命名空间声明-namespace主要用于自定义声明含有很多属性的全局变量，如jquery库的$
// $作为对象时 declare namespace $ { function ajax(url: string, settings:any):void; let name: string; namespace fn { function extend(object: any):void } } // 示例 $.ajax('./url', {}) // $作为函数时 declare function $(selector: string): HTMLElement; // 示例 $('#root') 2. 类型声明文件类型声明的文件的后缀为 .d.ts。 对应的tsconfig.json中的相关配置参数有： include: [ "./src/**/*" // 表示ts编译时针对src文件夹下的所有的.ts后缀的文件, "./types/**/*" ] 如果不设置该属性，则默认编译所有文件夹下的文件。 1. 自定义第三方类型声明文件在引入文件定义查找路径的规则时，需要在tsconfig.json中的compilerOptions中配置paths+baseUrl。 "baseUrl": "./", /* 解决相对路径；设置paths时，该属性必须存在*/ "paths": { "*": ["types/*"] }, /* import引入文件查找对应的声明文件时的相对于baseUrl的路径*/ src/index.ts import * as jQuery from 'jquery'; jQuery.default.ajax('/users', {}); 安装jquery npm install -S jquery 自定义jquery的声明文件： types/jquery.d.ts declare function jQuery(params:string): HTMLElement; declare namespace jQuery { function ajax(url: string, setting: any): void; } export default jQuery; 2. 第三方类型声明文件库类型声明文件的查找优先级 1. 根据配置文件的paths查找自定义的类型声明文件，如果无，向下 2. 查找node_modules/XXX/package.json中types字段，如果无，向下 3. 查找node_modules/XXX/index.d.ts 4. 查找node_modules/@types/XXX/index.d.ts 对于常用的js库的类型声明文件，有现成的声明文件@types/*。 示例： 1. 安装@types/jquery 2.直接使用 ⚠️： 如果自定义的类型声明文件也存在时，会使用自定义的类型声明文件 import * as jQuery from 'jquery';
jQuery.ajax('./uers');
3. 类型声明扩展本质上是扩展目标对象的属性值
1. 扩展全局变量-declare global当前文件中使用了export关键字，为局部文件，需要在该文件中扩展全局变量
export{}; declare global { interface String { double(): string; } interface Window { myname: string; } } String.prototype.double = function(){ return this.toLowerCase() + this; } console.log('lee'.double()); window.myname = "hello world" 2. 使用命名空间扩展
给类添加属性
class Form { username: Form.Item = ""; //Form在此处用作命名空间 password: Form.Item = ""; } // 使用declare时，内部不需要export； // declare已经表明可以被外部使用 declare namespace Form { class Item{} } // 或者 /* namespace Form { export class Item{} } */ let form: Form = { username: "", password: "" }
给函数添加属性
declare function JQuery(selector: string): HTMLElement; declare namespace JQuery { let name: string; }
扩展枚举值的选项 enum Color { RED=1, BLUE } declare namespace Color { const GREEN = 3; const VIOLET = 4; } let color = Color.GREEN; console.log(color)
|
请发表评论