TypeScript基本使用

TypeScript 安装

安装 typescript:

npm install -g typescript

安装完成后我们可以使用 tsc 命令来执行 TypeScript 的相关代码,以下是查看版本号:

$ tsc -v
Version 3.2.2

然后执行以下命令将 TypeScript 转换为 JavaScript 代码:

tsc app.ts

很多 IDE 都有支持 TypeScript 插件,如:Visual Studio,Sublime Text 2,WebStorm / PHPStorm,Eclipse 等。

编译参数

tsc 常用编译参数如下表所示:

参数编译参数说明
–help显示帮助信息
–module载入扩展模块
–target设置 ECMA 版本
–declaration额外生成一个 .d.ts 扩展名的文件。
tsc ts-hw.ts --declaration以上命令会生成 ts-hw.d.ts、ts-hw.js 两个文件。
–removeComments删除文件的注释
–out编译多个文件并合并到一个输出的文件
–sourcemap生成一个 sourcemap (.map) 文件。
sourcemap是一个存储源代码与编译代码对应位置映射的信息文件。
–module noImplicitAny在表达式和声明上有隐含的 any 类型时报错
–watch在监视模式下运行编译器。会监视输出文件,在它们改变时重新编译。

关键字

TypeScript 保留关键字如下表所示:

breakascatchswitchcaseifthrowelsevarnumberstringgetmoduletypeinstanceof
typeofpublicprivateenumexportfinallyforwhilevoidnullsuperthisnewinreturn
truefalseanyextendsstaticletpackageimplementsinterfacefunctiondotryyieldconstcontinue

基础语法

空白和换行

TypeScript 会忽略程序中出现的空格、制表符和换行符。
空格、制表符通常用来缩进代码,使代码易于阅读和理解。

区分大小写

TypeScript 区分大写和小写字符。

分号是可选的

每行指令都是一段语句,你可以使用分号或不使用, 分号在 TypeScript 中是可选的,建议使用。
以下代码都是合法的:

console.log("Runoob")
console.log("Google");

如果语句写在同一行则一定需要使用分号来分隔,否则会报错,如:

console.log("Runoob");console.log("Google");

TypeScript 面向对象编程实例

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

编译后生成的 JavaScript 代码如下:

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

基础类型

TypeScript 包含的数据类型如下表:

