TypeScript语法进阶（上）https://developer.aliyun.com/article/1392235
命名空间
namespace Home { class Header { constructor() { const elem = document.createElement('div'); elem.innerText = 'This is Header'; document.body.appendChild(elem); } } class Content { constructor() { const elem = document.createElement('div'); elem.innerText = 'This is Content'; document.body.appendChild(elem); } } class Footer { constructor() { const elem = document.createElement('div'); elem.innerText = 'This is Footer'; document.body.appendChild(elem); } } export class Page { constructor() { new Header(); new Content(); new Footer(); } } }
命名空间嵌套
page.ts
///<reference path="components.ts" /> namespace Home { export namespace Dell { export const teacher: Components.user = { name: 'dell' }; } export class Page { constructor() { new Components.Header(); new Components.Content(); new Components.Footer(); new Components.Footer(); } } }
components.ts
namespace Components { export interface user { name: string; } export class Header { constructor() { const elem = document.createElement('div'); elem.innerText = 'This is Header'; document.body.appendChild(elem); } } export class Content { constructor() { const elem = document.createElement('div'); elem.innerText = 'This is Content'; document.body.appendChild(elem); } } export class Footer { constructor() { const elem = document.createElement('div'); elem.innerText = 'This is Footer'; document.body.appendChild(elem); } } }
import对应的模块化
使用Parcel打包,TS代码
npm install parcel@next -D
会读取文件并进行编译。
描述文件中的全局类型
编写一个.d.ts文件，一个类库是js书写的，但是ts去引用就会出错，就需要安装类型定义文件。
jQuery.t.ds
// 定义全局变量 // declare var $: (param: () => void) => void; // 定义全局函数 interface JqueryInstance { html: (html: string) => JqueryInstance; } declare function $(readyFunc: () => void): void; declare function $(selector: string): JqueryInstance;
page.ts
$(function() { $('body').html('<div>123</div>'); });
// 使用了interface的语法，实现函数重载 interface JQuery { (readyFunc: () => void): void; (selector: string): JqueryInstance; } declare var $: JQuery;
$(function () { $("body").html("<div>123</div>"); new $.fn.init(); });
// 如何对对象进行类型定义，以及对类进行类型定义，以及命名空间的潜逃 declare namespace $ { namespace fn { class init {} } } // 使用了interface的语法，实现函数重载 interface JQuery { (readyFunc: () => void): void; (selector: string): JqueryInstance; } declare var $: JQuery;
模块代码的类型描述文件
安装jQuerynpm install jquery --save
// Es6 模块化 declare module 'jquery' { interface JqueryInstance { html: (html: string) => JqueryInstance; } // 混合类型 function $(readyFunc: () => void): void; function $(selector: string): JqueryInstance; namespace $ { namespace fn { class init {} } } export = $; }
泛型中keyof语法的使用
interface Person { name: string; age: number; gender: string; } // type NAME = 'name'; // key: 'name'; // Person['name']; // type T = 'age' // key: 'age' // Person['age'] // type T = 'gender' // key: 'gender' // Person['gender'] class Teacher { constructor(private info: Person) {} getInfo<T extends keyof Person>(key: T): Person[T] { return this.info[key]; } } const teacher = new Teacher({ name: 'dell', age: 18, gender: 'male' }); const test = teacher.getInfo('name'); console.log(test);
