https://www.runoob.com/typescript/ts-tutorial.html

TypeScript 是 JavaScript 的一个超集，支持 ECMAScript 6 标准（ES6 教程）。

TypeScript 由微软开发的自由和开源的编程语言。

TypeScript 设计目标是开发大型应用，它可以编译成纯 JavaScript，编译出来的 JavaScript 可以运行在任何浏览器上。

语言特性

TypeScript 是一种给 JavaScript 添加特性的语言扩展。增加的功能包括：

  • 类型批注和编译时类型检查
  • 类型推断
  • 类型擦除
  • 接口
  • 枚举
  • Mixin
  • 泛型编程
  • 名字空间
  • 元组
  • Await

以下功能是从 ECMA 2015 反向移植而来：

  • 类
  • 模块
  • lambda 函数的箭头语法
  • 可选参数以及默认参数

JavaScript 与 TypeScript 的区别

TypeScript 是 JavaScript 的超集，扩展了 JavaScript 的语法，因此现有的 JavaScript 代码可与 TypeScript 一起工作无需任何修改，TypeScript 通过类型注解提供编译时的静态类型检查。

TypeScript 可处理已有的 JavaScript 代码，并只对其中的 TypeScript 代码进行编译。

1、TypeScript 基础语法

TypeScript 程序由以下几个部分组成：

  • 模块
  • 函数
  • 变量
  • 语句和表达式
  • 注释

Runoob.ts 文件代码：

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

Runoob.js 文件代码：

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

整个流程如下图所示：

TypeScript 区分大写和小写字符。

2、TypeScript 基础类型

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<number> = [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(c);    // 输出 2
void void

用于标识方法返回值的类型，表示该方法没有返回值。

function hello(): void {

    alert("Hello Runoob");

}
null null

表示对象值缺失。
undefined undefined

用于初始化变量为一个未定义的值
never never

never 是其它类型（包括 null 和 undefined）的子类型，代表从不会出现的值。

注意：TypeScript 和 JavaScript 没有整数类型。

Any 类型

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

1、变量的值会动态改变时，比如来自用户的输入，任意值类型可以让这些变量跳过编译阶段的类型检查，示例代码如下：

let x: any = 1;    // 数字类型

x = 'I am who I am';    // 字符串类型

x = false;    // 布尔类型

Null 和 Undefined

null

在 JavaScript 中 null 表示 "什么都没有"。

null是一个只有一个值的特殊类型。表示一个空对象引用。

用 typeof 检测 null 返回是 object。

undefined

在 JavaScript 中, undefined 是一个没有设置值的变量。

typeof 一个没有值的变量会返回 undefined。

3、TypeScript 变量声明

变量是一种使用方便的占位符，用于引用计算机内存地址。

我们可以把变量看做存储数据的容器。

TypeScript 变量的命名规则：

  • 变量名称可以包含数字和字母。

  • 除了下划线 _ 和美元 $ 符号外，不能包含其他特殊字符，包括空格。

  • 变量名不能以数字开头。

类型推断

当类型没有给出时，TypeScript 编译器利用类型推断来推断类型。

如果由于缺乏声明而不能推断出类型，那么它的类型被视作默认的动态 any 类型。

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

  • 第一行代码声明了变量 num 并=设置初始值为 2。 注意变量声明没有指定类型。因此，程序使用类型推断来确定变量的数据类型，第一次赋值为 2，num 设置为 number 类型。

  • 第三行代码，当我们再次为变量设置字符串类型的值时，这时编译会错误。因为变量已经设置为了 number 类型。

变量作用域

变量作用域指定了变量定义的位置。

程序中变量的可用性由变量作用域决定。

TypeScript 有以下几种作用域：

  • 全局作用域 − 全局变量定义在程序结构的外部，它可以在你代码的任何位置使用。

  • 类作用域 − 这个变量也可以称为 字段。类变量声明在一个类里头，但在类的方法外面。 该变量可以通过类的对象来访问。类变量也可以是静态的，静态的变量可以通过类名直接访问。

  • 局部作用域 − 局部变量，局部变量只能在声明它的一个代码块（如：方法）中使用。

var global_num = 12          // 全局变量

class Numbers {

   num_val = 13;             // 实例变量

   static sval = 10;         // 静态变量

   storeNum():void {

      var local_num = 14;    // 局部变量

   }

}

console.log("全局变量为: "+global_num)

console.log(Numbers.sval)   // 静态变量

var obj = new Numbers();

console.log("实例变量: "+obj.num_val)

4、TypeScript 运算符

TypeScript 主要包含以下几种运算：

  • 算术运算符
  • 逻辑运算符
  • 关系运算符
  • 按位运算符
  • 赋值运算符
  • 三元/条件运算符
  • 字符串运算符
  • 类型运算符

5、TypeScript 条件语句

条件语句

通常在写代码时，您总是需要为不同的决定来执行不同的动作。您可以在代码中使用条件语句来完成该任务。

在 TypeScript 中，我们可使用以下条件语句：

  • if 语句 - 只有当指定条件为 true 时，使用该语句来执行代码
  • if...else 语句 - 当条件为 true 时执行代码，当条件为 false 时执行其他代码
  • if...else if....else 语句- 使用该语句来选择多个代码块之一来执行
  • switch 语句 - 使用该语句来选择多个代码块之一来执行
var num:number = 2

if(num > 0) {

    console.log(num+" 是正数")

} else if(num < 0) {

    console.log(num+" 是负数")

} else {

    console.log(num+" 不是正数也不是负数")

}

6、TypeScript 循环

语法

语法格式如下所示：

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

    //语句

}
var num = 5;

