菜鸟教程笔记：TypeScript

一.TypeScript基础语法

运行ts程序

1.在ts文件中:Runoob.ts

const hello : string = "Hello World!"
console.log(hello)

2.通过tsc命令编译

tsc Runoob.ts

3.得到js代码：Runoob.js

var hello = "Hello World!";
console.log(hello);

4.使用node来执行js代码

$ node Runoob.js
Hello World

我们可以同时编译多个ts文件：

tsc file1.ts file2.ts file3.ts

tsc常用编译参数：

空白和换行

ts会忽略 空格 ， 制表符 ， 换行符

区分大小写

分号是可选的，可以不写，但建议使用

ts与面向对象

理解：对现实世界理解和抽象的方法
面向对象有两个概念：对象和类
对象：类的一个实例，有状态和行为。
类：是一个模板，里面包含一类对象的行为，状态
方法：类的操作的实现步骤

面向对象编程实例：

编译前ts的代码：

class Site { 
   name():void { 
      console.log("Runoob") 
   } 
} 
var obj = new Site(); 
obj.name();

编译后js的代码：

var Site = /** @class */ 
(
        function () 
    {
        function Site() {

        }
        
        Site.prototype.name = function () {
            console.log("Runoob");
        };
        return Site;
    }()
);
var obj = new Site();
obj.name();

二.TS的基础类型

Any类型

1.跳过类型检查

let x: any = 1;    // 数字类型
x = 'I am who I am';    // 字符串类型
x = false;    // 布尔类型

2.允许在编译时可选择地包含或移除类型检查

let x: any = 4;
x.ifItExists();    // 正确，ifItExists方法在运行时可能存在，但这里并不会检查
x.toFixed();    // 正确

3.定义存储数组

let arrayList: any[] = [1, false, 'fine'];
arrayList[1] = 100;

null和Undefined

null

表示：1.什么都没有
2.空对象引用
3.用typeof 返回 object

undefined

表示：1.一个没有设置值的变量
2.用typeof 会返回 undefined
3.null和undefined 是任何类型的子类型，所以可以赋值给其他类型，但在严格空检验（–stricNullChecks）下，只能赋给void或其本身对应的类型

// 启用 --strictNullChecks
let x: number;
x = 1; // 编译正确
x = undefined;    // 编译错误
x = null;    // 编译错误

never类型

表示：1.代表不会出现的值
2.声明了never只能被never类型所赋值
是其他类型（包括null和nudefined）的子类型，

let x: never;
let y: number;

// 编译错误，数字类型不能转为 never 类型
x = 123;

// 运行正确，never 类型可以赋值给 never类型
x = (()=>{ throw new Error('exception')})();

// 运行正确，never 类型可以赋值给 数字类型
y = (()=>{ throw new Error('exception')})();

// 返回值为 never 的函数可以是抛出异常的情况
function error(message: string): never {
    throw new Error(message);
}

// 返回值为 never 的函数可以是无法被执行到的终止点的情况
function loop(): never {
    while (true) {}
}

三.变量声明

用于引用计算机内存地址
变量命名规则：

• 只能包含_和$

var [变量名] : [类型] = 值;

变量作用域

• 全局作用域
• 类作用域：类变量在类的方法外，可通过类的对象访问。也可以是静态的，静态变量可以通过类名直接访问—class.valname
• 局部作用域

ts的代码

var global_num = 12          // 全局变量
class Numbers { 
   num_val = 13;             // 实例变量
   static sval = 10;         // 静态变量
   
   storeNum():void { 
      var local_num = 14;    // 局部变量
   } 
} 
console.log("全局变量为: "+global_num)  
console.log(Numbers.sval)   // 静态变量
var obj = new Numbers(); 
console.log("实例变量: "+obj.num_val)

tsc编译的js代码

