TypeScript语法基础_typescript文件后缀

1 TypeScript 是什么

TypeScript 是一种由微软开发的自由和开源的编程语言。它是 JavaScript 的一个超集，而且本质上向这个语言添加了可选的静态类型和基于类的面向对象编程。

TypeScript是一个强类型的JavaScript超级，支持ES6，支持面向对象编程。TypeScript不能直接在浏览器中运行，而是需要编译器编译成JavaScript来运行。

TypeScript相比于JavaScript增加了静态类型，可以让开发人员编写脚本时就检查错误，使代码更健壮。

TypeScript的优点如下：

• 杜绝手误导致的变量名错误
• 类型在一定程度上可以当作文档
• IDE会自动填充，支持联想

2 获取TypeScript

1、安装Typescript

npm install -g typescript
1

2、编译TypeScript文件
（1）TypeScript文件的后缀名是.ts。例如，在当前文件夹下新建一个文件hello.ts，其中有一些代码，打开当前文件目录下的终端，在终端输入以下命令，文件夹中自动会生成一个js文件，叫做hello.js：

tsc ts文件名
1

这时再次编译hello.js文件就可以看到在终端输出了hello字眼：

// 编译js文件
node js文件名
1
2

（2）可以安装ts-node模块，简化编译步骤，打开cmd窗口输入以下命令：

npm install -g ts-node
1

这样在编译上面的hello.ts文件中，只需在hello.ts文件的目录下的终端中，输入下面的命令即可得出结果：

ts-node ts文件名
1

3 变量声明

类型声明是TS非常重要的一个特点，通过类型声明可以指定TS中变量（参数、形参）的类型，指定类型后，当为变量赋值时，TS编译器会自动检查是否符合类型声明，符合则赋值，否则报错。简而言之，类型声明给变量设置了类型，使得变量只能存储某种类型的值。

TypeScript变量的命名规则：

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

具体语法：

var 变量: 类型;

var 变量: 类型 = 值;

function fn(参数: 类型, 参数: 类型): 类型 {
    // 具体代码
}
1
2
3
4
5
6
7

4 数据类型

4.1 Boolean、Number、String、字面量

Boolean类型

let a: boolean = 布尔值true/false;
1

Number类型

let a: number = 具体数字;
1

String类型

let a: string = 具体字符串;
1

字面量

// 可以直接赋值，类似常量，值只能是10
var a: 10;

// “|”表示或者，可以连接多个类型
var b: "male" | "female";

var c: boolean | string; // 设置联合类型
1
2
3
4
5
6
7

4.2 any与unknown

any类型

any是任意值，是 TypeScript 针对编程时类型不明确的变量使用的一种数据类型，相当于关闭了类型检查。它常用于以下情况：

①变量的值会动态改变时，比如来自用户的输入，任意值类型可以让这些变量跳过编译阶段的类型检查

let x: any = 1; // 数字类型
x = "I am jmcbp"; // 字符串类型
x = false; // 布尔类型
1
2
3

②定义存储各种类型数据的数组时

let list: any[] = [1, true, "hello"];
1

③改写现有代码时，任意值允许在编译时可选择地包含或移除类型检查

// 变量不指定类型，ts解析器会自动判断变量的类型为any（隐式的any）
var a;
1
2

unknown类型

unknown类型是一个类型安全的any，其类型的变量不能赋值给其他变量。

如下所示，变量d是any类型，s是string类型，d可以直接赋值给s而不报错，但是d目前的值为true，是Boolean类型的值，这就造成了前后冲突。

但是如果为d变量赋值为unknown类型，就不可以直接赋值了，TS编译器会检查出来该错误并提醒。

对于这种情况，我们也有一些解决办法，首先是可以进行类型检查，当d变量为string的时候，才可以赋值给s：

var d: unknown;
var s: string;
if (typeof d === "string") {
    s = d; // 这种情况不会报错
}
1
2
3
4
5

或者也可以进行类型断言，告诉解析器变量的实际类型，也可以解决这个问题：

var d: unknown;
var s: string;

// 写法1
s = d as string;

// 写法2
s = <string>d;
1
2
3
4
5
6
7
8

4.3 void与never

void类型

void表示为空，在函数中设置void表示没有返回值。如果有返回值则会报错。

如果返回值是null，则不会报错，如下所示：

never类型

never表示没有值，表示永远不会返回结果。一般用于报错的函数。

function fun(): never {
    throw new Error("错误");
}
1
2
3

4.4 Object、Array、Enum

Object类型

Object表示对象，一般不太实用，因为范围太广了。如果给变量设置为object类型，那么变量可以是函数，也可以是数组。

但是{ }可以指定对象中有什么属性，语法为：{ 属性名: 属性值, 属性名: 属性值 }，但是属性必须一模一样，多一个少一个属性都不行。

var a: { name: string, age: number };

// a 对象必须 name 和 age 属性都要有，否则就会报错
a = { name: "橘猫吃不胖", age: 2 };
1
2
3
4

对于上面的情况，可以在属性名后面加一个“?”，表示属性是可选的，语法为：{ 属性名?: 属性值, 属性名?: 属性值 }。

var a: { name: string, age?: number };

// age属性可选，因此不加也不会报错
a = { name: "橘猫吃不胖" };
1
2
3
4

但是如果不确定对象中具体有多少属性，使用上面的方法显然也不可取了，那么就可以将某个属性设置为：[xxx: 类型]: 类型，示例代码如下：

// [xxx: string]: any ：表示任意类型的属性
var a: { name: string, [xxx: string]: any };

a = { name: "橘猫吃不胖", address: "北京" };
1
2
3
4