数据类型关键字描述
任意类型any声明为 any 的变量可以赋予任意类型的值。
数字类型number双精度 64 位浮点值。它可以用来表示整数和分数。
let binaryLiteral: number = 0b1010; // 二进制
let octalLiteral: number = 0o744; // 八进制
let decLiteral: number = 6; // 十进制
let hexLiteral: number = 0xf00d; // 十六进制
字符串类型string一个字符系列,使用单引号(')或双引号(")来表示字符串类型。反引号(`)来定义多行文本和内嵌表达式。
let name: string = “Runoob”;
let years: number = 5;
let words: string = 您好,今年是 ${ name } 发布 ${ years + 1} 周年;
布尔类型boolean表示逻辑值:true 和 false。
let flag: boolean = true;
数组类型声明变量为数组。
// 在元素类型后面加上[]
let arr: number[] = [1, 2];
// 或者使用数组泛型
let arr: Array = [1, 2];
元组元组类型用来表示已知元素数量和类型的数组,各元素的类型不必相同,对应位置的类型需要相同。
let x: [string, number];
x = [‘Runoob’, 1]; // 运行正常
x = [1, ‘Runoob’]; // 报错
console.log(x[0]); // 输出 Runoob
枚举enum枚举类型用于定义数值集合。
enum Color {Red, Green, Blue};
let c: Color = Color.Blue;
console.log©; // 输出 2
voidvoid用于标识方法返回值的类型,表示该方法没有返回值。
function hello(): void {alert("Hello Runoob");}
nullnull表示对象值缺失。
undefinedundefined用于初始化变量为一个未定义的值
nevernevernever 是其它类型(包括 null 和 undefined)的子类型,代表从不会出现的值。

Any 类型

任意值是 TypeScript 针对编程时类型不明确的变量使用的一种数据类型,它常用于以下三种情况。

  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 和 Undefined 是其他任何类型(包括 void)的子类型,可以赋值给其它类型,如数字类型,此时,赋值后的类型会变成 null 或 undefined。而在TypeScript中启用严格的空校验(–strictNullChecks)特性,就可以使得null 和 undefined 只能被赋值给 void 或本身对应的类型,示例代码如下:

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

上面的例子中变量 x 只能是数字类型。如果一个类型可能出现 null 或 undefined, 可以用 | 来支持多种类型,示例代码如下:

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

never 类型

never 是其它类型(包括 null 和 undefined)的子类型,代表从不会出现的值。这意味着声明为 never 类型的变量只能被 never 类型所赋值,在函数中它通常表现为抛出异常或无法执行到终止点(例如无限循环),示例代码如下:

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

变量声明

TypeScript 变量的命名规则:

  1. 变量名称可以包含数字和字母。
  2. 除了下划线 _ 和美元 $ 符号外,不能包含其他特殊字符,包括空格。
  3. 变量名不能以数字开头。

声明变量的类型及初始值:

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

例如:

var uname:string = "Runoob";

声明变量的类型,但没有初始值,变量值会设置为 undefined:

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

例如:

var uname:string;

声明变量并初始值,但不设置类型,该变量可以是任意类型:

var [变量名] = 值;

例如:

var uname = "Runoob";

声明变量没有设置类型和初始值,类型可以是任意类型,默认初始值为 undefined:

var [变量名];

例如:

var uname;

TypeScript 遵循强类型,如果将不同的类型赋值给变量会编译错误,如下实例:

var num:number = "hello"     // 这个代码会编译错误

类型断言(Type Assertion)

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

语法格式:

<类型>值

或:

值 as 类型

实例

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

TypeScript 是怎么确定单个断言是否足够
当 S 类型是 T 类型的子集,或者 T 类型是 S 类型的子集时,S 能被成功断言成 T。这是为了在进行类型断言时提供额外的安全性,完全毫无根据的断言是危险的,如果你想这么做,你可以使用 any。
它之所以不被称为类型转换,是因为转换通常意味着某种运行时的支持。但是,类型断言纯粹是一个编译时语法,同时,它也是一种为编译器提供关于如何分析代码的方法。

类型推断

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

var num = 2;    // 类型推断为 number
console.log("num 变量的值为 "+num); 
num = "12";    // 编译错误
console.log(num);

变量作用域

TypeScript 有以下几种作用域:

  1. 全局作用域 − 全局变量定义在程序结构的外部,它可以在你代码的任何位置使用。
  2. 类作用域 − 这个变量也可以称为 字段。类变量声明在一个类里头,但在类的方法外面。 该变量可以通过类的对象来访问。类变量也可以是静态的,静态的变量可以通过类名直接访问。
  3. 局部作用域 − 局部变量,局部变量只能在声明它的一个代码块(如:方法)中使用。

运算符

算术运算符

假定 y=5,下面的表格解释了这些算术运算符的操作:

运算符描述例子x 运算结果y 运算结果
+加法x=y+275
-减法x=y-235
*乘法x=y*2105
/除法x=y/22.55
%取模(余数)x=y%215
++自增x=++y66
x=y++56
自减x=–y44
x=y–54

关系运算符

关系运算符用于计算结果是否为 true 或者 false。
x=5,下面的表格解释了关系运算符的操作:

运算符描述比较返回值
==等于x==8false
x==5true
!=不等于x!=8true
>大于x>8false
<小于x<8true
>=大于或等于x>=8false
<=小于或等于x<=8true

逻辑运算符

逻辑运算符用于测定变量或值之间的逻辑。
给定 x=6 以及 y=3,下表解释了逻辑运算符:

运算符描述例子
&&and(x < 10 && y > 1) 为 true
||or(x5 || y5) 为 false
!not!(x==y) 为 true

短路运算符(&& 与 ||)

&& 与 || 运算符可用于组合表达式。 && 运算符只有在左右两个表达式都为 true 时才返回 true。|| 运算符只要其中一个表达式为 true ,则该组合表达式就会返回 true。

位运算符

位操作是程序设计中对位模式按位或二进制数的一元和二元操作。

运算符描述例子类似于结果十进制
&AND,按位与处理两个长度相同的二进制数,两个相应的二进位都为 1,该位的结果值才为 1,否则为 0。x = 5 & 10101 & 000100011
|OR,按位或处理两个长度相同的二进制数,两个相应的二进位中只要有一个为 1,该位的结果值为 1。x = 5| 10101 | 000101015
~取反,取反是一元运算符,对一个二进制数的每一位执行逻辑反操作。使数字 1 成为 0,0 成为 1。x = ~ 5~01011010-6
^异或,按位异或运算,对等长二进制模式按位或二进制数的每一位执行逻辑异按位或操作。操作的结果是如果某位不同则该位为 1,否则该位为 0。x = 5 ^ 10101 ^ 000101004
<<左移,把 << 左边的运算数的各二进位全部左移若干位,由 << 右边的数指定移动的位数,高位丢弃,低位补 0。x = 5 << 10101 << 1101010
>>右移,把 >> 左边的运算数的各二进位全部右移若干位,>> 右边的数指定移动的位数。x = 5 >> 10101 >> 100102
>>>无符号右移,与有符号右移位类似,除了左边一律使用0 补位。x = 2 >>> 10010 >>> 100011

赋值运算符

赋值运算符用于给变量赋值。
给定 x=10 和 y=5,下面的表格解释了赋值运算符:

运算符例子实例x 值
= (赋值)x = yx = yx = 5
+= (先进行加运算后赋值)x += yx = x + yx = 15
-= (先进行减运算后赋值)x -= yx = x - yx = 5
*= (先进行乘运算后赋值)x *= yx = x * yx = 50
/= (先进行除运算后赋值)x /= yx = x / yx = 2

类似的逻辑运算符也可以与赋值运算符联合使用:<<=, >>=, >>=, &=, |= 与 ^=。

三元运算符 (?)

Test ? expr1 : expr2

Test − 指定的条件语句
expr1 − 如果条件语句 Test 返回 true 则返回该值
expr2 − 如果条件语句 Test 返回 false 则返回该值

类型运算符

typeof 运算符

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

查看以下实例:

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

使用 tsc 命令编译以上代码得到如下 JavaScript 代码:

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

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

其他运算符

负号运算符(-)

更改操作数的符号,查看以下实例:

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

+ 运算符可以拼接两个字符串,查看以下实例:

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

条件语句

在 TypeScript 中,我们可使用以下条件语句:

  1. if 语句 - 只有当指定条件为 true 时,使用该语句来执行代码
  2. if…else 语句 - 当条件为 true 时执行代码,当条件为 false 时执行其他代码
  3. if…else if…else 语句- 使用该语句来选择多个代码块之一来执行
  4. switch 语句 - 使用该语句来选择多个代码块之一来执行

switch…case 语句

一个 switch 语句允许测试一个变量等于多个值时的情况。每个值称为一个 case,且被测试的变量会对每个 switch case 进行检查。

switch 语句的语法:

switch(expression){
    case constant-expression  :
       statement(s);
       break; /* 可选的 */
    case constant-expression  :
       statement(s);
       break; /* 可选的 */
  
    /* 您可以有任意数量的 case 语句 */
    default : /* 可选的 */
       statement(s);
}

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

  1. switch 语句中的 expression 是一个常量表达式,必须是一个整型或枚举类型。
  2. 在一个 switch 中可以有任意数量的 case 语句。每个 case 后跟一个要比较的值和一个冒号。
  3. case 的 constant-expression 必须与 switch 中的变量具有相同的数据类型,且必须是一个常量或字面量。
  4. 当被测试的变量等于 case 中的常量时,case 后跟的语句将被执行,直到遇到 break 语句为止。
  5. 当遇到 break 语句时,switch 终止,控制流将跳转到 switch 语句后的下一行。
  6. 不是每一个 case 都需要包含 break。如果 case 语句不包含 break,控制流将会继续后续的 case,直到遇到 break 为止。
  7. 一个 switch 语句可以有一个可选的 default case,出现在 switch 的结尾。default case 可用于在上面所有 case 都不为真时执行一个任务。default case 中的 break 语句不是必需的。

循环

for 循环

for ( init; condition; increment ){
    statement(s);
}

下面是 for 循环的控制流程解析:

  1. init 会首先被执行,且只会执行一次。这一步允许您声明并初始化任何循环控制变量。您也可以不在这里写任何语句,只要有一个分号出现即可。
  2. 接下来,会判断 condition。如果为 true,则执行循环主体。如果为 false,则不执行循环主体,且控制流会跳转到紧接着 for 循环的下一条语句。
  3. 在执行完 for 循环主体后,控制流会跳回上面的 increment 语句。该语句允许您更新循环控制变量。该语句可以留空,只要在条件后有一个分号出现即可。
  4. 条件再次被判断。如果为 true,则执行循环,这个过程会不断重复(循环主体,然后增加步值,再然后重新判断条件)。在条件变为 false 时,for 循环终止。

for…in 循环

for…in 语句用于一组值的集合或列表进行迭代输出。

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

val 需要为 string 或 any 类型。
TypeScript

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

编译以上代码得到如下 JavaScript 代码:

JavaScript

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

for…of 、forEach、every 和 some 循环

for…of 允许你遍历 Arrays(数组), Strings(字符串), Maps(映射), Sets(集合)等可迭代的数据结构等。
TypeScript for…of 循环

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

forEach、every 和 some 是 JavaScript 的循环语法,TypeScript 作为 JavaScript 的语法超集,当然默认也是支持的。
因为 forEach 在 iteration 中是无法返回的,所以可以使用 every 和 some 来取代 forEach。
TypeScript forEach 循环

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

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

while 循环

while 语句在给定条件为 true 时,重复执行语句或语句组。循环主体执行之前会先测试条件。

do…while 循环

不像 for 和 while 循环,它们是在循环头部测试循环条件。do…while 循环是在循环的尾部检查它的条件。

break 语句

break 语句有以下两种用法:

  1. 当 break 语句出现在一个循环内时,循环会立即终止,且程序流将继续执行紧接着循环的下一条语句。
  2. 它可用于终止 switch 语句中的一个 case。
    如果您使用的是嵌套循环(即一个循环内嵌套另一个循环),break 语句会停止执行最内层的循环,然后开始执行该块之后的下一行代码。

continue 语句

continue 语句有点像 break 语句。但它不是强制终止,continue 会跳过当前循环中的代码,强迫开始下一次循环。
对于 for 循环,continue 语句执行后自增语句仍然会执行。对于 while 和 do…while 循环,continue 语句会重新执行条件判断语句。

无限循环

无限循环就是一直在运行不会停止的循环。 for 和 while 循环都可以创建无限循环。
for 创建无限循环语法格式:

for(;;) { 
   // 语句
}

while 创建无限循环语法格式:

while(true) { 
   // 语句
} 

函数

可选参数

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

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

以下实例,我们将 lastName 设置为可选参数:
TypeScript

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");  // 正确

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

默认参数

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

function function_name(param1[:type],param2[:type] = default_value) { 
}

注意:参数不能同时设置为可选和默认。
实例
以下实例函数的参数 rate 设置了默认值为 0.50,调用该函数时如果未传入参数则使用该默认值:
TypeScript

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

剩余参数

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

function buildName(firstName: string, ...restOfName: string[]) {
    return firstName + " " + restOfName.join(" ");
}

let employeeName = buildName("Joseph", "Samuel", "Lucas", "MacKinzie");

函数的最后一个命名参数 restOfName 以 … 为前缀,它将成为一个由剩余参数组成的数组,索引值从0(包括)到 restOfName.length(不包括)。
TypeScript

function addNumbers(...nums:number[]) {  
    var i;   
    var sum:number = 0; 
    
    for(i = 0;i<nums.length;i++) { 
       sum = sum + nums[i]; 
    } 
    console.log("和为:",sum) 
 } 
 addNumbers(1,2,3) 
 addNumbers(10,10,10,10,10)

匿名函数

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

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

构造函数

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

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

参数说明:

arg1, arg2, ... argN:参数列表。
functionBody:一个含有包括函数定义的 JavaScript 语句的字符串。

实例
TypeScript

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

递归函数

递归函数即在函数内调用函数本身。
TypeScript

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

Lambda 函数

Lambda 函数也称之为箭头函数。箭头函数表达式的语法比函数表达式更短。函数只有一行语句:

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

函数重载

重载是方法名字相同,而参数不同,返回类型可以相同也可以不同。
每个重载的方法(或者构造函数)都必须有一个独一无二的参数类型列表。
TypeScript

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

下表列出了 Number 对象支持的属性:

属性描述
MAX_VALUE可表示的最大的数,MAX_VALUE 属性值接近于 1.79E+308。大于 MAX_VALUE 的值代表 “Infinity”。
MIN_VALUE可表示的最小的数,即最接近 0 的正数 (实际上不会变成 0)。最大的负数是 -MIN_VALUE,MIN_VALUE 的值约为 5e-324。小于 MIN_VALUE (“underflow values”) 的值将会转换为 0。
NaN非数字值(Not-A-Number)。
NEGATIVE_INFINITY负无穷大,溢出时返回该值。该值小于 MIN_VALUE。
POSITIVE_INFINITY正无穷大,溢出时返回该值。该值大于 MAX_VALUE。
prototypeNumber 对象的静态属性。使您有能力向对象添加属性和方法。
constructor返回对创建此对象的 Number 函数的引用。

prototype 实例

TypeScript

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)