var global_num = 12; // 全局变量
var Numbers = /** @class */ (function () {
    function Numbers() {
        this.num_val = 13; // 实例变量
    }
    Numbers.prototype.storeNum = function () {
        var local_num = 14; // 局部变量
    };
    Numbers.sval = 10; // 静态变量
    return Numbers;
}());
console.log("全局变量为: " + global_num);
console.log(Numbers.sval); // 静态变量
var obj = new Numbers();
console.log("实例变量: " + obj.num_val);

四.运算符

位运算符

var a:number = 2;   // 二进制 10 
var b:number = 3;   // 二进制 11
    
var result; 
        
result = (a & b);     
console.log("(a & b) => ",result)
            
result = (a | b);          
console.log("(a | b) => ",result)  
        
result = (a ^ b);  
console.log("(a ^ b) => ",result);
    
result = (~b); 
console.log("(~b) => ",result);
 
result = (a << b); 
console.log("(a << b) => ",result); 
 
result = (a >> b); 
console.log("(a >> b) => ",result);
 
result = (a >>> 1); 
console.log("(a >>> 1) => ",result);

三元运算符

Test ? expr1 : expr2

var num:number = -2 
var result = num > 0 ? "大于 0" : "小于 0，或等于 0" 
console.log(result)

类型运算符

typeof 运算符

返回：操作数的数据类型

var num = 12 
console.log(typeof num);   //输出结果: number

instanceof

判断对象是否与预期的类型相同

字符串运算符：连接运算符（+）

var msg:string = "RUNOOB"+".COM" 
console.log(msg)

五.循环

1. for … in …
2. for … of …
3. forEach
4. every
5. some

1.for… in … 循环

用于一组值的集合或列表进行迭代

for (var val in list) { 
    //语句 
}

实例

var j:any; 
var n:any = "a b c" 
 
for(j in n) {
    console.log(n[j])  
}

2.for…of …

for…of 允许遍历 Arrays（数组）, Strings（字符串）, Maps（映射）, **Sets（集合）**等可迭代的数据结构等。

let someArray = [1, "string", false];
 
for (let entry of someArray) {
    console.log(entry); // 1, "string", false
}

3.forEach

js循环语法：forEach,every,some
ts:因为forEach在iteration中是无法返回的，所以用every和some来取代foreach

let list = [4, 5, 6];
list.forEach((val, idx, array) => {
    // val: 当前值
    // idx：当前index
    // array: Array
});

4.every

let list = [4, 5, 6];
list.every((val, idx, array) => {
    // val: 当前值
    // idx：当前index
    // array: Array
    return true; // Continues
    // Return false will quit the iteration
});

六.函数

函数返回值

// 函数定义
function greet():string { // 返回一个字符串
    return "Hello World" 
} 
 
function caller() { 
    var msg = greet() // 调用 greet() 函数 
    console.log(msg) 
} 
 
// 调用函数
caller()

带参数函数

function add(x: number, y: number): number {
    return x + y;
}
console.log(add(1,2))

可选参数和默认参数

用？修饰，即可用可不用

function buildName(firstName: string, lastName?: string) {
    if (lastName)
        return firstName + " " + lastName;
    else
        return firstName;
}
 
let result1 = buildName("Bob");  // 正确
let result2 = buildName("Bob", "Adams", "Sr.");  // 错误，参数太多了
let result3 = buildName("Bob", "Adams");  // 正确

默认参数

参数不能同时设置为可选和默认

function calculate_discount(price:number,rate:number = 0.50) { 
    var discount = price * rate; 
    console.log("计算结果: ",discount); 
} 
calculate_discount(1000) 
calculate_discount(1000,0.30)

剩余参数

以…为前缀，当传入的参数不确定时使用

function buildName(firstName: string, ...restOfName: string[]) {
    return firstName + " " + restOfName.join(" ");
}
  
let employeeName = buildName("Joseph", "Samuel", "Lucas", "MacKinzie");

匿名函数

函数表达式：将匿名函数赋值给一个变量
格式：
var res = function( [arguments] ) { ... }

var res = function(a:number,b:number) { 
    return a*b;  
}; 
console.log(res(12,2))

匿名函数自调用