与此相类型，可以规定某个函数的参数类型以及返回值类型，语法如下：

// a函数有两个number类型的参数，返回值也是number
var a: (a: number, b: number) => number;

a = function (n1, n2) { // 举个例子
    return n1 + n2;
}
1
2
3
4
5
6

Array类型

// 方式一
let list1: number[] = [1, 2, 3];

// 方式二
// <>中是number表示为数字数组，是string表示为字符串数组
let list2: Array<number> = [2, 3, 4];
1
2
3
4
5
6

Enum类型

// 枚举类型中都是常量
enum Hello {
    a,
    b,
    c,
    d
}
1
2
3
4
5
6
7

默认情况下，a 的初始值为 0，其余的成员会从 1 开始自动增长。换句话说，Hello.b 的值为 1，Hello.b 的值为 2，Hello.c 的值为 3。

可以用在表示性别，例如：

enum sex {
    男,
    女
}
1
2
3
4

5 Map 对象

Map对象保存键值对，并且能够记住键的原始插入顺序。任何值（对象或者原始值）都可以作为一个键或一个值。Map 是 ES6 中引入的一种新的数据结构。

1、创建Map
TypeScript 使用 Map 类型和 new 关键字来创建 Map：

let map = new Map();
1

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

let map = new Map([
    ["a", 1],
    ["b", 2]
])
1
2
3
4

2、Map的相关函数与属性

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

TypeScript使用 for…of 来实现迭代：

let map = new Map([ // 创建Map
    ["a", 1],
    ["b", 2],
    ["c", 3]
]);

// 迭代map中key
for (let i of map.keys()) {
    console.log(i); // 依次输出a,b,c
}
// 迭代map中的value
for (let i of map.values()) {
    console.log(i); // 依次输出1,2,3
}
// 迭代map中的key和value
for (let i of map.entries()) {
    console.log(i[0], i[1]); // 依次输出a 1、b 2、c 3
}
// 使用对象解析
for (let [key, value] of map) {
    console.log(key, value); // 依次输出a 1、b 2、c 3
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

6 TypeScript 元组

数组中元素的数据类型都一般是相同的（any[] 类型的数组可以不同），如果存储的元素数据类型不同，则需要使用元组。元组也可以是固定长度的数组，允许存储不同类型的元素，元组可以作为参数传递给函数。

1、声明一个元组并初始化

// 方法1，声明时初始化
let tuple = [10, "hello"];

// 方法2，先声明空元组，再初始化
let tuple = [];
tuple[0] = 1;
tuple[1] = 2;

// 方法3：声明固定长度的元组
var a: [string, string]; // 长度为2，且都是字符串
1
2
3
4
5
6
7
8
9
10

2、访问元组
元组中元素使用索引来访问，第一个元素的索引值为 0，第二个为 1，以此类推第 n 个为 n-1，语法格式如下：

tuple_name[index]
1

3、元组运算

4、更新元组

var mytuple = [10, "Runoob", "Taobao", "Google"]; // 创建一个元组 
console.log("元组的第一个元素为：" + mytuple[0]) // 更新元组元素 
mytuple[0] = 121
console.log("元组中的第一个元素更新为：" + mytuple[0])
// 元组的第一个元素为：10
// 元组中的第一个元素更新为：121
1
2
3
4
5
6

5、解构元组：可以把元组元素赋值给变量

var a = [10, "橘猫吃不胖"]
var [b, c] = a
console.log(b) // 10
console.log(c) // 橘猫吃不胖
1
2
3
4

7 TypeScript 联合类型

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

1、语法格式

Type1|Type2|Type3
1

示例代码：

var val: string | number;
val = 12;
console.log("数字为 " + val); // 数字为 12
val = "橘猫吃不胖";
console.log("字符串为 " + val); // 字符串为 橘猫吃不胖
1
2
3
4
5

示例代码：

function disp(name: string | string[]) {
    if (typeof name == "string") { // 如果类型为字符串
        console.log(name) // 输出name
    } else { // 如果是字符串数组
        for (let i = 0; i < name.length; i++) { // 遍历该数组
            console.log(name[i]) // 输出数组中每一项
        }
    }
}
1
2
3
4
5
6
7
8
9

2、联合类型数组

var arr: number[] | string[]; // 设置arr为数字数组或字符串数组
var i: number; // 变量i是number类型
arr = [1, 2, 4]; // 数字数组
for (i = 0; i < arr.length; i++) { // 变量该数组
    console.log(arr[i])
}
arr = ["Runoob", "Google", "Taobao"]; // 字符串数组
for (i = 0; i < arr.length; i++) { // 遍历该数组
    console.log(arr[i])
}
1
2
3
4
5
6
7
8
9
10

8 循环结构

1、for循环

示例：计算5的阶乘

var num: number = 5;
var i: number;
var sum: number = 1;
for (i = num; i >= 1; i--) {
    sum *= i;
}
console.log(sum); // 120
1
2
3
4
5
6
7

2、for…in 循环：用于一组值的集合或列表进行迭代输出

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

3、for…of循环：在 ES6 中引入的 for…of 循环，以替代 for…in 和 forEach()，for…of 允许遍历 Arrays（数组）, Strings（字符串）, Maps（映射）, Sets（集合）等可迭代的数据结构等。

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

4、forEach循环

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

5、every循环

let list = [4, 5, 6];
list.every((val, idx, array) => {
    // val: 当前值 
    // idx：当前index 
    // array: Array 
    return true; // Continues 
    // 返回false将停止执行
});
1
2
3
4
5
6
7
8