学习网站:W3C TypeScript教程

文章目录

  • //1-1 基本语法
  • //1-2 面向对象
  • //3-1 变量
  • //3-2 TS中的变量
  • //3-3 类型断言:
  • //3-4 类型推论:
  • //3-5 变量的作用域
  • //4-1 算术运算符
  • //4-2 关系运算符
  • //4-3 逻辑运算符
  • //4-4 位运算符
  • //4-5 赋值运算符
  • //4-6 否定运算符
  • //4-7 字符串运算符:连接运算符(+)
  • //4-8 条件运算符/三元运算符(?)
  • //4-9 类型运算符(typeof)
  • //5-1 返回函数
  • //5-2 可选参数
  • //5-3 rest参数
  • //5-4 默认参数
  • //5-5 匿名函数
  • //5-6 Function构造函数
  • //5-7 递归和TypeScript函数
  • //5-8 Lambda函数(箭头函数)
  • //5-9 函数重载:
  • //6-1 数字(Number对象)
  • //7-1 环境声明
  • //8-1 字符串Constructor属性
  • //9-2 数组
  • //9-3 Array对象
  • //9-4 数组解构
  • //9-5 关于遍历
  • //10-1 元组:基于索引,存储各种类型的值的集合
  • //10-2 元组的操作
  • //10-3 解构元组
  • //11-1 联合
  • //11-2 联合类型和功能参数
  • //11-3 联合类型和数组
  • //12-1 对象
  • //12-2 对象作为参数传递给函数
  • //12-3 可以动态创建并传递一个匿名对象
  • //12-4 鸭子类型
  • //13-1 类的声明
  • //13-2 创建类的实例
  • //13-3 访问属性和函数
  • //13-4 类的继承
  • //13-5 多级继承
  • //13-6 类的继承和方法重写
  • //13-7 static关键字
  • //13-8 instanceof运算符
  • //13-9 数据隐藏/封装
  • //13-10 类和接口
  • //14-1 声明接口
  • //14-2 联合类型和接口
  • //14-3 接口和数组
  • //14-4 接口和继承
  • //15-1 定义命名空间
  • //15-2 嵌套命名空间

//1-1 基本语法

var message: string = "Hello World"//声明名称为message,类型为string,值为“Hello World”的变量
console.log(message)//将变量的值打印到提示符,控制台指终端窗口,函数log()用来在显示文本

//1-2 面向对象

class Greeting { //定义了一个类Greetinggreet(): void { //该类有一个方法,该方法在终端上打印字符串console.log("Hello World!!!")}
}
var obj = new Greeting();//new关键字创建类(obj)的对象
obj.greet();//该对象调用方法greeting()

//3-1 变量

var name1: string = "mary"  //该变量为string类型,值为"mary"
var name2: string   //该变量是一个string变量,默认情况下,变量的值设置为undefined
var name3 = "mary"  //变量的类型是从值的数据类型推断出来的的,这里,变量是string类型
var name4   //变量的数据类型是any,默认情况下,它的值设置为undefined

//3-2 TS中的变量

var name0: string = "John"
var score1: number = 50
var score2: number = 42.50
var sum = score1 + score2
console.log("name:"+name0)
console.log("first score: "+score1)
console.log("second score: "+score2)
console.log("sum of the scores: " + sum)

//3-3 类型断言:

//将变量从一种类型更改为另一种类型
//语法:将目标类型放在<>符号之间,并将其放在变量或表达式前面

var str = '1'
console.log("typeof(str):"+typeof(str))
var str2: number = <number><any>str
//这里需要经过<any>类型
//原因:类型断言成功要求为转换的类型为父子类型,any为所有类型的超类型,使用any类型相当于选择退出变量的类型检查
console.log(str2)

//3-4 类型推论:

//对于声明没有类型的变量,编辑器会根据分配给它的值确定变量的类型(上下文推断?)
//在代码中找到变量的第一个用法,以确定它最初设置的类型,然后在代码块的其余部分中为该变量假定相同的类型

var num = 2;
console.log("typeof(num):" + typeof (num))
//num = "12"    //会报错,声明"12"是不是number类型

//3-5 变量的作用域