Number 对象方法

Number对象支持以下方法:

序号 方法 & 描述 实例

  1. toExponential()
    把对象的值转换为指数计数法。
    //toExponential()
    var num1 = 1225.30
    var val = num1.toExponential();
    console.log(val) // 输出: 1.2253e+3
  2. 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
  3. toLocaleString()
    把数字转换为字符串,使用本地数字格式顺序。
    var num = new Number(177.1234);
    console.log( num.toLocaleString()); // 输出:177.1234
  4. 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
  5. 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
  6. valueOf()
    返回一个 Number 对象的原始数字值。
    var num = new Number(10);
    console.log(num.valueOf()); // 输出:10

String(字符串)

String 对象属性

下表列出了 String 对象支持的属性:

  1. constructor
    对创建该对象的函数的引用。

    var str = new String( "This is string" ); 
    console.log("str.constructor is:" + str.constructor)
    

    输出结果:

    str.constructor is:function String() { [native code] }
    
  2. length
    返回字符串的长度。

    var uname = new String("Hello World") 
    console.log("Length "+uname.length)  // 输出 11
    
  3. 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" // 添加属性 email
     console.log("员工号: "+emp.id) 
     console.log("员工姓名: "+emp.name) 
     console.log("员工邮箱: "+emp.email)
    

