0
0

菜鸟教程笔记：TypeScript

一.TypeScript基础语法

运行ts程序

1.在ts文件中:Runoob.ts

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

2.通过tsc命令编译

  1. tsc Runoob.ts

3.得到js代码：Runoob.js

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

4.使用node来执行js代码

  1. $ node Runoob.js
  2. Hello World

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

  1. tsc file1.ts file2.ts file3.ts

在这里插入图片描述

tsc常用编译参数：

在这里插入图片描述

空白和换行

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

区分大小写

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

ts与面向对象

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

面向对象编程实例：

编译前ts的代码：
  1. classSite{name():void{console.log("Runoob")}}var obj =newSite(); 
  2. obj.name();
编译后js的代码：
  1. var Site =/** @class */(function(){functionSite(){}Site.prototype.name=function(){
  2.             console.log("Runoob");};return Site;}());var obj =newSite();
  3. obj.name();

二.TS的基础类型

在这里插入图片描述
在这里插入图片描述

Any类型

在这里插入图片描述

1.跳过类型检查

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

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

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

3.定义存储数组

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

null和Undefined

null

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

undefined

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

  1. // 启用 --strictNullCheckslet x:number;
  2. x =1;// 编译正确
  3. x =undefined;// 编译错误
  4. x =null;// 编译错误

never类型

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

  1. let x:never;let y:number;// 编译错误，数字类型不能转为 never 类型
  2. x =123;// 运行正确，never 类型可以赋值给 never类型
  3. x =(()=>{thrownewError('exception')})();// 运行正确，never 类型可以赋值给 数字类型
  4. y =(()=>{thrownewError('exception')})();// 返回值为 never 的函数可以是抛出异常的情况functionerror(message:string):never{thrownewError(message);}// 返回值为 never 的函数可以是无法被执行到的终止点的情况functionloop():never{while(true){}}

三.变量声明

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

  • 只能包含_和$

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

变量作用域

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

ts的代码

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

tsc编译的js代码

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

四.运算符

位运算符

在这里插入图片描述

  1. var a:number=2;// 二进制 10 var b:number=3;// 二进制 11var result; 
  2.         
  3. result =(a & b);console.log("(a & b) => ",result)
  4.             
  5. result =(a | b);console.log("(a | b) => ",result)  
  6.         
  7. result =(a ^ b);console.log("(a ^ b) => ",result);
  8.     
  9. result =(~b);console.log("(~b) => ",result);
  10.  
  11. result =(a << b);console.log("(a << b) => ",result); 
  12.  
  13. result =(a >> b);console.log("(a >> b) => ",result);
  14.  
  15. result =(a >>>1);console.log("(a >>> 1) => ",result);

三元运算符

Test ? expr1 : expr2

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

类型运算符

typeof 运算符

返回：操作数的数据类型

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

instanceof

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

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

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

五.循环

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

1.for… in … 循环

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

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

实例

  1. 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（集合）等可迭代的数据结构等。

  1. 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

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

4.every

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

六.函数

函数返回值

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

带参数函数

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

可选参数和默认参数

用？修饰，即可用可不用

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

默认参数

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

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

剩余参数

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

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

匿名函数

函数表达式：将匿名函数赋值给一个变量
格式：
**

  1. var res = function( [arguments] ) { ... }

**

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

匿名函数自调用

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

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

构造函数

利用new Function来定义函数

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

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

递归函数

函数内调用函数本身

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

Lambda函数

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

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

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

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

()是可选的

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

无参数时可以设置空括号

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

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

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

函数重载

方法名相同，而参数不同

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

七.Number

是一个原始类
var num = new Number(value);
注意： 如果一个参数值不能转换为一个数字将返回 NaN (非数字值)。
在这里插入图片描述

  1. 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实例

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

prototype实例

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

在这里插入图片描述
在这里插入图片描述

八.String(字符串)

用于处理文本

String对象属性

在这里插入图片描述

方法省略

八.Array（数组）

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

声明时直接初始化

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

Array

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

  1. var arr_names:number[]=newArray(4)for(var i =0; i<arr_names.length; i++){ 
  2.         arr_names[i]= i *2console.log(arr_names[i])}
  1. var sites:string[]=newArray("Google","Runoob","Taobao","Facebook")for(var i =0;i<sites.length;i++){console.log(sites[i])}