var global_num = 12 //全局变量
class Numbers {     //类作用域num_val = 13;static sval = 10;   //静态字段storeNum(): void { var local_num = 14;}
}
console.log("Global num:" + global_num)
console.log(Numbers.sval)//静态字段,可以直接通过类名访问
var obj2 = new Numbers();
console.log("Global num:" + obj2.num_val)//通过类的对象进行访问

//4-1 算术运算符

var num1: number = 10
var num2: number = 2
var res: number = 0
//+(加法):返回操作数的总和
res = num1 + num2
console.log("Sum:" + res)
//-(减法):返回值的差
res = num1 - num2
console.log("Difference:" + res)
//*(乘法):返回值的乘积
res = num1 * num2
console.log("Product:" + res)
///(除法):执行除法运算并返回商
res = num1 / num2
console.log("Quotient:" + res)
//%(取余):执行除法并返回余数
res = num1 % num2
console.log("Remainder:" + res)
//++(递增):将变量的值增加1
num1++
console.log("Value of num1 after increment :" + num1)
//--(递减):将变量的值减少1
num2--
console.log("Value of num2 after decrement :"+num2)

//4-2 关系运算符

//关系运算符测试或定义两个实体之间的关系类型,关系运算符返回一个Boolean值,即true/falsefalse

console.log("Value of num1:" + num1)
console.log("Value of num2:" + num2)
//>(大于):(A>B)是False
var res2 = num1 > num2
console.log("num1 greater than num2:" + res2)
//>(小于):(A<B)是True
var res2 = num1 < num2
console.log("num1 greater than num2:" + res2)
//>(大于或等于):(A>=B)是False
var res2 = num1 >= num2
console.log("num1 greater than num2:" + res2)
//>(小于或等于):(A<=B)是False
var res2 = num1 <= num2
console.log("num1 greater than num2:" + res2)
//>(等于):(A==B)是False
var res2 = num1 == num2
console.log("num1 greater than num2:" + res2)
//>(不等于):(A!=B)是False
var res2 = num1 != num2
console.log("num1 greater than num2:" + res2)

//4-3 逻辑运算符

//逻辑运算符用于组合两个或多个条件,逻辑运算符也返回一个Boolean的值

var avg: number = 20
var percentage: number = 90
console.log("Value of avg:" + avg + ",value of percentage:" + percentage)
//&&(与):仅当指定的所有表达式都返回true时,运算符才返回true
var res3: boolean = ((avg > 50) && (percentage > 80))
console.log("(avg > 50) && (percentage > 80):" + res3)
//||(或):如果指定的表达式至少有一个返回truetrue,则运算符返回true
var res3: boolean = ((avg > 50) || (percentage > 80))
console.log("(avg > 50) || (percentage > 80):" + res3)
//!(非):运算符返回相反的表达式结果
var res3: boolean = !((avg > 50) && (percentage > 80))
console.log("!((avg > 50) && (percentage > 80)):"+res3)

//4-4 位运算符

var a: number = 2
var b: number = 3
var result
//&(按位与):对其整数参数的每一位执行Boolean“与”运算
result=(a & b)
console.log("(a&b)=>", result)
//|(按位或):对其整数参数的每一位执行Boolean“或”运算
result=(a | b)
console.log("(a|b)=>", result)
//^(按位异或):对其整数参数的每一位执行Boolean“异或”运算。
//异或意味着操作数1为true或操作数2为truetrue,两者不能同时为true
result=(a ^ b)
console.log("(a^b)=>", result)
//~(按位取反):这是一个一元运算符,并通过取反操作数中的所有位进行操作
result=(~ b)
console.log("(~b)=>", result)
//<<(左移):在通过第二个操作数指定的位数将第一个操作数中的所有位想左移动。新位用零填充。
//将一个值左移一个位置相当于将其乘于2,移位两个位置相当于乘于4,以此类推
result=(a << b)
console.log("(a<<b)=>", result)
//>>(右移):二进制右移运算符,左操作数的值是有右操作数指定的位数来向右移动
result=(a >> b)
console.log("(a>>b)=>", result)

//4-5 赋值运算符

//4-6 否定运算符

var x:number = 4
var y = -x;
console.log("value of x: ",x);   //outputs 4
console.log("value of y: ",y);   //outputs -4

//4-7 字符串运算符:连接运算符(+)

var msg:string = "hello"+"world"
console.log(msg)

//4-8 条件运算符/三元运算符(?)