String 方法

下表列出了 String 对象支持的方法:

  1. charAt()
    返回在指定位置的字符。

    var str = new String("RUNOOB"); 
    console.log("str.charAt(0) 为:" + str.charAt(0)); // R
    console.log("str.charAt(1) 为:" + str.charAt(1)); // U 
    console.log("str.charAt(2) 为:" + str.charAt(2)); // N 
    console.log("str.charAt(3) 为:" + str.charAt(3)); // O 
    console.log("str.charAt(4) 为:" + str.charAt(4)); // O 
    console.log("str.charAt(5) 为:" + str.charAt(5)); // B
    
  2. charCodeAt()
    返回在指定的位置的字符的 Unicode 编码。

    var str = new String("RUNOOB"); 
    console.log("str.charCodeAt(0) 为:" + str.charCodeAt(0)); // 82
    console.log("str.charCodeAt(1) 为:" + str.charCodeAt(1)); // 85 
    console.log("str.charCodeAt(2) 为:" + str.charCodeAt(2)); // 78 
    console.log("str.charCodeAt(3) 为:" + str.charCodeAt(3)); // 79 
    console.log("str.charCodeAt(4) 为:" + str.charCodeAt(4)); // 79
    console.log("str.charCodeAt(5) 为:" + str.charCodeAt(5)); // 66
    
  3. concat()
    连接两个或更多字符串,并返回新的字符串。

    var str1 = new String( "RUNOOB" ); 
    var str2 = new String( "GOOGLE" ); 
    var str3 = str1.concat( str2 ); 
    console.log("str1 + str2 : "+str3) // RUNOOBGOOGLE
    
  4. indexOf()
    返回某个指定的字符串值在字符串中首次出现的位置。

    var str1 = new String( "RUNOOB" ); 
    
    var index = str1.indexOf( "OO" ); 
    console.log("查找的字符串位置 :" + index );  // 3
    
  5. lastIndexOf()
    从后向前搜索字符串,并从起始位置(0)开始计算返回字符串最后出现的位置。

    var str1 = new String( "This is string one and again string" ); 
    var index = str1.lastIndexOf( "string" );
    console.log("lastIndexOf 查找到的最后字符串位置 :" + index ); // 29
        
    index = str1.lastIndexOf( "one" ); 
    console.log("lastIndexOf 查找到的最后字符串位置 :" + index ); // 15
    
  6. localeCompare()
    用本地特定的顺序来比较两个字符串。

    var str1 = new String( "This is beautiful string" );
      
    var index = str1.localeCompare( "This is beautiful string");  
    
    console.log("localeCompare first :" + index );  // 0
    
  7. match()
    查找找到一个或多个正则表达式的匹配。

    var str="The rain in SPAIN stays mainly in the plain"; 
    var n=str.match(/ain/g);  // ain,ain,ain
    
  8. replace()
    替换与正则表达式匹配的子串

    var re = /(\w+)\s(\w+)/; 
    var str = "zara ali"; 
    var newstr = str.replace(re, "$2, $1"); 
    console.log(newstr); // ali, zara
    
  9. search()
    检索与正则表达式相匹配的值

    var re = /apples/gi; 
    var str = "Apples are round, and apples are juicy.";
    if (str.search(re) == -1 ) { 
       console.log("Does not contain Apples" ); 
    } else { 
       console.log("Contains Apples" ); 
    } 
    
  10. slice()
    提取字符串的片断,并在新的字符串中返回被提取的部分。

  11. split()
    把字符串分割为子字符串数组。

    var str = "Apples are round, and apples are juicy."; 
    var splitted = str.split(" ", 3); 
    console.log(splitted)  // [ 'Apples', 'are', 'round,' ]
    
  12. substr()
    从起始索引号提取字符串中指定数目的字符。

  13. substring()
    提取字符串中两个指定的索引号之间的字符。

    var str = "RUNOOB GOOGLE TAOBAO FACEBOOK"; 
    console.log("(1,2): "    + str.substring(1,2));   // U
    console.log("(0,10): "   + str.substring(0, 10)); // RUNOOB GOO
    console.log("(5): "      + str.substring(5));     // B GOOGLE TAOBAO FACEBOOK
    
  14. toLocaleLowerCase()
    根据主机的语言环境把字符串转换为小写,只有几种语言(如土耳其语)具有地方特有的大小写映射。

    var str = "Runoob Google"; 
    console.log(str.toLocaleLowerCase( ));  // runoob google
    
  15. toLocaleUpperCase()
    据主机的语言环境把字符串转换为大写,只有几种语言(如土耳其语)具有地方特有的大小写映射。

    var str = "Runoob Google"; 
    console.log(str.toLocaleUpperCase( ));  // RUNOOB GOOGLE
    
  16. toLowerCase()
    把字符串转换为小写。

    var str = "Runoob Google"; 
    console.log(str.toLowerCase( ));  // runoob google
    
  17. toString()
    返回字符串。

    var str = "Runoob"; 
    console.log(str.toString( )); // Runoob
    
  18. toUpperCase()
    把字符串转换为大写。

    var str = "Runoob Google"; 
    console.log(str.toUpperCase( ));  // RUNOOB GOOGLE
    
  19. valueOf()
    返回指定字符串对象的原始值。

    var str = new String("Runoob"); 
    console.log(str.valueOf( ));  // Runoob
    