var i;

var factorial = 1;

for (i = num; i >= 1; i--) {

    factorial *= i;

}

console.log(factorial);

7、TypeScript 函数

函数定义

函数就是包裹在花括号中的代码块，前面使用了关键词 function：

语法格式如下所示：

function function_name()

{

    // 执行代码

}
// 函数定义

function greet():string { // 返回一个字符串

    return "Hello World"

} 

function caller() {

    var msg = greet() // 调用 greet() 函数

    console.log(msg)

} 

// 调用函数

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

Lambda 函数

Lambda 函数也称之为箭头函数。

箭头函数表达式的语法比函数表达式更短。

TypeScript

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

8、TypeScript Number

TypeScript 与 JavaScript 类似，支持 Number 对象。

Number 对象是原始数值的包装对象。

语法

var num = new Number(value);

console.log("TypeScript Number 属性: ");

console.log("最大值为: " + Number.MAX_VALUE);

console.log("最小值为: " + Number.MIN_VALUE);

console.log("负无穷大: " + Number.NEGATIVE_INFINITY);

console.log("正无穷大:" + Number.POSITIVE_INFINITY);

9、TypeScript String（字符串）

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

10、TypeScript Array(数组)

TypeScript

var sites:string[]; sites = ["Google","Runoob","Taobao"]
console.log(sites[0]);
console.log(sites[1]);

Array 对象

我们也可以使用 Array 对象创建数组。

Array 对象的构造函数接受以下两种值：

  • 表示数组大小的数值。
  • 初始化的数组列表，元素使用逗号分隔值。

TypeScript

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

数组方法

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

序号 方法 & 描述 实例
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

11、TypeScript 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对象中每个元素的值 。
let nameSiteMapping = new Map();

// 设置 Map 对象

nameSiteMapping.set("Google", 1);

nameSiteMapping.set("Runoob", 2);

nameSiteMapping.set("Taobao", 3);

// 获取键对应的值

console.log(nameSiteMapping.get("Runoob"));     // 2

// 判断 Map 中是否包含键对应的值

console.log(nameSiteMapping.has("Taobao"));       // true

console.log(nameSiteMapping.has("Zhihu"));        // false

// 返回 Map 对象键/值对的数量

console.log(nameSiteMapping.size);                // 3

// 删除 Runoob

console.log(nameSiteMapping.delete("Runoob"));    // true

console.log(nameSiteMapping);

// 移除 Map 对象的所有键/值对

nameSiteMapping.clear();             // 清除 Map

console.log(nameSiteMapping);

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

}

12、TypeScript 元组

我们知道数组中元素的数据类型都一般是相同的（any[] 类型的数组可以不同），如果存储的元素数据类型不同，则需要使用元组。

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

创建元组的语法格式如下：

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

var mytuple = [10,"Runoob"];

// 创建元组

console.log(mytuple[0])

console.log(mytuple[1])

元组运算

我们可以使用以下两个函数向元组添加新元素或者删除元素：

  • push() 向元组添加元素，添加在最后面。

  • pop() 从元组中移除元素（最后一个），并返回移除的元素。