//语法:Test ? expr1 : expr2
/*Test - 指的是条件表达式
expr1 - 如果条件为true,则返回值
expr2 - 如果条件为false,则返回值 */
var num:number = -2
var result0 = num > 0 ?"positive":"non-positive"
console.log(result0)

//4-9 类型运算符(typeof)

var num = 12
console.log(typeof num);   //output: number

//5-1 返回函数

//声明了函数greetgreet(),该函数的返回类型为string
function greet():string { //the function returns a string return "Hello World" //通过return实现,行函数返回一个string值给调用者
} function caller() { //函数greetgreet()返回一个string值,该string存储在变量msg中,稍后显示为输出var msg = greet() //function greet() invoked console.log(msg)
} //invoke function
caller()

//5-2 可选参数

//可选参数:通过在其名称后附加问好,可以将参数标记为可选
//可选参数应设置为函数的最后一个参数

function disp_details(id:number,name:string,mail_id?:string) { console.log("ID:", id); console.log("Name",name); if(mail_id!=undefined)  console.log("Email Id",mail_id);
}
disp_details(123,"John");
disp_details(111, "mary", "mary@xyz.com");
//声明了一个参数化函数,这里的第三个参数mail_id是可选参数
//如果在函数调用期间未向可选参数传递值,则将参数的值设置为undefined
//仅当参数传递值时,该函数才会打印mail_id的值

//5-3 rest参数

//rest参数不限制可以传递给函数的值的数目,但是,传递的值都必须是相同的类型
//可以说,rest参数充当相同类型的多个参数的占位符
//声明rest参数,参数名称前缀为…任何nonrest参数都应该在rest参数之前

function addNumbers(...nums:number[]) {  var i;   var sum:number = 0; for(i = 0;i<nums.length;i++) { sum = sum + nums[i]; } console.log("sum of the numbers",sum)
}
addNumbers(1,2,3)
addNumbers(10, 10, 10, 10, 10)
//addaddNumbers()声明,接受一个rest参数numsnums。必须将rest参数的数据类型设置为数组
//一个函数最多只能有一个rest参数
//通过分别传递三个和六个值来调用该函数两次
//for循环遍历参数列表,传递给函数并计算他们的总和

//5-4 默认参数

//可以为函数参数指定值,这些参数也可以显式传递值
//△参数不能同时声明为可选和默认值

function calculate_discount(price:number,rate:number = 0.50) { var discount = price * rate; console.log("Discount Amount: ",discount);
}
calculate_discount(1000)
calculate_discount(1000, 0.30)
//声明了函数calculate_discount,该函数有两个参数:price和raterate
//参数rate的值默认设置为0.50
//该程序调用函数,只传递参数price的值,这里,rate的值时0.50(默认)
//调用相同的函数,但有两个参数。将覆盖rate的默认值,并将其设置为显示传递的值

//5-5 匿名函数

//未绑定到标识符(函数名)的函数称为匿名函数
//匿名函数在初始创建后通常无法访问
//可以为变量分配匿名函数,称这种表达式为函数表达式
//语法:var res = function( [arguments] ) { ... }

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

//函数表达式与函数声明
//函数表达式绑定变量,函数声明由函数名绑定
//根本区别在于函数声明在执行之前被解析;仅在脚本引擎执行期间遇到函数表达式时才能解析函数表达式
//当JS解析器在主流代码中看到一个函数时,会假定函数声明。当函数作为语句的一部分出现时,它是一个函数表达式

//5-6 Function构造函数

//语法:var res = new Function( [arguments] ) { ... }.

var myFunction = new Function("a", "b", "return a*b")
var x2 = myFunction(4, 3)
console.log(x2)
//新的Function()是对构造函数的调用,而构造函数又创建并返回函数引用

//5-7 递归和TypeScript函数

//当需要使用循环内不同参数重复调用相同函数时,应用递归

//函数:累积
function factorial(number) { if (number <= 0) {return 1;} else { return (number*factorial(number-1))}
}
//console.log(factorial(6))

//5-8 Lambda函数(箭头函数)

//语法:( [param1, parma2,…param n] )=>statement;
//·参数:一个函数可以选择性带有参数
//·箭头符号/Lambda符号(=>)也被称为转到运算符
//·声明:表示函数的指令集
//鼓励用单字母参数进行紧凑而精确的函数声明