Array(数组)

TypeScript 声明数组的语法格式如下所示:

var array_name[:datatype];        //声明 
array_name = [val1,val2,valn..]   //初始化

或者直接在声明时初始化:

var array_name[:datatype] = [val1,val2…valn]

如果数组声明时未设置类型,则会被认为是 any 类型,在初始化时根据第一个元素的类型来推断数组的类型。
创建一个 number 类型的数组:

var numlist:number[] = [2,4,6,8]

数组解构

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

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

数组迭代

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

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

多维数组

一个数组的元素可以是另外一个数组,这样就构成了多维数组(Multi-dimensional Array)。
最简单的多维数组是二维数组,定义方式如下:

var arr_name:datatype[][]=[ [val1,val2,val3],[v1,v2,v3] ]

数组方法

下表列出了一些常用的数组方法:

  1. concat()
    连接两个或更多的数组,并返回结果。

    var alpha = ["a", "b", "c"]; 
    var numeric = [1, 2, 3];
    
    var alphaNumeric = alpha.concat(numeric); 
    console.log("alphaNumeric : " + alphaNumeric );    // a,b,c,1,2,3   
    
  2. every()
    检测数值元素的每个元素是否都符合条件。

    function isBigEnough(element, index, array) { 
            return (element >= 10); 
    } 
            
    var passed = [12, 5, 8, 130, 44].every(isBigEnough); 
    console.log("Test Value : " + passed ); // false
    
  3. filter()
    检测数值元素,并返回符合条件所有元素的数组。

    function isBigEnough(element, index, array) { 
       return (element >= 10); 
    } 
              
    var passed = [12, 5, 8, 130, 44].filter(isBigEnough); 
    console.log("Test Value : " + passed ); // 12,130,44
    
  4. forEach()
    数组每个元素都执行一次回调函数。

    let num = [7, 8, 9];
    num.forEach(function (value) {
        console.log(value);
    }); 
    编译成 JavaScript 代码:
    
    var num = [7, 8, 9];
    num.forEach(function (value) {
        console.log(value);  // 7   8   9
    });
    
  5. indexOf()
    搜索数组中的元素,并返回它所在的位置。

    如果搜索不到,返回值 -1,代表没有此项。
    
    var index = [12, 5, 8, 130, 44].indexOf(8); 
    console.log("index is : " + index );  // 2
    
  6. join()
    把数组的所有元素放入一个字符串。

    var arr = new Array("Google","Runoob","Taobao"); 
              
    var str = arr.join(); 
    console.log("str : " + str );  // Google,Runoob,Taobao
              
    var str = arr.join(", "); 
    console.log("str : " + str );  // Google, Runoob, Taobao
              
    var str = arr.join(" + "); 
    console.log("str : " + str );  // Google + Runoob + Taobao
    
  7. lastIndexOf()
    返回一个指定的字符串值最后出现的位置,在一个字符串中的指定位置从后向前搜索。

    var index = [12, 5, 8, 130, 44].lastIndexOf(8); 
    console.log("index is : " + index );  // 2
    
  8. map()
    通过指定函数处理数组的每个元素,并返回处理后的数组。

    var numbers = [1, 4, 9]; 
    var roots = numbers.map(Math.sqrt); 
    console.log("roots is : " + roots );  // 1,2,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
    
  10. push()
    向数组的末尾添加一个或更多元素,并返回新的长度。

    var numbers = new Array(1, 4, 9); 
    var length = numbers.push(10); 
    console.log("new numbers is : " + numbers );  // 1,4,9,10 
    length = numbers.push(20); 
    console.log("new numbers is : " + numbers );  // 1,4,9,10,20
    
  11. reduce()
    将数组元素计算为一个值(从左到右)。

    var total = [0, 1, 2, 3].reduce(function(a, b){ return a + b; }); 
    console.log("total is : " + total );  // 6
    
  12. reduceRight()
    将数组元素计算为一个值(从右到左)。

    var total = [0, 1, 2, 3].reduceRight(function(a, b){ return a + b; }); 
    console.log("total is : " + total );  // 6
    
  13. reverse()
    反转数组的元素顺序。

    var arr = [0, 1, 2, 3].reverse(); 
    console.log("Reversed array is : " + arr );  // 3,2,1,0
    
  14. shift()
    删除并返回数组的第一个元素。

    var arr = [10, 1, 2, 3].shift(); 
    console.log("Shifted value is : " + arr );  // 10
    
  15. 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, 3) );  // mango,banana
    
  16. some()
    检测数组元素中是否有元素符合指定条件。

    function isBigEnough(element, index, array) { 
       return (element >= 10); 
              
    } 
              
    var retval = [2, 5, 8, 1, 4].some(isBigEnough);
    console.log("Returned value is : " + retval );  // false
              
    var retval = [12, 5, 8, 1, 4].some(isBigEnough); 
    console.log("Returned value is : " + retval );  // true
    
  17. sort()
    对数组的元素进行排序。

    var arr = new Array("orange", "mango", "banana", "sugar"); 
    var sorted = arr.sort(); 
    console.log("Returned string is : " + sorted );  // banana,mango,orange,sugar
    
  18. splice()
    从数组中添加或删除元素。

    var arr = ["orange", "mango", "banana", "sugar", "tea"];  
    var removed = arr.splice(2, 0, "water");  
    console.log("After adding 1: " + arr );    // orange,mango,water,banana,sugar,tea 
    console.log("removed is: " + removed); 
              
    removed = arr.splice(3, 1);  
    console.log("After removing 1: " + arr );  // orange,mango,water,sugar,tea 
    console.log("removed is: " + removed);  // banana
    
  19. toString()
    把数组转换为字符串,并返回结果。

    var arr = new Array("orange", "mango", "banana", "sugar");         
    var str = arr.toString(); 
    console.log("Returned string is : " + str );  // orange,mango,banana,sugar
    
  20. 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 of the array is : " + length ); // 5
    