数组解构

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

数组迭代

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

多维数组

在这里插入图片描述

  1. 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])

作为参数传递给函数

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

作为函数的返回值

  1. functiondisp():string[]{returnnewArray("Google","Runoob","Taobao","Facebook");}var sites:string[]=disp()for(var i in sites){console.log(sites[i])}

九.Map对象

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

创建Map

let myMap = new Map();

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

  1. let myMap =newMap([["key1","value1"],["key2","value2"]]);

相关的函数与属性

在这里插入图片描述

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

使用ES6编译

  1. tsc --target es6 test.ts

迭代Map

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

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

使用ES6编译

  1. tsc --target es6 test.ts

十.元组

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

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

创建元组

声明一个元组并初始化

  1. var mytuple =[10,"Runoob"];

访问元组

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

元组运算

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

更新元组

元组是可变的

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

解构元组

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

十一.联合类型

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

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

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

  1. functiondisp(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"])

联合类型数组

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

一十二.接口

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

格式：interface interface_name {
}

  1. interfaceIPerson{ 
  2.     firstName:string, 
  3.     lastName:string,sayHi:()=>string}var customer:IPerson ={ 
  4.     firstName:"Tom",
  5.     lastName:"Hanks", 
  6.     sayHi:():string=>{return"Hi there"}}console.log("Customer 对象 ")console.log(customer.firstName)console.log(customer.lastName)console.log(customer.sayHi())var employee:IPerson ={ 
  7.     firstName:"Jim",
  8.     lastName:"Blakes", 
  9.     sayHi:():string=>{return"Hello!!!"}}console.log("Employee  对象 ")console.log(employee.firstName)console.log(employee.lastName)

联合类型和接口

在接口中使用联合类型

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

接口和数组

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

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

接口继承

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

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

单继承实例

  1. interfacePerson{ 
  2.    age:number}interfaceMusicianextendsPerson{ 
  3.    instrument:string}var drummer =<Musician>{}; 
  4. drummer.age =27 
  5. drummer.instrument ="Drums"console.log("年龄:  "+drummer.age)console.log("喜欢的乐器:  "+drummer.instrument)

多继承实例

  1. interfaceIParent1{ 
  2.     v1:number}interfaceIParent2{ 
  3.     v2:number}interfaceChildextendsIParent1, IParent2 {}var Iobj:Child ={ v1:12, v2:23}console.log("value 1: "+Iobj.v1+" value 2: "+Iobj.v2)

十三.类

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

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

创建实例化对象

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

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

类的继承

  • 子类不能继承父类的私有成员（方法和属性）
  • 支持多重继承，但一次只能继承一个类
  1. classShape{ 
  2.    Area:numberconstructor(a:number){this.Area = a 
  3.    }}classCircleextendsShape{disp():void{console.log("圆的面积:  "+this.Area)}}var obj =newCircle(223); 
  4. obj.disp()

继承类的方法重写

  • 类继承后，子类可以对父类的方法重写
  • super 是对父类的直接引用，可以调用父类的属性和方法
  1. classPrinterClass{doPrint():void{console.log("父类的 doPrint() 方法。")}}classStringPrinterextendsPrinterClass{doPrint():void{super.doPrint()// 调用父类的函数console.log("子类的 doPrint()方法。")}}

static 关键字

  • 定义类的数据成员（属性和方法）为静态的
  • 静态成员可以直接通过类名调用
  1. classStaticMem{static num:number;staticdisp():void{console.log("num 值为 "+ StaticMem.num)}} 
  2.  
  3. StaticMem.num =12// 初始化静态变量
  4. StaticMem.disp()// 调用静态方法

instanceof运算符

判断是否是指定类型的

  1. classPerson{}var obj =newPerson()var isPerson = obj instanceofPerson;console.log("obj 对象是 Person 类实例化来的吗？ "+ isPerson);

访问控制修饰符

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

  • Public
  • protected:只允许其自身和子类访问
  • private:只能自身访问
  1. classEncapsulate{ 
  2.    str1:string="hello"private str2:string="world"}var obj =newEncapsulate()console.log(obj.str1)// 可访问 console.log(obj.str2)// 编译错误， str2 是私有的

类和接口

  • 类可以实现接口
  • 使用关键字implements
  • 将interest字段作为类的属性使用
  1. interfaceILoan{ 
  2.    interest:number}classAgriLoanimplementsILoan{ 
  3.    interest:number 
  4.    rebate:numberconstructor(interest:number,rebate:number){this.interest = interest 
  5.       this.rebate = rebate 
  6.    }}var obj =newAgriLoan(10,1)console.log("利润为 : "+obj.interest+"，抽成为 : "+obj.rebate )

十四.对象

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

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

类型模板

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

对象作为参数传递给函数

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

鸭子类型

关注行为，不关注类型

  1. interfaceIPoint{ 
  2.     x:number 
  3.     y:number}functionaddPoints(p1:IPoint,p2:IPoint):IPoint {var x = p1.x + p2.x 
  4.     var y = p1.y + p2.y 
  5.     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，应使用///
  1. /// <reference path = "SomeFileName.ts" />
  1. namespace SomeNameSpaceName {exportinterfaceISomeInterfaceName{}exportclassSomeClassName{}}

实例

IShape.ts

  1. namespace Drawing {exportinterfaceIShape{draw();}}

Circle.ts

  1. /// <reference path = "IShape.ts" /> namespace Drawing {exportclassCircleimplementsIShape{publicdraw(){console.log("Circle is drawn");}}}

Triangle.ts

  1. /// <reference path = "IShape.ts" /> namespace Drawing {exportclassTriangleimplementsIShape{publicdraw(){console.log("Triangle is drawn");}}}

TestShape.ts

  1. /// <reference path = "IShape.ts" />   /// <reference path = "Circle.ts" /> /// <reference path = "Triangle.ts" />  functiondrawAllShapes(shape:Drawing.IShape){ 
  2.     shape.draw();}drawAllShapes(newDrawing.Circle());drawAllShapes(newDrawing.Triangle());

使用tsc命令编译

  1. tsc --out app.js TestShape.ts

使用node查看输出结果

  1. $ node app.js
  2. Circle is drawn
  3. Triangle is drawn

嵌套命名空间

Invoice.ts

  1. namespace Runoob {exportnamespace invoiceApp {exportclassInvoice{publiccalculateDiscount(price:number){return price *.40;}}}}

Invoice Test.ts

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

使用tsc编译

  1. tsc --out app.js InvoiceTest.ts

使用node来查看输出结果

  1. $ node app.js
  2. 200

十六.模块

作用：

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

export 模块导出

  1. // 文件名 : SomeInterface.ts exportinterfaceSomeInterface{// 代码部分}

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

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

实例

IShape.ts

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

Circle.ts

  1. import shape =require("./IShape");exportclassCircleimplementsshape.IShape {publicdraw(){console.log("Cirlce is drawn (external module)");}}

Triangle.ts

  1. import shape =require("./IShape");exportclassTriangleimplementsshape.IShape {publicdraw(){console.log("Triangle is drawn (external module)");}}

TestShape.ts

  1. import shape =require("./IShape");import circle =require("./Circle");import triangle =require("./Triangle");functiondrawAllShapes(shapeToDraw: shape.IShape){
  2.    shapeToDraw.draw();}drawAllShapes(newcircle.Circle());drawAllShapes(newtriangle.Triangle());

使用tsc命令编译

  1. tsc --module amd TestShape.ts
标签： typescript javascript 前端
本文转载自: https://blog.csdn.net/ACBYCL/article/details/126447267
版权归原作者 ACBYCL 所有， 如有侵权，请联系我们删除。
登录后发布评论

“菜鸟教程笔记：TypeScript”的评论:

还没有评论
关于作者
...
overfit同步小助手
文章同步
相关阅读

网络安全法-网络运行安全

使用selenium/drissionpage时如何阻止chrome自动跳转http到https

docker desktop 里部署的Open WebUI 管理员密码忘记了的处理方法

在ubuntu20.04中搭建onsite比赛运行环境

利用开源的低代码表单设计器FcDesigner高效管理和渲染复杂表单结构

Kafka学习笔记

【前端】浏览器输入url到页面呈现发生了什么？