var foo = (x1: number) => 10 + x1
console.log(foo(100))
//output 110//Lambda语句:
/*
([param1,param2,...param n])=>{//code block
}
*/
var foo1 = (x3: number) => { x3 = 10 + x3console.log(x3)
}
foo1(100)
//output 110
//返回函数的引用并将其存储在变量foo1中

//单个参数的可选圆括号
//单个的语句的可选大括号,无参数的空括号

//5-9 函数重载:

//相同名称但函数签名(参数的数据类型、参数的数量、参数的序列)不同的多个函数

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

//6-1 数字(Number对象)

//prototype属性将新属性和方法分配给当前文档中的Number对象

function employee(id: number, name: string) { this.id = idthis.name=name
}
//调用构造函数
var emp = new employee(123, "Smith")
var emp2=new employee(234,"S")
employee.prototype.email="Smith@abc.com"
//构造函数的.prototype属性可以访问原型console.log(emp)
console.log(emp2)

//7-1 环境声明

/*
1,定义环境:
环境声明保存在类型声明文件中,扩展名为(d.ts)
该文件不会被转为js,用于类型安全和只能感知
语法:

declare moudle Moudle_Name{}

在客户端TS文件中引用环境文件:

<reference path="Sample.d.ts">

例子:
获得了第三方javascript库,其中包含类似于以下的代码。

FileName: CalcThirdPartyJsLib.js
var TutorialPoint;
(function (TutorialPoint) {  var Calc = (function () { function Calc() { } Calc.prototype.doSum = function (limit) {var sum = 0; for (var i = 0; i <= limit; i++) { Calc.prototype.doSum = function (limit) {var sum = 0; for (var i = 0; i <= limit; i++) { sum = sum + i; return sum; return Calc; TutorialPoint.Calc = Calc; })(TutorialPoint || (TutorialPoint = {})); var test = new TutorialPoint.Calc();}}}}
}

作为TypeScript程序员,你没有时间将此库重写为TypeScript。但你仍然需要使用类型安全的doSum()方法。你可以做的是环境声明文件。让我们创建一个环境声明的文件Calc.d.ts:

FileName: Calc.d.ts
declare module TutorialPoint { export class Calc { doSum(limit:number) : number; }
}

环境文件将不包含实现,它只是类型声明。声明现在需要包含在TypeScript文件中,如下所示:

FileName : CalcTest.ts
/// <reference path = "Calc.d.ts" />
var obj = new TutorialPoint.Calc();
obj.doSum("Hello"); // compiler error
console.log(obj.doSum(10));

以下代码行将显示编译器错误。这是因为,在声明文件中,我们指定的输入参数将是数字。

obj.doSum("Hello");

注释上面的行并使用以下语法编译程序:

tsc CalcTest.ts

//8-1 字符串Constructor属性

var str = new String( "This is string" );
console.log("str.constructor is:" + str.constructor)
//str.constructor is:function String() { [native code] }

//9-2 数组

//数组的特点:
/*
1,数组声明分配顺序内存块
2,数组是静态的(数组一旦被初始化就不能改变大小)
3,每个存储块表示一个数组元素
4,数组元素是由称为元素的下标/索引的唯一整数标识
5,像变量一样,数组在使用前声明
6,数组初始化是指填充数组元素
7,数组元素的值可以被更新或修改,但不能被删除
语法:var array_name[:data type] = [val1,val2…valn]

*/
var alphas:string[];
alphas = ["1","2","3","4"]
console.log(alphas[0]);
console.log(alphas[1]);

//9-3 Array对象

//可以使用Array对象创建数组,可以传递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 names:string[] = new Array("Mary","Tom","Jack","Jill") for(var i = 0; i < names.length; i++) { console.log(names[i])
}

//9-4 数组解构

var arr:number[] = [12,13]
var[x,y] = arr
console.log(x) //12
console.log(y) //13

//9-5 关于遍历

//for…in循环遍历数组,通过键值(key)迭代对象的键的列表
//for…of的迭代对象的键对应的值

//10-1 元组:基于索引,存储各种类型的值的集合

//语法:var tuple_name = [value1,value2,value3,…value n]

var tup = []
tup[0] = 12
tup[1] = "23" console.log(tup[0])
console.log(tup[1])

