学习记录--TypeScript

TS知识

TS基础

一、基础类型

数据类型关键字描述
任意类型any声明为any的变量可以赋予任意类型的值
数字类型number双精度64位浮点值。它可以用来表示整数和分数
字符串类型string一个字符系列,使用单引号(‘)或双引号("")来表示字符串类型,反引号(`)来定义多行文本和内嵌表达式
布尔类型boolean表示逻辑值:true和false let flag : boolean = true
数组类型声明变量为数组 // 在元素类型后面加上[] let arr : number[] = [1,2];
元组元组类型用来表示已知元素数量和类型的数组,各元素的类型不必相同 let x :[string, number]; x= ['cjk' ,1]
枚举enum枚举类型用于定义数值集合 enum Color {Red, Green, Blue}; let c: Color = Color.Blue; console.log(c); // 输出 2
voidvoid用于表示方法返回的类型,表示该方法没有返回值
nullnull表示对象值缺失
undefinedundefined用于初始化变量为一个未定义的值
nevernevernever是其它类型(包括null和undefined)的子类型,代表从不会出现的 值。

注意:TypeScript和JavaScript 没有整数类型

二、变量声明

1、类型断言(Type Assertion)

类型断言可以用来手动指定一个值的类型,即允许变量从一种类型更改为另一种类型。
语法格式:
<类型> 值

值 as 类型
实例

var str = '1';
var str2:number = <number><any> str //str、str2是string类型
console.log(str2)
2、类型推断

当类型没有给出时,TypeScript 编译器利用类型推断来推断类型
如果由于缺乏声明而不能推断出类型,那么它的类型被视为默认的动态any类型。

var num = 2;
console.log("num 变量的值为"+num);
num = "12";
console.log(num);
  • 第一行代码声明了变量num 并设置初始值为2,注意变量声明没有指定类型。因此,程序使用类型推断来确定变量的数据类型,第一次赋值为2,num设置为number类型。
  • 第三行代码,当我们再次为变量设置字符串类型的值时,这时编译会错误,因为变量已经设置为number类型
    error TS2332 : Type '"12"' is not assignable to type ''number

三、运算符

1、算术运算符

同java、js

2、关系运算符

== 、 > 、< 、等
同java、js

3、逻辑运算符

&& 、|| 、!
同java、js

4、短路运算符

&& 、||
如果前面为false,&&后者不执行

5、位运算符
运算符描述例子类似于结果
~取反,取反是一元运算符,对一个二进制的每一位执行逻辑反操作。使数字1成为0,0成为1x=~5~01011010,即 -6(补码 = 原码取反 + 1)

位运算符同java

6、赋值运算符

同java

7、三元运算符

同Java

8、类型运算符
8.1、typeof运算符

typeof是一元运算符,返回操作数的数据类型。

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

instanceof 运算符用于判断对象是否为指定的类型。

9、其他运算符
9.1负号运算符(-)

更改操作数的符号

var x:number = 4;
var y = -x;
console.log("x 值为:",x); // 输出结果为4
console.log("y 值为:",y); //输出结果为-4
10、字符串运算符:连接运算符(+)

+运算符可以拼接两个字符串

var msg:string = "chenjk4"+".com";
console.log(msg);

四、条件语句

1、switch…case 语句

switch语句必须遵循下面的规则:

  • switch 语句中的expression是一个常量表达式,必须是一个整型或枚举类型
  • 不是每一个case都需要包含break。如果case语句不包含break,控制流将会继续后续的case,直到遇到break

– ts循环

1、for…in循环

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循环
let someArray = [1,"string",false];
for(let entry of someArray){
	console.log(entry);
}
3、forEach、every、while
3.1forEach
let list = [4,5,6];
list.forEach((val, idx, array)=>){
	//val :当前值
	//idx:当前index
	//array : Array
})

因为forEach 在iteration中无法返回,所以可以使用every和some来取代forEach。

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

五、函数

基本同java函数

function buildName(firstName: string, lastName: string) {
    return firstName + " " + lastName;
}
let result1 = buildName("Bob");                  // 错误,缺少参数
let result2 = buildName("Bob", "Adams", "Sr.");  // 错误,参数太多了
let result3 = buildName("Bob", "Adams");         // 正确
1、可选参数和默认参数

可选参数
在TypeScript函数里,如果我们定义了参数,则我们必须传入这些参数,除非将这些参数设置为可选,可选参数使用问号?。

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

可选参数必须跟在必需参数后面。 如果上例我们想让 firstName 是可选的,lastName 必选,那么就要调整它们的位置,把 firstName 放在后面。

2、默认参数

我们也可以设置参数的默认值,这样在调用函数的时候,如果不传入该参数的值,则使用默认参数。

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

有一种情况,我们不知道向函数传入多少个参数,这时候我们就可以使用剩余参数来定义。
剩余参数语法允许我们将一个不确定数量的参数作为一个数组传入。

function buildName(firstName:string, ...restOfName : string[]){
	return firstName + "" + restOfName.join(" ");
}
let employeeName
4、匿名函数

匿名函数是一个没有函数名的函数
匿名函数在程序运行时动态声明,除了没有函数名外,其他的与标准函数一样。
我们可以将匿名函数赋值一个变量,这种表达式就成为函数表达式。

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

var msg = function(){
	return "helli world";
}
console.log(msg()); // 输出hello world

var res = function(a:number,b:number){
return a*b;
}
console.log(res(12,2)); //输出24
5、匿名函数自调用

匿名函数自调用在函数后使用()即可

(function(){
	  var x = "hello!";
	  console.log(x);
})();
6、构造函数

TypeScript 也支持使用JavaScript 内置的构造函数Function()来定义函数

var res = new Function([arg1[,arg2[,...argN]],] functionBody)
- arg1,arg2...argN:参数列表
- functionBody: 一个含有包括函数定义的JavaScript语句的字符串
var myFunction = new Function("a","b","return a*b");
var x = myFunction(4,3);
console.log(x); //输出12
7、Lambda 函数

Lambda 函数也称之为箭头函数
箭头函数表达式的语法比函数表达式更短
函数只有一行语句
([param1,param2,…paramN]) => statement;

var foo = (x:number) => {
     x = 10+x;
     console.log(foo(100));
     }
     foo(100) ; // //输出110

六、Number对象

1、对象属性
序号属性&描述
1prototype Number对象的静态属性。使您有能力向对象添加属性和方法。
2constructor 返回对创建此对象的Number函数的引用
3NaN 非数字值(Not-A-Number)
1.1、NaN实例
var month = 0;
if(month<=0 || month>12){
	month = Number.NaN;
	console.log("月份是:”+ month);
}else{
	console.log("正确");
}
1.2、prototype 实例
function employee(id:number,name:string){
	this.id = id ;
	this.name = name;
}
var emp = new emplpyee(123,"cjk“);
employee.prototype.email = "chenjk4@gamil.com";

console.log("员工号:"+emp.id);
console.log("员工姓名:"+emp.name);
console.log("员工邮箱:"+emp.email)
2、Number对象方法

Number对象,支持以下方法

序号方法&描述实例
1toExponential 把对象的值转换为指数计数法//toExponential()
var num1 = 1225.30
var val = num1.toExponential();·
console.log(val) // 输出: 1.2253e+3
2.1、toFixed()

把数字转换成为字符串,并对小数点指定位数

var num3 = 177.234;
console.log("num3.toFixed()为" + num3.toFixed()) ; //输出:177
console.log("num3.toFixed(2)为"+ num3.toFixed(2)); // 输出:177.23
console.log("num3.toFixed(6)为"+ num3.toFixed(6)); 
//输出:177.234000
2.2、toPrecision()

把数字格式化为指定的长度

var num = new Number(7.123456);
console.log(num.toPrecision()); // 输出:7.123456
console.log(num.toPrecision(1)); //输出:7
console.log(num.toPrecision(2)); //输出:7.1
2.3、toString()

把数字转换为字符串,使用指定的基数。数字的基数是2~36之间的整数。若省略该参数,则使用基数10.

var num = new Number(10);
console.log(num.toString()); //输出10进制:10
console.log(num.toString(2)); //输出2进制:1010
console.log(num.toString(8)) ;// 输出8进制:12
2.3、valueOf()

返回一个Number对象的原始数字值

var num = new Number(10);
console.log(num.valueOf()); //输出:10

七、String (字符串)

1、String对象属性
1.1、constructor

对创建该对象的函数引用

var str = new String("This is string");
console.log("str.constructor is:"+str.constructor);
//输出结果
str.constructor is : function String(){ [native code] }
1.2、prototype

允许您向对象添加属性和方法

function employee(id:number,name:string){
	this.id = id ;
	this.name = name;
}
var emp  = new employee(123,"cjk");
employee.prototype.email="chenjk4@gamil.com" // 添加属性 email
console.log("员工号: "+emp.id) 
console.log("员工姓名: "+emp.name) 
console.log("员工邮箱: "+emp.email)

八、Array(数组)

数组对象是使用单独的变量名来存储一系列的值

var sites : string[];
sites = ["Google","Runoob","Taobao"];

//或者
var numlist : number[] = [2,4,6,8];
1、数据解构

我们也可以把数组元素赋值给变量,如下所示

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

我们可以使用for语句来循环输出数组各个元素

var j:any;
var nums: number[] = [1001,1002,1003,1004];

for(j in nums){
	 console.log(nums);
}
3、数组方法
3.1、concat()

连接两个或更多数组,并返回结果

var alpha = ["a","b","c"];
var number = [1,2,3];

var alphaNum = alpha.concat(number);
console.log("alphaNum : " + alphaNum ); // a,b,c,1,2,3
3.2、every()

检测数值元素的每个元素是否都符合条件

function isBigEnough(elemet , index, array){
	return (element >= 10);
}

var passed = [12,5,8,130,44].every(isBigEnough);
console.log("Test value:" + passed); //false
3.3、filter()

检测数值元素,并返回符合条件所有元素的数组

function isBigEnough(element, index, array){
	return (element >= 10);
}
var passed = [21,5,6,130,44].filter(isBigEnough);
console.log("Test Value:"+ passed); //21,130,44
3.4、forEach()

数组每个元素都执行一次回调函数

let num = [7,8,9];
num.forEach(function(value){
	console.log(value);
});
3.5、indexOf()

搜索数组中的元素,并返回它所在的位置。如果搜索不到,返回值-1,代表没有此项

var inde = [12,5,8,130,44].indexOf(8);
console.log("index is: " + index); //2
3.6、join()

把数组的所有元素放入一个字符串

var arr = new Array("First","Second","Third");
var str = arr.join();
console.log("str:"+ str); //First,Second,Third

var  str = arr.join(" + ");
console.log("str:"+ str); //First + Second + Third
3.7、lastIndexOf()

返回一个指定的字符串值最后出现的位置,在一个字符串中的指定位置从后向前搜索

var index = [12,5,8,130,44].lastIndexOf(8);
coosole.log("index is : "+index); // 2
3.8、map()

通过指定函数处理数组的每个元素,并返回处理后的数组

var numbers = [1,4,9];
var roots = numbers.map(Math.sqrt); //开根号
console.log("roots is : "+ roots); //1,2,3
3.9、pop()

删除数组的最后一个元素并返回删除的元素

var numbers = [1,4,9];
var element = numbers.pop();
console.log("element is :" + element); //9
var element = numbers.pop();
console.log("element is : " + element); //4  
3.10、push()

向数组的末尾添加一个或更多元素,并返回新的长度

var numbers = new Array(1,4,9);
var length = numbers.push(10);
console.log("new numbrees is : " + numbers); //1,4,9,10
length = numbers.push(20);
console.log("new numbers is :"+ numbers); //1,4,9,10,20
3.11、reduce()/reduceRight()

将数组元素计算为一个值(从左到右) (reduceRight()从右到左)

var total = [0,1,2,3].reduce(function(a,b){
	return a +b;
});
console.log("total is :" + total); //6
3.12、reverse()

反转数组的元素数据

var arr = [0,1,2,3].reverse();
console.log("Reversed array is : " + arr); //3,2,1,0
3.13、shift()

删除并返回数组的第一个元素

var arr = [10,1,2,3].shift();
console.log("Shifted value is :" + arr); //10
3.14、slice()

选取数组的一部分,并返回一个新的数组

var arr = ["orange", "mango","banana","sugar","tea"];
console.log("arr.slice(1,2) :" + arr.slice(1,2)); // mango
console.log("arr.slice(1,3) :" + arr.slice(1,2)); // mango,banana
3.15、some()

检测数组元素中是否有元素符合指定条件

function isBigEnough(element, index, array){
	return (element >= 10);
}
var retval = [2,,5,8,1,4].some(isBigEnough);
console.log("value:" + retval ) ; // false

var retval = [12,5,8,1,4].some(isBigEnough);
console.log("value:"+ retval); // true
3.16、sort()

对数组的元素进行排序

var arr = new Array("orange","mango","banana","sugar");
var sorted = arr.sort();
console.log("return string is :"+ sorted); // banana,mango,orange,sugar
3.17、splice()

从数组中添加或删除元素 (0:添加,1:删除)

var arr = ["orange", "mango", "banana", "sugar","tea"];
var removed = arr.splice(2,0,"water");
console.log("After adding 1:" + arr); //orange,mango,water,banana
removed = arr.splice(3,1);
console.log("After removing 1:" + arr); //orange,mango,water,sugar,tea
console.log(”remmoved is :“ + removed); //banana
3.18、toString()

把数组转换为字符串,并返回结果

var arr = new Array("orange","mango","banana","sugar");
var str = arr.toString();
console.log(""+ str) ; // orange,mango,banana,sugar
3.19、unshift()

向数组的开头添加一个或更多元素,并返回新的长度

var arr = new Array("orange","mango","banana","sugar");
var length = arr;unshift("water");
console.log("Returned array is : " + arr); //water, orange,mango,banana,sugar
console.log(""+ length); //5

九、Map对象

Map对象保存键值对,并且能够记住键的原始插入顺序。
任何值(对象或原始值)都可以作为一个键或一个值。

1、创建Map

TypeScript 使用Map类型和new关键字来创建Map:
Map 相关的函数与属性:

  • map.clear() – 移除 Map 对象的所有键/值对 。
  • map.set() – 设置键值对,返回该 Map 对象。
  • map.get() – 返回键对应的值,如果不存在,则返回 undefined。
  • map.has() – 返回一个布尔值,用于判断 Map 中是否包含键对应的值。
  • map.delete() – 删除 Map 中的元素,删除成功返回 true,失败返回 false。
  • map.size – 返回 Map 对象键/值对的数量。
  • map.keys() - 返回一个 Iterator 对象, 包含了 Map 对象中每个元素的键 。
  • map.values() – 返回一个新的Iterator对象,包含了Map对象中每个元素的值 。
2、迭代Map

Map对象中的元素是按顺序插入的,我们可以迭代Map对象,每一次迭代返回[key,value]。

let nameSiteMapping = new Map();
nameSiteMapping.set("Google",1);
nameSiteMapping.set("sf",2);
nameSiteMapping.set("tx",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);
}

//输出结果为:
Google
Runoob
Taobao
1
2
3
Google 1
Runoob 2
Taobao 3
Google 1
Runoob 2

十、元组

1、解构元组

我们可以把元组元素赋值给变量

var  a = [10,"Runnoob"];
var [b,c] = a;
console.log(b);
console.log(c);
//输出结果
10
Runoob

十一、联合类型

联合类型(Union Types)可以通过管道(|)将变量设置多种类型,赋值时可以根据设置的类型来赋值。
注意:只能赋值指定的类型,如果赋值其它类型就会报错。

Type|Type1|Type2

//实例
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");
disp(["Runoob","Google","Taobao"]);
1、联合类型数组
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]);
}

十二、TypeScript接口

接口时一系列抽象方法的声明,是一些方法特征的集合,这些方法都应该是抽象的,需要由具体的类去实现,抽象方法调用,让具体的类执行具体的方法

interface interface_name{
}

实例

//接口IPerson
interface IPerson{
	firstName : string,
	lastName : string,
	sayHi:()=> string
}
//实现接口
var customer:IPerson = {
		firstName : "Tom",
		lastName : "Hanks",
		sayHi:():string =>{return "Hi there"}
}
//调用具体对象的方法
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)

接口不能转成JavaScript,它只是TypeScript的一部分

1、联合类型和接口
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());
2、接口和数组

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

interface namelist{
	[index:number] : string
}
var list2:namelist = ["John", 1 , "Bran"] //错误元素1 不是string类型
interface ages{
	[index : string] : number
}
var agelist : ages;
agelist["John"] = 15 // 正确
agelist[2] = "nine" //错误, index为string类型
3、接口继承

接口继承就是说接口可以通过其他接口来扩展自己
TypeScript 允许接口继承多个接口
继承使用关键字extends
单接口继承语法格式:

Child_interface_name extends super_interface_name

多接口继承语法格式:

Child_interface_name extends super_interface1_name,super_interface2_name,...
4、多继承
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);

十三、TypeScript类

TypeScript是面向对象的JavaScript.
类描述了所创建的对象共同的属性和方法
TypeScript 支持面向对象的所有特性,比如类、接口等
定义类的关键字为class,后面紧跟类名,类可以包含以下几个模块(类的数据成员):

  • ** 字段** -字段是类里面声明的变量。字段表示对象的有关数据
  • ** 构造函数** -类实例化时调用,可以为类的对象分配内存
  • 方法 -方法为对象要执行的操作

实例

class Person{}
1、创建类的数据成员

this关键字表示当前类实例化的对象。注意构造函数的参数名与字段名相同,this.engine表示类的字段

class Car{
	//字段
	engine : string;
	//构造函数
	constructor(engine:string){
		   this.engine = engine;
	}
	//方法
	disp():void{
			console.log("发动机为:"+this.engine)
	}
}
2、实例化对象
class Car{
	//字段
	engine : string;
	costructor(engine : string){
			this.engine = engine;
	}
	disp():void{
		 	console.log(""+this.engine);
	}
}
//创建一个对象
var obj = new Car("XXSY1");
//访问字段
console.log(obj.engine+"");
obj.disp();
3、类的继承

同java

4、继承类的方法重写

同java

5、static关键字

同java

6、instanceof 运算符

同java
var isPersion = obj instanceof Persion

7、访问控制修饰符
  • public (默认):公有,可以在任何地方被访问
  • protected : 受保护,可以被其自身以及其子类和父类访问
  • privater :私有,只能被其定义所在的类访问
8、类和接口

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

interface ILoan{
	interest : number
}
class AgriLoan implements ILoan{
	interest : number
	rebate : number
	constructor(interest:number,rebate:number){
		   this.interest = interset;
		   this.rebate = rebate;
	}
}

var obj = new AgriLoan(10,1);
console.log("利润为:" + obj.interest + ",抽成:"+ obj.rebate);
9、TypeScript对象

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

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

以上对象包含了标量,函数,集合(数组或元组)

10、对象实例
var sites = {
	 site1 : "Runoob",
	 site2 : "Google"
};
//访问对象的值
console.log(sites.site1);
console.log(sites.site2);
11、TypeScript类型模板

Typescript中的对象必须是特定类型的实例

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);

12、Duck Typing

动态类型的一种风格,是多态的一种形式
在这种风格中,一个对象有效的语义,不是由继承自特定的类或实现特定的接口,而是由"当前方法和属性的集合"决定。
在鸭子类型中,关注点在于对象的行为,能作什么;而不是关注对象所属的类型。例如,在不使用鸭子类型的语言中,我们可以编写一个函数,它接受一个类型为"鸭子"的对象,并调用它的"走"和"叫"方法。在使用鸭子类型的语言中,这样的一个函数可以接受一个任意类型的对象,并调用它的"走"和"叫"方法。如果这些需要被调用的方法不存在,那么将引发一个运行时错误。任何拥有这样的正确的"走"和"叫"方法的对象都可被函数接受的这种行为引出了以上表述,这种决定类型的方式因此得名。

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})

十四、TypeScript命名空间

区分范围
TypeScript中命名空间使用namespace来定义,语法格式如下:

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

以上定义了一个命名空间 SomeNameSpaceName,如果我们需要在外部可以调用 SomeNameSpaceName 中的类和接口,则需要在类和接口添加 export 关键字。

要在另外一个命名空间调用语法格式为:

SomeNameSpaceName.SomeClassName;
如果一个命名空间在一个单独的 TypeScript 文件中,则应使用三斜杠 /// 引用它,语法格式如下:

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

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());

输出

$ node app.js
Circle is drawn
Triangle is drawn
1、嵌套命名空间

命名空间支持嵌套,即你可以将命名空间定义在另外一个命名空间里头。

namespace namespace_name1 { 
    export namespace namespace_name2 {
        export class class_name {    } 
    } 
}

成员的访问使用点号 . 来实现,如下实例:
Invoice.ts 文件代码:

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

InvoiceTest.ts 文件代码:

/// <reference path = "Invoice.ts" />
var invoice = new Runoob.invoiceApp.Invoice(); 
console.log(invoice.calculateDiscount(500));
2、TypeScript模块
3、TypeScript声明文件

TypeScript 作为 JavaScript 的超集,在开发过程中不可避免要引用其他第三方的 JavaScript 的库。虽然通过直接引用可以调用库的类和方法,但是却无法使用TypeScript 诸如类型检查等特性功能。为了解决这个问题,需要将这些库里的函数和方法体去掉后只保留导出类型声明,而产生了一个描述 JavaScript 库和模块信息的声明文件。通过引用这个声明文件,就可以借用 TypeScript 的各种特性来使用库文件了。

假如我们想使用第三方库,比如 jQuery,我们通常这样获取一个 id 是 foo 的元素:

$('#foo');
// 或
jQuery('#foo');

但是在 TypeScript 中,我们并不知道 $ 或 jQuery 是什么东西:

jQuery('#foo');

// index.ts(1,1): error TS2304: Cannot find name ‘jQuery’.
这时,我们需要使用 declare 关键字来定义它的类型,帮助 TypeScript 判断我们传入的参数类型对不对:

declare var jQuery: (selector: string) => any;

jQuery('#foo');

declare 定义的类型只会用于编译时的检查,编译结果中会被删除。

上例的编译结果是:

jQuery('#foo');

声明文件
声明文件以 .d.ts 为后缀,例如:

runoob.d.ts

声明文件或模块的语法格式如下:

declare module Module_Name {
}

TypeScript 引入声明文件语法格式:

/// <reference path = " runoob.d.ts" />

当然,很多流行的第三方库的声明文件不需要我们定义了,比如 jQuery 已经有人帮我们定义好了

实例
以下定义一个第三方库来演示:

CalcThirdPartyJsLib.js 文件代码:

var Runoob;  
(function(Runoob) {
    var Calc = (function () { 
        function Calc() { 
        } 
    })
    Calc.prototype.doSum = function (limit) {
        var sum = 0; 
 
        for (var i = 0; i <= limit; i++) { 
            sum = sum + i; 
        }
        return sum; 
    }
    Runoob.Calc = Calc; 
    return Calc; 
})(Runoob || (Runoob = {})); 
var test = new Runoob.Calc();

如果我们想在 TypeScript 中引用上面的代码,则需要设置声明文件 Calc.d.ts,代码如下:

Calc.d.ts 文件代码:

declare module Runoob { 
   export class Calc { 
      doSum(limit:number) : number; 
   }
}

声明文件不包含实现,它只是类型声明,把声明文件加入到 TypeScript 中:

CalcTest.ts 文件代码:

/// <reference path = "Calc.d.ts" /> 
var obj = new Runoob.Calc(); 
// obj.doSum("Hello"); // 编译错误
console.log(obj.doSum(10));

基础完结

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值