自己执行自己，不会变量提升，运行完就释放内存

(function () { 
    var x = "Hello!!";   
    console.log(x)     
 })()

构造函数

利用new Function来定义函数

var res = new Function ([arg1[, arg2[, …argN]],] functionBody)

var myFunction = new Function("a", "b", "return a * b"); 
var x = myFunction(4, 3); 
console.log(x);

递归函数

函数内调用函数本身

function factorial(number) {
    if (number <= 0) {         // 停止执行
        return 1; 
    } else {     
        return (number * factorial(number - 1));     // 调用自身
    } 
}; 
console.log(factorial(6));      // 输出 720

Lambda函数

• ()是可选的
• 无参数时可以设置空括号
• 不指定函数的参数类型，通过函数内来推断参数类型

也被称为箭头函数，，比较简洁，，建议常用

( [param1, parma2,…param n] )=>statement;

var foo = (x:number)=>10 + x 
console.log(foo(100))      //输出结果为 110

()是可选的

var display = x => { 
    console.log("输出为 "+x) 
} 
display(12)

无参数时可以设置空括号

var disp =()=> { 
    console.log("Function invoked"); 
} 
disp();

不指定函数的参数类型，通过函数内来推断参数类型

var func = (x)=> { 
    if(typeof x=="number") { 
        console.log(x+" 是一个数字") 
    } else if(typeof x=="string") { 
        console.log(x+" 是一个字符串") 
    }  
} 
func(12) 
func("Tom")

函数重载

方法名相同，而参数不同

function disp(s1:string):void; 
function disp(n1:number,s1:string):void; 
 
function disp(x:any,y?:any):void { 
    console.log(x); 
    console.log(y); 
} 
disp("abc") 
disp(1,"xyz");

七.Number

是一个原始类
var num = new Number(value);
注意： 如果一个参数值不能转换为一个数字将返回 NaN (非数字值)。

console.log("TypeScript Number 属性: "); 
console.log("最大值为: " + Number.MAX_VALUE); 
console.log("最小值为: " + Number.MIN_VALUE); 
console.log("负无穷大: " + Number.NEGATIVE_INFINITY); 
console.log("正无穷大:" + Number.POSITIVE_INFINITY);

NaN实例

var month = 0 
if( month<=0 || month >12) { 
    month = Number.NaN 
    console.log("月份是："+ month) 
} else { 
    console.log("输入月份数值正确。") 
}
//输出结果：月份是：NaN

prototype实例

function employee(id:number,name:string) { 
    this.id = id 
    this.name = name 
} 
 
var emp = new employee(123,"admin") 
employee.prototype.email = "admin@runoob.com" 
 
console.log("员工号: "+emp.id) 
console.log("员工姓名: "+emp.name) 
console.log("员工邮箱: "+emp.email)

八.String(字符串)

用于处理文本

String对象属性

方法省略

八.Array（数组）

如果在声明的时候没有设置类型，默认为any类型

声明时直接初始化

var nums:number[] = [1,2,3,4] 
console.log(nums[0]); 
console.log(nums[1]); 
console.log(nums[2]); 
console.log(nums[3]);

Array

可以用其创建数组，，比较冷门
（参数一，参数二）
(数组大小的数值，初始化的数组列表使用，分隔符)

var arr_names:number[] = new Array(4)  
 
for(var i = 0; i<arr_names.length; i++) { 
        arr_names[i] = i * 2 
        console.log(arr_names[i]) 
}

var sites:string[] = new Array("Google","Runoob","Taobao","Facebook") 
 
for(var i = 0;i<sites.length;i++) { 
        console.log(sites[i]) 
}

数组解构

var arr:number[] = [12,13] 
var[x,y] = arr // 将数组的两个元素赋值给变量 x 和 y
console.log(x) 
console.log(y)

数组迭代

var j:any; 
var nums:number[] = [1001,1002,1003,1004] 
 
for(j in nums) { 
    console.log(nums[j]) 
}

多维数组