//10-2 元组的操作

var mytuple = [10, "Hello", "World", "typeScript"]
console.log("Items before push :" + mytuple)
//添加新项目
mytuple.push(12)
console.log("Mytuple:" + mytuple)
//删除项目并返回元组中最后一个值
console.log("Item pop from the tuple:" + mytuple.pop())
console.log("Mytuple:" + mytuple)
//更新/修改元组元素的值
mytuple[0] = "www"
console.log("Mytuple:" + mytuple)

//10-3 解构元组

//解构是指打破实体的结构

//mytuple在上边
var [a, b, c, d] = mytuple
console.log(a)
console.log(b)
console.log(c)
console.log(d)

//11-1 联合

//语法:Type1|Type2|Type3
//union(联合)类型是一种强大的方法,用于表示可以是几种类型之一的值。
//使用管道符号(|)组合两个或多个数据类型以表示联合类型。
//换句话说,一个联合类型被写成由竖线分隔类型的序列。

var myunion: string | number
myunion = 21
console.log("typeof myunion:" + typeof (myunion))
myunion = "I am string"
console.log("typeof myunion:"+typeof(myunion))

//11-2 联合类型和功能参数

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("mark")
console.log("Printing names array....")
disp(["Mark","Tom","Mary","John"])

//11-3 联合类型和数组

//程序中声明数组。该数组可以表示数字集合或字符串集合。

var arr2:number[]|string[];
var i:number;
arr2 = [1,2,4]
console.log("**numeric array**")  for(i = 0;i<arr2.length;i++) { console.log(arr2[i])
}  arr2 = ["Mumbai","Pune","Delhi"]
console.log("**string array**")  for(i = 0;i<arr2.length;i++) { console.log(arr2[i])
}

//12-1 对象

//一个对象是包含一组键值对集合的实例。值可以是标量值或函数,甚至是其他对象的数组
/*
语法:

var object_name = { key1: “value1”, //scalar value key2: “value”,  key3: function() {//functions }, key4:[“content1”, “content2”] //collection
};

*/

//修改对象文本,在TS中需要通过在声明中使用方法模板
//应该是只许在外部修改不许添加删除的意思?

var person = {firstName:"Tom", lastName:"Hanks", sayHello:function() {  }  //Type template
}
person.sayHello = function() {  console.log("hello "+person.firstName)
}
person.sayHello()

//12-2 对象作为参数传递给函数

var person2 = { firstname:"Tom", lastname:"Hanks"
};
var invokeperson = function(obj: { firstname:string, lastname :string }) { console.log("first name :"+obj.firstname) console.log("last name :"+obj.lastname)
}
invokeperson(person2)

//12-3 可以动态创建并传递一个匿名对象

var invokeperson = function(obj:{ firstname:string, lastname :string}) { console.log("first name :"+obj.firstname) console.log("last name :"+obj.lastname)
}
invokeperson({firstname:"Sachin",lastname:"Tendulkar"});

//12-4 鸭子类型

/*
在鸭子类型(duck-typing)中,如果两个对象共享同一组属性,则认为它们属于同一类型。鸭子类型验证对象中某些属性的存在,而不是它们的实际类型,以检查它们的适用性。这个概念一般是可以由以下短语解释:
“当我看到一只像鸭子一样散步,像鸭子一样游动,像鸭子一样呱呱叫的鸟儿时,我称这只鸟为鸭子。”
TypeScript编译器实现鸭子类型系统,允许动态创建对象,同时保持类型安全。
*/

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}
}
//Valid
var newPoint = addPoints({x:3,y:4},{x:5,y:1})

//13-1 类的声明

//类封装了对象的数据
/*语法:

class class_name { //class scope
}

class关键字后跟类名。在命名类时必须考虑标识符的规则。
一个类定义可以包括以下内容:
字段 - 字段是在类中声明的任何变量。字段表示与对象有关的数据
构造函数 - 负责为类的对象分配内存
函数 - 函数表示对象可以采取的操作。它们有时也被称为方法。
这些组件放在一起称为该类的数据成员
*/

class Car { //field engine:string; //constructor constructor(engine:string) { this.engine = engine }  //function disp():void { console.log("Engine is  :   "+this.engine) }
}

//13-2 创建类的实例