13、TypeScript 联合类型

联合类型（Union Types）可以通过管道(|)将变量设置多种类型，赋值时可以根据设置的类型来赋值。

注意：只能赋值指定的类型，如果赋值其它类型就会报错。

创建联合类型的语法格式如下：

Type1|Type2|Type3
var val:string|number

val = 12

console.log("数字为 "+ val)

val = "Runoob"

console.log("字符串为 " + val)

function disp(name:string|string[]) {

        if(typeof name == "string") {

                console.log(name)

        } else {

                var i;

                for(i = 0;i<name.length;i++) {

                console.log(name[i])

                }

        }

}

disp("Runoob")

console.log("输出数组....")

disp(["Runoob","Google","Taobao","Facebook"])

14、TypeScript 接口

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

TypeScript 接口定义如下：

interface interface_name {

}
interface IPerson {

    firstName:string,

    lastName:string,

    sayHi: ()=>string

} 

var customer:IPerson = {

    firstName:"Tom",

    lastName:"Hanks",

    sayHi: ():string =>{return "Hi there"}

} 

console.log("Customer 对象 ")

console.log(customer.firstName)

console.log(customer.lastName)

console.log(customer.sayHi())  

var employee:IPerson = {

    firstName:"Jim",

    lastName:"Blakes",

    sayHi: ():string =>{return "Hello!!!"}

} 

console.log("Employee  对象 ")

console.log(employee.firstName)

console.log(employee.lastName)

单继承实例

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

15、TypeScript 类

TypeScript 是面向对象的 JavaScript。

类描述了所创建的对象共同的属性和方法。

TypeScript 支持面向对象的所有特性，比如 类、接口等。

TypeScript 类定义方式如下：

class class_name {

    // 类作用域

}

定义类的关键字为 class，后面紧跟类名，类可以包含以下几个模块（类的数据成员）：

  • 字段 − 字段是类里面声明的变量。字段表示对象的有关数据。

  • 构造函数 − 类实例化时调用，可以为类的对象分配内存。

  • 方法 − 方法为对象要执行的操作。

class Car {

   // 字段

   engine:string; 

   // 构造函数

   constructor(engine:string) {

      this.engine = engine

   }  

   // 方法

   disp():void {

      console.log("函数中显示发动机型号  :   "+this.engine)

   }

} 

// 创建一个对象

var obj = new Car("XXSY1")

// 访问字段

console.log("读取发动机型号 :  "+obj.engine)  

// 访问方法

obj.disp()

class Shape {

   Area:number 

   constructor(a:number) {

      this.Area = a

   }

} 

class Circle extends Shape {

   disp():void {

      console.log("圆的面积:  "+this.Area)

   }

}

var obj = new Circle(223);

obj.disp()

16、TypeScript 对象

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

var object_name = {

    key1: "value1", // 标量

    key2: "value",

    key3: function() {

        // 函数

    },

    key4:["content1", "content2"] //集合

}

var sites = {

    site1: "Runoob",

    site2: "Google",

    sayHello: function () { } // 类型模板

};

sites.sayHello = function () {

    console.log("hello " + sites.site1);

};

sites.sayHello();

17、TypeScript 模块

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

18、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'.
 
 
 
 
 
 
 
 