var multi:number[][] = [[1,2,3],[23,24,25]]  
console.log(multi[0][0]) 
console.log(multi[0][1]) 
console.log(multi[0][2]) 
console.log(multi[1][0]) 
console.log(multi[1][1]) 
console.log(multi[1][2])

作为参数传递给函数

var sites:string[] = new Array("Google","Runoob","Taobao","Facebook") 
 
function disp(arr_sites:string[]) {
        for(var i = 0;i<arr_sites.length;i++) { 
                console.log(arr_sites[i]) 
        }  
}  
disp(sites);

作为函数的返回值

function disp():string[] { 
        return new Array("Google", "Runoob", "Taobao", "Facebook");
} 
 
var sites:string[] = disp() 
for(var i in sites) { 
        console.log(sites[i]) 
}

九.Map对象

保存键值对，并且能够记住键的原始插入顺序

创建Map

let myMap = new Map();

初始化Map,可以以数组的格式来传入键值对

let myMap = new Map([
        ["key1", "value1"],
        ["key2", "value2"]
    ]); 

相关的函数与属性

let nameSiteMapping = new Map();
 
// 设置 Map 对象
nameSiteMapping.set("Google", 1);
nameSiteMapping.set("Runoob", 2);
nameSiteMapping.set("Taobao", 3);
 
// 获取键对应的值
console.log(nameSiteMapping.get("Runoob"));     // 2
 
// 判断 Map 中是否包含键对应的值
console.log(nameSiteMapping.has("Taobao"));       // true
console.log(nameSiteMapping.has("Zhihu"));        // false
 
// 返回 Map 对象键/值对的数量
console.log(nameSiteMapping.size);                // 3
 
// 删除 Runoob
console.log(nameSiteMapping.delete("Runoob"));    // true
console.log(nameSiteMapping);
// 移除 Map 对象的所有键/值对
nameSiteMapping.clear();             // 清除 Map
console.log(nameSiteMapping);

使用ES6编译

tsc --target es6 test.ts

迭代Map

Map对象中的元素是按顺序插入的，每一次迭代返回[key,value]数组，建议使用for…of

let nameSiteMapping = new Map();
 
nameSiteMapping.set("Google", 1);
nameSiteMapping.set("Runoob", 2);
nameSiteMapping.set("Taobao", 3);
 
// 迭代 Map 中的 key
for (let key of nameSiteMapping.keys()) {
    console.log(key);                  
}
 
// 迭代 Map 中的 value
for (let value of nameSiteMapping.values()) {
    console.log(value);                 
}
 
// 迭代 Map 中的 key => value
for (let entry of nameSiteMapping.entries()) {
    console.log(entry[0], entry[1]);   
}
 
// 使用对象解析
for (let [key, value] of nameSiteMapping) {
    console.log(key, value);            
}

使用ES6编译

tsc --target es6 test.ts

十.元组

于数组相反，允许存储不同类型的元素，可以作为参数传递给函数

格式：var tuple_name = [value1,value2,value3,…value n]

创建元组

声明一个元组并初始化

var mytuple = [10,"Runoob"];

访问元组

var mytuple = [10,"Runoob"]; // 创建元组
console.log(mytuple[0]) 
console.log(mytuple[1])

元组运算

• push() 向元组添加元素至最后
• pop(): 从元组中移除最后一个元素，并返回移除的元素

var mytuple = [10,"Hello","World","typeScript"]; 
console.log("添加前元素个数："+mytuple.length)    // 返回元组的大小
 
mytuple.push(12)                                    // 添加到元组中
console.log("添加后元素个数："+mytuple.length) 
console.log("删除前元素个数："+mytuple.length) 
console.log(mytuple.pop()+" 元素从元组中删除") // 删除并返回删除的元素
        
console.log("删除后元素个数："+mytuple.length)

更新元组

元组是可变的

var mytuple = [10, "Runoob", "Taobao", "Google"]; // 创建一个元组
console.log("元组的第一个元素为：" + mytuple[0]) 
 