Map对象

Map 对象保存键值对,并且能够记住键的原始插入顺序。任何值(对象或者原始值) 都可以作为一个键或一个值。
TypeScript 使用 Map 类型和 new 关键字来创建 Map:

let myMap = new Map();

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

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

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对象中每个元素的值 。

迭代 Map

Map 对象中的元素是按顺序插入的,我们可以迭代 Map 对象,每一次迭代返回 [key, value] 数组。
TypeScript使用 for…of 来实现迭代:
实例 -test.ts 文件

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

元组

我们知道数组中元素的数据类型都一般是相同的(any[] 类型的数组可以不同),如果存储的元素数据类型不同,则需要使用元组。
元组中允许存储不同类型的元素,元组可以作为参数传递给函数。
创建元组的语法格式如下:

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

声明一个元组并初始化:

var mytuple = [10,"Runoob"];

联合类型

联合类型(Union Types)可以通过管道(|)将变量设置多种类型,赋值时可以根据设置的类型来赋值。
声明一个联合类型:
TypeScript

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

也可以将联合类型作为函数参数使用:
TypeScript

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

我们也可以将数组声明为联合类型:
TypeScript

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,接着定义了一个变量 customer,它的类型是 IPerson。customer 实现了接口 IPerson 的属性和方法。
TypeScript

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)