//要创建类的实例,请使用new关键字后跟类名
//语法:var object_name = new class_name([ arguments ])

var obj = new Car("Engine 1")

//13-3 访问属性和函数

//可以通过对象访问类的属性和函数。使用“.”点表示法(称为句点)访问类的数据成员

console.log("Reading attribute value Engine as :  "+obj.engine)
obj.disp()

//13-4 类的继承

/*
继承是一种程序从现有的类中创建新类的能力。扩展为创建较新类的类称为父类/超类。新创建的类被称为子类。
一个类使用“extends”关键字从另一个类继承。子类继承父类的私有成员和构造函数之外的所有属性和方法。
TS不支持多继承
*/

class Shape { Area: numberconstructor(a: number) { this.Area=a}
}class Circle extends Shape { disp(): void { console.log("Area of the circle: "+this.Area)}
}var obj = new Circle(223)
obj.disp()

//关于类继承的构造函数
/*
若派生类包含了一个构造函数,必须调用super(),会执行基类的构造函数
在构造函数里访问this的熟悉之前,一定要调用super()
super(参数):调用父类具有想要形参的构造方法
*/

class Circle2 extends Shape { constructor(Area: number) { super(Area)}disp(): void { console.log("Area of the circle: "+this.Area)}
}
var obj = new Circle(223)
obj.disp()
//这两个运行结果一样

//13-5 多级继承

class Root { str:string;
} class Child extends Root {}
class Leaf extends Child {} //indirectly inherits from Root by virtue of inheritance  var obj2 = new Leaf();
obj2.str ="hello"
console.log(obj2.str)

//13-6 类的继承和方法重写

//方法重写:子类重新定义父类方法的机制