// 更新元组元素
mytuple[0] = 121     
console.log("元组中的第一个元素更新为："+ mytuple[0])

解构元组

var a =[10,"Runoob"] 
var [b,c] = a 
console.log( b )    
console.log( c )

十一.联合类型

管道（ | ）将变量设置多种类型

var val:string|number 
val = 12 
console.log("数字为 "+ val) 
val = "Runoob" 
console.log("字符串为 " + val)

将联合类型作为函数参数使用

function disp(name:string|string[]) { 
        if(typeof name == "string") { 
                console.log(name) 
        } else { 
                var i; 
                for(i = 0;i<name.length;i++) { 
                console.log(name[i])
                } 
        } 
} 
disp("Runoob") 
console.log("输出数组....") 
disp(["Runoob","Google","Taobao","Facebook"])

联合类型数组

var arr:number[]|string[]; 
var i:number; 
arr = [1,2,4] 
console.log("**数字数组**")  
 
for(i = 0;i<arr.length;i++) { 
   console.log(arr[i]) 
}  
 
arr = ["Runoob","Google","Taobao"] 
console.log("**字符串数组**")  
 
for(i = 0;i<arr.length;i++) { 
   console.log(arr[i]) 
}

一十二.接口

• 是一系列抽象方法的声明
• 一些方法特征的集合
• 这些方法都应该是抽象的，需要由具体的类去实现，然后第三方就可以通过这组抽象方法调用，让具体的类执行具体的方法。

格式：interface interface_name {
}

interface IPerson { 
    firstName:string, 
    lastName:string, 
    sayHi: ()=>string 
} 
 
var customer:IPerson = { 
    firstName:"Tom",
    lastName:"Hanks", 
    sayHi: ():string =>{return "Hi there"} 
} 
 
console.log("Customer 对象 ") 
console.log(customer.firstName) 
console.log(customer.lastName) 
console.log(customer.sayHi())  
 
var employee:IPerson = { 
    firstName:"Jim",
    lastName:"Blakes", 
    sayHi: ():string =>{return "Hello!!!"} 
} 
 
console.log("Employee  对象 ") 
console.log(employee.firstName) 
console.log(employee.lastName)

联合类型和接口

在接口中使用联合类型

interface RunOptions { 
    program:string; 
    commandline:string[]|string|(()=>string); 
} 
 
// commandline 是字符串
var options:RunOptions = {program:"test1",commandline:"Hello"}; 
console.log(options.commandline)  
 
// commandline 是字符串数组
options = {program:"test1",commandline:["Hello","World"]}; 
console.log(options.commandline[0]); 
console.log(options.commandline[1]);  
 
// commandline 是一个函数表达式
options = {program:"test1",commandline:()=>{return "**Hello World**";}}; 
 
var fn:any = options.commandline; 
console.log(fn());

接口和数组

接口中我们可以将数组的索引值和元素设置为不同类型，索引值可以是数字或字符串

interface namelist { 
   [index:number]:string 
} 
 
// 类型一致，正确
var list2:namelist = ["Google","Runoob","Taobao"]
// 错误元素 1 不是 string 类型
// var list2:namelist = ["Runoob",1,"Taobao"]

接口继承

接口通过其他接口来拓展自己

• 接口继承多个接口
• 使用关键字extends

单继承实例

interface Person { 
   age:number 
} 
 
interface Musician extends Person { 
   instrument:string 
} 
 
var drummer = <Musician>{}; 
drummer.age = 27 
drummer.instrument = "Drums" 
console.log("年龄:  "+drummer.age)
console.log("喜欢的乐器:  "+drummer.instrument)

多继承实例

interface IParent1 { 
    v1:number 
} 
 
interface IParent2 { 
    v2:number 
} 
 
interface Child extends IParent1, IParent2 { } 
var Iobj:Child = { v1:12, v2:23} 
console.log("value 1: "+Iobj.v1+" value 2: "+Iobj.v2)

十三.类