runoob-TypeScript 教程的更多相关文章

  1. TypeScript教程2

    在TS中,我们允许开发人员使用面向对象技术. 1.类让我们看看一个简单的基于类的例子: class Greeter { greeting: string; constructor(message: s ...

  2. TypeScript教程

    汇智课堂 地址  http://www.hubwiz.com/course/55b724ab3ad79a1b05dcc26c/ TypeScript是一种由微软开发的自由和开源的编程语言.它是Java ...

  3. TypeScript 教程&手册

    参考:https://www.w3cschool.cn/typescript/ https://www.gitbook.com/book/zhongsp/typescript-handbook/det ...

  4. TypeScript教程3

    1.快速回顾一下这JavaScript中的命名函数和匿名函数: 纯文本查看 复制代码 1 2 3 4 5 //Named functionfunction add(x, y) {     return ...

  5. TypeScript教程1

    Boolean类型aser:和as3一样 var isDone: boolean = false; 复制代码 Number类型aser:as3经常用int和uint,以后只用number就可以啦 va ...

  6. 2018-05-09 5分钟入门CTS-尝鲜中文版TypeScript

    知乎原链 本文为中文代码示例之5分钟入门TypeScript的CTS版本. CTS作者是@htwx(github). 它实现了关键词和标准库的所有命名汉化. 本文并未使用附带的vscode相关插件(包 ...

  7. Markdown 教程

    Markdown 简介 Markdown 是一种轻量级标记语言,它允许人们使用易读易写的纯文本格式编写文档. Markdown 语言在 2004 由约翰·格鲁伯(英语:John Gruber)创建. ...

  8. .net使用CSRedis操作Redis缓存的简单笔记（新手教程）

    0.介绍 .NET Core or .NET Framework 4.0+ client for Redis and Redis Sentinel (2.8) and Cluster. Include ...

  9. C++入门教程：大白话讲解，新手基础篇⭐⭐⭐（附源码及详解、视频课程资料推荐）

    目录 C++教程 前言 视频教程 文字教程 集成开发环境(IDE) 编译器 工作原理 学习指南 入门书籍 进阶书籍 算法.竞赛书籍 教程 标准构建 程序解释 第一个C++程序--"hello ...

  10. HowToDoInJava 其它教程 1 &#183; 翻译完成

    原文:HowToDoInJava 协议:CC BY-NC-SA 4.0 欢迎任何人参与和完善:一个人可以走的很快,但是一群人却可以走的更远. ApacheCN 学习资源 目录 Maven 教程 如何在 ...

随机推荐

  1. 强化学习训练过程中的过度拟合(overfitting)

    相关: A.I. Learns to Drive From Scratch in Trackmania 本文讨论的是强化学习中的过度拟合问题,要知道强化学习中的过拟合和其他的监督.无监督学习的过拟合不 ...

  2. PCI-5565-反射内存RFM2G的学习与使用

    1.介绍 反射内存集成在反射内存卡上,我们使用的是PCI总线的反射内存卡PCI5565,还有PCIE和其它总线类型的反射内存卡,原理差不多.在两台计算机的PCI插槽插两块反射内存卡,然后通过光纤连接. ...

  3. 细说MySql索引原理

     MySQL索引   MySQL索引的建立对于MySQL的高效运行是很重要的,索引可以大大提高MySQL的检索速度. 可以类比字典,如果要查"mysql"这个单词,我们肯定需要定位 ...

  4. 2023NOIP A层联测20 T3 点餐

    2023NOIP A层联测20 点餐 题目很好,可惜考试没想到. 思路 可以按照 \(b\) 从小到大排序,固定选择个数 \(k\),枚举选择的盘子 \(x\) 的 \(b\) 最大,最优解肯定是贪心 ...

  5. 如何编写一个高效的Java表达式求值程序

    当然,这个标题是有一点夺人眼球,但我确实这么做了(关于是否相信基准测试结果,这是另一个话题). 所以,上周我一直在找一个小型.实用的计算数学表达式的类库.偶然间我在stackoverflow上看到了一 ...

  6. Python消息队列之Huey

    缘起: 之前在Python中使用最多的就是Celery, 同样的在这次项目中使用了Celery+eventlet的方式,但是由于具体执行的逻辑是使用的异步编写的, 当时就出现了一个问题,当使用http ...

  7. git之常见问题

    1. You are in the middle of a merge -- cannot amend 场景:上一次提交,本次提交与上次修改点是同一个, 覆盖是的提交,产生的错误 解决方案: git ...

  8. CudaSPONGE高性能GPU分子模拟

    技术背景 CudaSPONGE是基于CUDA C开发的一款纯GPU分子动力学模拟软件,具有模块化和高性能的特点.官方基本介绍内容如下: 分子动力学(Molecular Dynamics, MD)模拟是 ...

  9. RocketMQ系列2：领域模型和技术概念

    ★消息队列16篇 1 领域模型 Apache RocketMQ 是一款典型的分布式架构下的消息中间件产品,使用异步通信方式和发布订阅的消息传输模型. Apache RocketMQ 产品具备异步通信的 ...

  10. 鸿蒙UI布局实战 —— 个人中心页面开发

    1.前言 接下里我们将开启"鸿蒙UI布局系列"的学习,第一站:学习线性布局(Row/Column)+ 弹性布局(Flex) 在展开学习前,先上一个实战demo--开发一个个人中心页 ...