class PrinterClass { doPrint():void {console.log("doPrint() from Parent called…") }
} class StringPrinter extends PrinterClass { doPrint():void { super.doPrint() //super相当于指向自己父类对象,使用super.xxx来引用父类的成员console.log("doPrint() is printing a string…")}
} var obj3 = new StringPrinter()
obj3.doPrint()

//13-7 static关键字

//static关键字可以用于类的数据成员。静态变量保留其值,直到程序完成执行。静态成员由类名引用

class StaticMem { static num: number;static disp(): void { console.log("The value of num is "+StaticMem.num)}
}StaticMem.num = 12
StaticMem.disp()

//13-8 instanceof运算符

//如果对象属于指定类型,则instanceof运算符则返回true

class Person{ }
var obj4 = new Person()
var isPerson = obj4 instanceof Person;
console.log(" obj is an instance of Person " + isPerson);

//13-9 数据隐藏/封装

//类可以控制其数据成员的其他类成员的可见性
/*
面向对象使用访问修饰符或访问说明符的概念来实现封装的概念。访问说明符/修饰符定义类的数据成员在其定义类之外的可见性。
通过TypeScript支持的访问修饰符是 -
public
公共的数据成员具有普遍的可访问性。默认情况下,类中的数据成员是公共的。
private
私有数据成员只能在定义这些成员的类中访问。如果外部类成员尝试访问私有成员,则编译器会引发错误。
protected
受保护的数据成员可以由与前者相同的类中的成员访问,也可以由子类的成员访问。
*/

class Encapsulate { str:string = "hello" private str2:string = "world"
}var obj5 = new Encapsulate() //实例化类
console.log(obj5.str)     //accessible
//console.log(obj5.str2)   //在类之外访问私有属性,报错

//13-10 类和接口

//类可以实现接口,类实现接口时要实现接口中的所有方法

interface ILoan { interest:number
}
class AgriLoan implements ILoan { interest: numberrebate: numberconstructor(interest:number,rebate:number) { this.interest = interestthis.rebate=rebate}
}
var obj6 = new AgriLoan(10, 1)
console.log("Interest is:" + obj6.interest + "Rebate is:" + obj6.rebate)

//14-1 声明接口

//接口仅包含成员的声明,定义成员是派生类的责任
//一般要在对象之间重用签名的时候定义接口
//(接口不能转换为js)
//语法:
/*

interface interface_name {
}

*/
//声明一个接口

interface IPerson { firstName: stringlastName: stringsayHi:()=>string
}
//对象类型为IPerson,绑定到该对象上,以定义接口所有属性
var customer: IPerson = {firstName: "Tom",lastName: "Hanks",sayHi: (): string => { return "Hi there"}
}
//查看对象属性
console.log("Customer Object ");
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  Object ");
console.log(employee.firstName);
console.log(employee.lastName);

//14-2 联合类型和接口

//声明接口
interface RunOptions { program:string; commandline:string[]|string|(()=>string);
} //commandline as string
var options:RunOptions = {program:"test1",commandline:"Hello"};
console.log(options.commandline)  //Hello//commandline as a string array
options = {program:"test1",commandline:["Hello","World"]};
console.log(options.commandline[0]);  //Hello
console.log(options.commandline[1]);  //World//commandline as a function expression
options = {program:"test1",commandline:()=>{return "**Hello World**";}}; var fn:any = options.commandline;
console.log(fn());//**Hello World**

//14-3 接口和数组

//接口可以定义数组使用的密钥类型以及它包含的条目类型
//索引可以是string类型或number类型

interface namelist { [index:number]:string
}
//var list2: namelist = ["John", 1, "Bran"] //Error. 1 is not type string
interface ages { [index:string]:number
}
var agelist: ages
agelist["aaa"] = 15
console.log(agelist["aaa"])
//name2[2] = "nine"   // Error

//14-4 接口和继承

//接口可以继承接口,TS允许接口从多个接口继承,使用extends关键字来实现接口之间的继承
//(重复一下:不允许类的多继承)
//语法:
/*
单接口继承:Child_interface_name extends super_interface_name
多接口继承:

Child_interface_name extends super_interface1_name,
super_interface2_name,…,super_interfaceN_name

*/
//简单的接口继承

interface Person10 { age:number
}
interface Musician extends Person10 { instrument:string
} var drummer = <Musician>{};
drummer.age = 27
drummer.instrument = "Drums"
console.log("Age:  " + drummer.age)
console.log("Instrument:  " + 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: " + this.v1 + " value 2: " + this.v2)
//value 1: 12   value 2: 23
//对象Iobj的类型为接口leaf。基于继承的接口leaf现在分别有两个属性v和v2。因此,对象Iobj现在必须包含这些属性。

//15-1 定义命名空间

//语法:命名空间的定义以关键字namespace开头,后跟命名空间名称

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

//应在命名空间外部访问的类或接口应使用关键字export标记。
//要访问另一个名称空间中的类或接口,语法将为namespaceName.className

SomeNameSpaceName.SomeClassName;

//如果第一个命名空间位于单独的TypeScript文件中,那么就应该使用三斜杠引用语法引用它。

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

演示使用命名空间:

FileName :IShape.ts
----------
namespace Drawing { export interface IShape { draw(); }
}  FileName :Circle.ts
----------
/// <reference path = "IShape.ts" />
namespace Drawing { export class Circle implements IShape { public draw() { console.log("Circle is drawn"); }  FileName :Triangle.ts ---------- /// <reference path = "IShape.ts" /> namespace Drawing { export class Triangle implements IShape { public draw() { console.log("Triangle is drawn"); } } FileName : 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 --out app.js TestShape.ts  node app.js

当上述代码被编译和执行时,它产生了以下结果:

Circle is drawn
Triangle is drawn

//15-2 嵌套命名空间

您可以在另一个命名空间中定义一个命名空间:

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

您可以用点(.)运算符访问嵌套命名空间的成员,如下所示:

FileName : Invoice.ts
namespace tutorialPoint { export namespace invoiceApp { export class Invoice { public calculateDiscount(price: number) { return price * .40; } } }
}
FileName: InvoiceTest.ts /// <reference path = "Invoice.ts" />
var invoice = new tutorialPoint.invoiceApp.Invoice();
console.log(invoice.calculateDiscount(500));

上面的代码可以被编译并使用下面的命令执行:

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

当上述代码被编译和执行时,它产生了以下结果:

200

TypeScript基本语法(W3C)相关推荐

  1. 【实习日记】第五天 剖析源码+学习Node.js Typescript基本语法

    国庆假期结束了,其实在这里实习对我而言还算是比较愉快的,虽然完成任务过程中出现的问题层出不穷,但也被克服问题的成就感包裹着,感觉每天在办公室就像在上自习一样.加油啦小荷! 自从把example运行成功 ...

  2. 浅析TypeScript setTimeout语法

    偶遇TypeScript setTimeout语法问题,百度没有结果.所以自己研究了一下 正常是这样的结构 setTimeout(function(){ ... },interval) 第一个参数是回 ...

  3. 【TypeScript】(一)快速上手TypeScript类型语法

    文章目录 1.概述 2.TS中的类型 2.1.类型推断 2.2.类型定义 2.3.复杂类型 2.3.1.联合 2.3.2.泛型 2.4.type关键字 3. 总结 1.概述 TypeScript(TS ...

  4. TypeScript基础语法

    文章目录 基础类型及声明方式 ts中特殊符号 ts可以解析es6 接口 类 函数 装饰器 node里面引入ts 常见问题 TypeScript为JavaScript的超集,是一门强类型语言 基础类型及 ...

  5. 如何通过离线安装的方式让sublime text具有TypeScript语法高亮的功能

    我机器上安装的sublime text 2打开后缀为ts的TypeScript文件,默认以纯文本的格式打开,不具备语法高亮: 从这个Github仓库下载TypeScript的语法高亮插件: https ...

  6. 【TypeScript系列教程03】基础语法

    目录 TypeScript 基础语法 空白和换行 TypeScript 区分大小写 分号是可选的 TypeScript 注释 TypeScript 支持两种类型的注释

  7. 带你了解Typescript的14个基础语法

    摘要:Typescript可以说是JavaScript的超集,在JS的基础上新增了许多语法特性,使得类型不再可以随意转换,能大大减少开发阶段的错误. 本文分享自华为云社区<Typescript基 ...

  8. 系统学习 TypeScript(二)——开发流程和语法规则

    前言 我们已经知道了 TypeScript 是什么,以及为什么要用 TypeScript,今天,我们就来学习怎么初步使用它. TypeScript 的使用流程 原始的 TypeScript 文件以 . ...

  9. 用typescript完成倒计时_「干货」将数十万行CoffeeScript代码迁移到TypeScript

    作者 | David Goldstein 译者 | 王强 策划 | 小智 转发链接:https://mp.weixin.qq.com/s/TK7kWXX4hR3e-jtpVMuBnw 序言 2017 ...

  10. 〔译〕TypeScript 2.0 候选版发布

    相关链接 TypeScript 2.0 正式版已经发布了:[译]TypeScript 2.0 正式版发布 不过可能大家更关心的是 [译]TypeScript 2.0 的新特性 原文:Announcin ...

最新文章

  1. [P1434 [SHOI2002]滑雪](DFS,记忆化搜索)
  2. vscode如何找letax模板_一直努力却找不到变美思路?韩国新一代「整容模板」,教你如何提高美商、科学变美!...
  3. Golang modules 初探
  4. Shell命令-文件及内容处理之split、paste
  5. ios android 字体颜色,iOS-修改导航栏文字字体和颜色
  6. 轻知 | 为什么全球只有13组根域名服务器?
  7. Objective-C与Swift混编
  8. 论制造业的报表开发项目需求
  9. Hadamard 分数阶微分/积分定义
  10. 语义分割网络之PSPnet
  11. 安全需求可划分为物理安全、网络安全、系统安全和应用安全,下面的安全需求中属于系统安全的是(67),属于应用安全的是(68)。...
  12. Bad Request This combination of host and port requires TLS
  13. 积水成渊之python——os.path.join()
  14. 【java后端】容器集合
  15. Redis基本事务的操作
  16. 总监的烦恼:技术丢了怎么办?
  17. 基于WSL2+NVIDIA Docker的开发环境最佳实践
  18. linux基础命令大全(一)——文件类型和常用目录
  19. 赌博-值得玩耍的棋牌 3
  20. http之 半包 粘包

热门文章

  1. Apple not immune from viruses(苹果也不能免除病毒的侵害)
  2. 使用主题背景编辑器设计应用主题背景
  3. redis 学习曲线及记录笔记
  4. RPG游戏制作-01-搭建游戏框架,初进游戏世界
  5. CF342E Xenia and Tree
  6. 在线Spirte图定位工具,自动生成CSS
  7. 读书笔记:软件工程(1) - 软件工程概述(1)
  8. 家用无线路由器WDS初始化失败解决方法
  9. MariaDB的官方手册译文
  10. 客户细分——RFM模型