描述所创建对象共同的属性和方法
支持类和接口
注意构造函数的参数名与字段名相同

class Car { 
    // 字段 
    engine:string; 
 
    // 构造函数 
    constructor(engine:string) { 
        this.engine = engine 
    }  
 
    // 方法 
    disp():void { 
        console.log("发动机为 :   "+this.engine) 
    } 
}

创建实例化对象

类实例化时会调用构造函数
var obj = new Car(“Engine 1”)

class Car { 
   // 字段
   engine:string; 
   
   // 构造函数
   constructor(engine:string) { 
      this.engine = engine 
   }  
   
   // 方法
   disp():void { 
      console.log("函数中显示发动机型号  :   "+this.engine) 
   } 
} 
 
// 创建一个对象
var obj = new Car("XXSY1")
 
// 访问字段
console.log("读取发动机型号 :  "+obj.engine)  
 
// 访问方法
obj.disp()

类的继承

• 子类不能继承父类的私有成员（方法和属性）
• 支持多重继承，但一次只能继承一个类

class Shape { 
   Area:number 
   
   constructor(a:number) { 
      this.Area = a 
   } 
} 
 
class Circle extends Shape { 
   disp():void { 
      console.log("圆的面积:  "+this.Area) 
   } 
}
  
var obj = new Circle(223); 
obj.disp()

继承类的方法重写

• 类继承后，子类可以对父类的方法重写
• super 是对父类的直接引用，可以调用父类的属性和方法

class PrinterClass { 
   doPrint():void {
      console.log("父类的 doPrint() 方法。") 
   } 
} 
 
class StringPrinter extends PrinterClass { 
   doPrint():void { 
      super.doPrint() // 调用父类的函数
      console.log("子类的 doPrint()方法。")
   } 
}

static 关键字

• 定义类的数据成员（属性和方法）为静态的
• 静态成员可以直接通过类名调用

class StaticMem {  
   static num:number; 
   
   static disp():void { 
      console.log("num 值为 "+ StaticMem.num) 
   } 
} 
 
StaticMem.num = 12     // 初始化静态变量
StaticMem.disp()       // 调用静态方法

instanceof运算符

判断是否是指定类型的

class Person{ } 
var obj = new Person() 
var isPerson = obj instanceof Person; 
console.log("obj 对象是 Person 类实例化来的吗？ " + isPerson);

访问控制修饰符

**作用：**对类，变量，方法，构造方法进行保护

• Public
• protected:只允许其自身和子类访问
• private:只能自身访问

class Encapsulate { 
   str1:string = "hello" 
   private str2:string = "world" 
}
 
var obj = new Encapsulate() 
console.log(obj.str1)     // 可访问 
console.log(obj.str2)   // 编译错误， str2 是私有的

类和接口

• 类可以实现接口
• 使用关键字implements
• 将interest字段作为类的属性使用

interface ILoan { 
   interest:number 
} 
 
class AgriLoan implements ILoan { 
   interest:number 
   rebate:number 
   
   constructor(interest:number,rebate:number) { 
      this.interest = interest 
      this.rebate = rebate 
   } 
} 
 
var obj = new AgriLoan(10,1) 
console.log("利润为 : "+obj.interest+"，抽成为 : "+obj.rebate )

十四.对象

对象：是一组包含键值对的实例。值可以是标量，数组，函数，对象

var object_name = { 
    key1: "value1", // 标量
    key2: "value",  
    key3: function() {
        // 函数
    }, 
    key4:["content1", "content2"] //集合
}

类型模板

var sites = {
    site1: "Runoob",
    site2: "Google",
    sayHello: function () { } // 类型模板
};
sites.sayHello = function () {//对象中添加方法
    console.log("hello " + sites.site1);
};
sites.sayHello();

对象作为参数传递给函数

var sites = { 
    site1:"Runoob", 
    site2:"Google",
}; 
var invokesites = function(obj: { site1:string, site2 :string }) { 
    console.log("site1 :"+obj.site1) 
    console.log("site2 :"+obj.site2) 
} 
invokesites(sites)