联合类型和接口

以下实例演示了如何在接口中使用联合类型:

TypeScript

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"]

接口继承

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

Child_interface_name extends super_interface_name

多接口继承语法格式:

Child_interface_name extends super_interface1_name, super_interface2_name,…,super_interfaceN_name

继承的各个接口使用逗号 , 分隔。
单继承实例
TypeScript

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)

多继承实例
TypeScript

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 是面向对象的 JavaScript。
类描述了所创建的对象共同的属性和方法。
TypeScript 支持面向对象的所有特性,比如 类、接口等。
TypeScript 类定义方式如下:

class class_name { 
    // 类作用域
}

创建类的数据成员

以下实例我们声明了类 Car,包含字段为 engine,构造函数在类实例化后初始化字段 engine。
this 关键字表示当前类实例化的对象。注意构造函数的参数名与字段名相同,this.engine 表示类的字段。
此外我们也在类中定义了一个方法 disp()。
TypeScript

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

创建实例化对象

我们使用 new 关键字来实例化类的对象,语法格式如下:

var object_name = new class_name([ arguments ])

类实例化时会调用构造函数,例如:

var obj = new Car("Engine 1")

类的继承

TypeScript 支持继承类,即我们可以在创建类的时候继承一个已存在的类,这个已存在的类称为父类,继承它的类称为子类。
类继承使用关键字 extends,子类除了不能继承父类的私有成员(方法和属性)和构造函数,其他的都可以继承。
TypeScript 一次只能继承一个类,不支持继承多个类,但 TypeScript 支持多重继承(A 继承 B,B 继承 C)。
语法格式如下:

class child_class_name extends parent_class_name

实例
类的继承:实例中创建了 Shape 类,Circle 类继承了 Shape 类,Circle 类可以直接使用 Area 属性:
TypeScript

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 关键字是对父类的直接引用,该关键字可以引用父类的属性和方法。
TypeScript

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

static 关键字

static 关键字用于定义类的数据成员(属性和方法)为静态的,静态成员可以直接通过类名调用。
TypeScript

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

instanceof 运算符

instanceof 运算符用于判断对象是否是指定的类型,如果是返回 true,否则返回 false。
TypeScript

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

访问控制修饰符

TypeScript 中,可以使用访问控制符来保护对类、变量、方法和构造方法的访问。TypeScript 支持 3 种不同的访问权限。

  1. public(默认) : 公有,可以在任何地方被访问。
  2. protected : 受保护,可以被其自身以及其子类访问。
  3. private : 私有,只能被其定义所在的类访问。

以下实例定义了两个变量 str1 和 str2,str1 为 public,str2 为 private,实例化后可以访问 str1,如果要访问 str2 则会编译错误。
TypeScript

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

类和接口

类可以实现接口,使用关键字 implements,并将 interest 字段作为类的属性使用。
以下实例红 AgriLoan 类实现了 ILoan 接口:
TypeScript

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 )

对象

鸭子类型(Duck Typing)

命名空间

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

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

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

SomeNameSpaceName.SomeClassName;

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

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

嵌套命名空间

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

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

模块

TypeScript 模块的设计理念是可以更换的组织代码。
模块是在其自身的作用域里执行,并不是在全局作用域,这意味着定义在模块里面的变量、函数和类等在模块外部是不可见的,除非明确地使用 export 导出它们。类似地,我们必须通过 import 导入其他模块导出的变量、函数、类等。
两个模块之间的关系是通过在文件级别上使用 import 和 export 建立的。
模块使用模块加载器去导入其它的模块。 在运行时,模块加载器的作用是在执行此模块代码前去查找并执行这个模块的所有依赖。 大家最熟知的JavaScript模块加载器是服务于 Node.js 的 CommonJS 和服务于 Web 应用的 Require.js。
此外还有有 SystemJs 和 Webpack。
模块导出使用关键字 export 关键字,语法格式如下:

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

要在另外一个文件使用该模块就需要使用 import 关键字来导入:

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

声明文件

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

runoob.d.ts

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

declare module Module_Name {
}

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

/// <reference path = " runoob.d.ts" />
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值