TS学习剧场

一、什么是TS？

TypeScript 是一种给 JavaScript 添加特性的语言扩展   ——强类型语言

1.JavaScript和TypeScript的区别？

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

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

二、TypeScript 安装

如果你的本地环境已经安装了 npm 工具，可以使用以下命令来安装。

使用国内镜像：

npm config set registry https://registry.npmmirror.com

1.安装 typescript：

npm install -g typescript

2.查看版本号：

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

$ tsc -v
Version 3.2.2

3.案例演示：

然后我们新建一个 app.ts 的文件，代码如下：

var message:string = "Hello World" 
console.log(message)

通常我们使用 .ts 作为 TypeScript 代码文件的扩展名。

4.类型转换：

tsc app.ts

三、基础语法

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

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

1.第一个 TypeScript 程序

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

以上代码首先通过 tsc 命令编译：

tsc Runoob.ts

监听编译

tsc -w 文件名.ts

生成tsconfig.json

tsc --init

得到如下 js 代码：

2.Runoob.js 文件代码：

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

最后我们使用 node 命令来执行该 js 代码。

$ node Runoob.js
Hello World

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

tsc file1.ts file2.ts file3.ts

3.TypeScript 与面向对象

面向对象是一种对现实世界理解和抽象的方法。

TypeScript 是一种面向对象的编程语言。

面向对象主要有两个概念：对象和类。

• 对象：对象是类的一个实例（对象不是找个女朋友），有状态和行为。例如，一条狗是一个对象，它的状态有：颜色、名字、品种；行为有：摇尾巴、叫、吃等。
• 类：类是一个模板，它描述一类对象的行为和状态。
• 方法：方法是类的操作的实现步骤。

TypeScript 面向对象编程实例：

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

四、基础类型

• Any 类型：声明为 any 的变量可以赋予任意类型的值。
• number数字类型：双精度64位浮点值。可以用来表示整数和分数
• string字符串类型：一个字符系列，使用单引号（'）或双引号（"）来表示字符串类型。反引号（`）来定义多行文本和内嵌表达式。
• boolean布尔类型：表示逻辑值：true 和 false。
• 数组：示逻辑值：true 和 false
• 元组：元组类型用来表示已知元素数量和类型的数组，各元素的类型不必相同，对应位置的类型需要相同。
• enum枚举：枚举类型用于定义数值集合。
• void:用于标识方法返回值的类型，表示该方法没有返回值。
• null:表示对象值缺失。
• undefined:用于初始化变量为一个未定义的值
• never:never 是其它类型（包括 null 和 undefined）的子类型，代表从不会出现的值。

五、变量声明

1.TypeScript 变量的命名规则：

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

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

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

变量使用前必须先声明，我们可以使用 var 来声明变量。

2.四种方式声明变量：

Ⅰ.声明变量的类型及初始值：

var [变量名] :[类型] = 值
var uname:string ='ss'

Ⅱ.声明变量的类型，但没有初始值，变量值会设置为 undefined：

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

Ⅲ.声明变量并初始值，但不设置类型，该变量可以是任意类型：

var [变量名] = 值
var uname = 'ss'

Ⅳ.声明变量没有设置类型和初始值，类型可以是任意类型，默认初始值为 undefined：

var [变量名];
var uname;

注意：变量不要使用 name 否则会与 DOM 中的全局 window 对象下的 name 属性出现了重名

3.变量作用域

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

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

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)

六、运算符

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

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

• 逻辑运算符

  逻辑运算符用于测定变量或值之间的逻辑。

  给定 x=6 以及 y=3，下表解释了逻辑运算符：

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

三元运算符 (?)

三元运算有 3 个操作数，并且需要判断布尔表达式的值。该运算符的主要是决定哪个值应该赋值给变量。

Test ? expr1 : expr2

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

让我们看下以下实例：

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

类型运算符

typeof 运算符

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

查看以下实例:

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

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

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

以上实例输出结果如下：

number

instanceof

instanceof 运算符用于判断对象是否为指定的类型，后面章节我们会具体介绍它。

七、TS函数

1、函数定义

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

语法如下

function function_name()
{
    // 执行代码
}

2、调用函数

函数只有通过调用才可以执行函数内的代码。

语法格式：

function_name()


//实例
function test() {   // 函数定义
    console.log("调用函数") 
} 
test()              // 调用函数

3、函数返回值

有时，我们会希望函数将执行的结果返回到调用它的地方。

通过使用 return 语句就可以实现。

在使用 return 语句时，函数会停止执行，并返回指定的值。

语法格式如下所示：

function function_name():return_type { 
    // 语句
    return value; 
}

• return_type 是返回值的类型。

• return 关键词后跟着要返回的结果。

• 一般情况下，一个函数只有一个 return 语句。

• 返回值的类型需要与函数定义的返回类型(return_type)一致。

实例

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

• 实例中定义了函数 greet()，返回值的类型为 string。

• greet() 函数通过 return 语句返回给调用它的地方，即变量 msg，之后输出该返回值。

4、带参数函数

在调用函数时，您可以向其传递值，这些值被称为参数。

这些参数可以在函数中使用。

您可以向函数发送多个参数，每个参数使用逗号 , 分隔：

语法格式如下所示：

function func_name( param1 [:datatype], param2 [:datatype]) {   
}

• param1、param2 为参数名。

• datatype 为参数类型。

实例

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

• 实例中定义了函数 add()，返回值的类型为 number。

• add() 函数中定义了两个 number 类型的参数，函数内将两个参数相加并返回。

5、可选参数和默认参数

1、可选参数

在 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 设置为可选参数：

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

6、匿名函数

匿名函数是一个没有函数名的函数。

匿名函数在程序运行时动态声明，除了没有函数名外，其他的与标准函数一样。

我们可以将匿名函数赋值给一个变量，这种表达式就成为函数表达式。

语法格式如下：

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

实例

不带参数匿名函数：

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

带参数匿名函数：

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

7、匿名函数自调用

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

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

8、构造函数

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

9、递归函数

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

实例

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

10、Lambda 函数

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

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

函数只有一行语句：

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

实例

以下实例声明了 lambda 表达式函数，函数返回两个数的和：

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

函数是一个语句块：

( [param1, param2,…param n] )=> {
 
    // 代码块
}

实例

以下实例声明了 lambda 表达式函数，函数返回两个数的和：

var foo = (x:number)=> {
 x = 10 + x 
console.log(x)
 } foo(100)

八、TypeScript Array(数组)

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

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

//或者直接在声明时初始化：

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

实例

创建一个 number 类型的数组：

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

九、TypeScript Map 对象

1.创建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);

使用 es6 编译：

tsc --target es6 test.ts

十、TypeScript 接口

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

TypeScript 接口定义如下：

interface interface_name { 
}

实例

以下实例中，我们定义了一个接口 IPerson，接着定义了一个变量 customer，它的类型是 IPerson。

customer 实现了接口 IPerson 的属性和方法。

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)


//输出结果
Customer 对象
Tom
Hanks
Hi there
Employee  对象
Jim
Blakes

需要注意接口不能转换为 JavaScript。 它只是 TypeScript 的一部分。