鸭子类型

关注行为，不关注类型

interface IPoint { 
    x:number 
    y:number 
} 
function addPoints(p1:IPoint,p2:IPoint):IPoint { 
    var x = p1.x + p2.x 
    var y = p1.y + p2.y 
    return {x:x,y:y} 
} 
 
// 正确
var newPoint = addPoints({x:3,y:4},{x:5,y:1})  
 
// 错误 
var newPoint2 = addPoints({x:1},{x:4,y:3})

十五.命名空间

• 解决重名问题
• 用namespace来定义
• 互不干扰
• 如果命名空间中的类和接口，需要外部调用，export
• 引用一个单独的TS，应使用///

/// <reference path = "SomeFileName.ts" />

namespace SomeNameSpaceName { 
   export interface ISomeInterfaceName {      }  
   export class SomeClassName {      }  
}

实例

IShape.ts

namespace Drawing { 
    export interface IShape { 
        draw(); 
    }
}

Circle.ts

/// <reference path = "IShape.ts" /> 
namespace Drawing { 
    export class Circle implements IShape { 
        public draw() { 
            console.log("Circle is drawn"); 
        }  
    }
}

Triangle.ts

/// <reference path = "IShape.ts" /> 
namespace Drawing { 
    export class Triangle implements IShape { 
        public draw() { 
            console.log("Triangle is drawn"); 
        } 
    } 
}

TestShape.ts

/// <reference path = "IShape.ts" />   
/// <reference path = "Circle.ts" /> 
/// <reference path = "Triangle.ts" />  
function drawAllShapes(shape:Drawing.IShape) { 
    shape.draw(); 
} 
drawAllShapes(new Drawing.Circle());
drawAllShapes(new Drawing.Triangle());

使用tsc命令编译

tsc --out app.js TestShape.ts 

使用node查看输出结果

$ node app.js
Circle is drawn
Triangle is drawn

嵌套命名空间

Invoice.ts

namespace Runoob { 
   export namespace invoiceApp { 
      export class Invoice { 
         public calculateDiscount(price: number) { 
            return price * .40; 
         } 
      } 
   } 
}

Invoice Test.ts

/// <reference path = "Invoice.ts" />
var invoice = new Runoob.invoiceApp.Invoice(); 
console.log(invoice.calculateDiscount(500));

使用tsc编译

tsc --out app.js InvoiceTest.ts

使用node来查看输出结果

$ node app.js
200

十六.模块

作用：文章来源地址https://www.toymoban.com/news/detail-723125.html

• 更快的更换代码
• 模块里的东西外部是不可见的，是局部作用域，非全局作用域
• 通过import 和export 建立
• 模块使用模块加载器去导入其他的模块
• 运行时：模块加载器的作用是下载这个模块的所有依赖

export 模块导出

// 文件名 : SomeInterface.ts 
export interface SomeInterface { 
   // 代码部分
}

在另一个文件中使用import导入

import someInterfaceRef = require("./SomeInterface");

实例

IShape.ts

/// <reference path = "IShape.ts" /> 
export interface IShape { 
   draw(); 
}

Circle.ts

import shape = require("./IShape"); 
export class Circle implements shape.IShape { 
   public draw() { 
      console.log("Cirlce is drawn (external module)"); 
   } 
}

Triangle.ts

import shape = require("./IShape"); 
export class Triangle implements shape.IShape { 
   public draw() { 
      console.log("Triangle is drawn (external module)"); 
   } 
}

TestShape.ts

import shape = require("./IShape"); 
import circle = require("./Circle"); 
import triangle = require("./Triangle");  
 
function drawAllShapes(shapeToDraw: shape.IShape) {
   shapeToDraw.draw(); 
} 
 
drawAllShapes(new circle.Circle()); 
drawAllShapes(new triangle.Triangle());

使用tsc命令编译

tsc --module amd TestShape.ts 

到了这里，关于菜鸟教程笔记：TypeScript的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！