查看更多精彩前端资源

---

在我们的上一篇帖子--【广州前端首发】TypeScript核心课程笔记（一）中我们贴出了一段typeScript代码，有些同学一定对其中的语法比较费解，现在我们就一起来学习typeScript语法。
类型

---

为什么要有类型呢 ？使用typeScript的类型定义可以让工具更早的帮我们分析出潜在bug与隐患，我们可以通过一个小例子给大家演示类型的好处与弊端

[JavaScript] 纯文本查看 复制代码

let a = 10;
let b = '20';
let c = 30;
let sum = a + b + c; // 102030

在上面这段js代码中，我们做了一个求和操作。很明显，因为没有类型检测，我们很可能不小心和一个字符串相加，出现bug。

[AppleScript] 纯文本查看 复制代码

let a: number = 10;
let b: string = '20';
let c: number = 30;
let sum: number = a + b + c;

在这段typeScript代码中，我们通过编译此代码，你会发现详细的错误提示，显著的提升了代码的健壮性。当然，缺点就是失去了js的简洁性，增加了代码量。
基本类型

---

number类型
数字类型的变量的只能赋值为数字,不区分整数与小数

[AppleScript] 纯文本查看 复制代码

let num: number = 10;
num = 20;      // 正常
num = 'abc';  // 报错

string类型
字符串类型的变量的只能赋值为字符或字符串

[AppleScript] 纯文本查看 复制代码

let str: string = 'abc';
str = 'cba';    // 正常
str = 123;     // 报错

boolean类型
字符串类型的变量的只能赋值为true或false

[AppleScript] 纯文本查看 复制代码

let bol: boolean = true;
bol = false;    // 正常
bol = 1;         // 报错

undefined类型
undefined类型的变量只能赋值为undefined

[AppleScript] 纯文本查看 复制代码

let undef: undefined;
undef = undefined;   // 正常
undef = '';                 // 报错

null类型
null类型的变量只能赋值为null

[AppleScript] 纯文本查看 复制代码

let empty: null;
empty = null;    // 正常
empty = 0;        // 报错

组合类型(也叫联合类型)
ts为了适当保留js开发的灵活性, 提供了组合类型, 让变量可以赋值为多种类型

[AppleScript] 纯文本查看 复制代码

let num: (number | string);
num = 123;      // 正常
num = '456';    // 正常
num = true;     // 报错

any类型如果组合类型不能满足你, 那么可以选择any任意类型, 不过使用any后你就失去了ts的类型检查

[AppleScript] 纯文本查看 复制代码

let data: any;
num = 123;      // 正常
num = '456';    // 正常
num = true;     // 正常

补充

• 默认情况下undefined与null可以赋值给其他类型, null又可以赋值给undefined类型
• 如果想严谨一些, 可以配置编译选项strictNullChecks为true
  
  

[AppleScript] 纯文本查看 复制代码

let num: number;
let str: string;
let bol: boolean;

num = undefine;  // 正常
str = null;             // 正常
bol = null;            // 正常

数组类型

---

基本类型数组
在基本数据类型后面添加[]即可表示对应类型的数组

[AppleScript] 纯文本查看 复制代码

let numArr: number[] = [1, 2, 3];
let strArr: string[] = ['a', 'b', 'c'];
let bolArr: boolean[] = [true, false];
let undifArr: undefined[] = [undefined];
let nulArr: null[] = [null];

组合类型数组

[AppleScript] 纯文本查看 复制代码

let arr1: (number|string)[] = [1, 2, 'abc', 'cba', 4, 5];
let arr2: (number|boolean)[] = [1, 2, true, false];

任意数组类型

[AppleScript] 纯文本查看 复制代码

let anyArr: any[] = [1, 'abc', true, null, undefined];

函数

---

参数与返回值类型

• 声明形参类型的语法与变量一样,都是 变量名:类型
• 声明返回值类型的语法需要写在小括号的后面 ():类型
  
  

[AppleScript] 纯文本查看 复制代码

function sum(a: number, b: number): number {
        return a + b;
}

sum(10, 20);  // 正常
sum('a', 30);  // 报

参数个数在typescript中会严格检查函数调用时传参的个数是否符合要求

[AppleScript] 纯文本查看 复制代码

function sum(a: number, b: number): number  {
        return a + b;
}

sum(10, 20);       // 正常
sum(5);              // 报错
sum(5, 8, 10);     // 报错

可选参数

• 如果某些参数是可选的, 可以使用?号进行标识, 也可采用es6的默认值语法
• 注意: 可选参数务必定义在形参的最后
  
  

[AppleScript] 纯文本查看 复制代码

function sum(a: number, b?: number, c: number = 50): number  {
        return b? a + b: a;
}

sum(5);                   // 正常
sum(5, 8, 10);          // 正常
sum(5, 8, 10, 20);     // 报错

任意参数与类型
可以通过es6语法接收任意多参数, 并通过数组方式定义参数的类型

[AppleScript] 纯文本查看 复制代码

function sum(...arg: number[]): number {
  return arg.reduce((sum, v) => {
    return sum + v;
  }, 0);
}

sum(1, 2, 3);              // 正常
sum(1, 2, 3, 4, 5);       // 正常
sum(1, 2, 3, 4, 'abc');  // 报错

无返回值如果函数没有返回值, 那么请用void来标识

[AppleScript] 纯文本查看 复制代码

function log(msg): void {
        console.log(msg);
        return 10;                // 报错
}

异常
如果某些函数内部一定会抛出错误, 或者永远不会执行完毕, 请用never来表示

[AppleScript] 纯文本查看 复制代码

function error(msg: string): never {
  msg = `您的程序运行出现异常, 错误信息为: ${msg}`;
        throw new Error(msg);
}

枚举类型

---

枚举是typeScript扩展的一种数据类型, 这种类型可以用来存储有限且不可变的数据
语法与特性

• 枚举类型需要使用新的关键字enum来定义, 语法有点类似与类或接口, 但是作用完全不同
• 枚举类型也算一种对象类型, 定义时首字母最好大写
• 枚举中元素的key必须是字符串, value可以是字符串或数字
  
  

[AppleScript] 纯文本查看 复制代码

enum Gender { man = '男', woman = '女' };
enum Gender2 { man, woman };     // 如果不赋值, 那么会从0开始给他们赋默认值

// 通过key取值
console.log(Gender.man);              // 男
console.log(Gender2.man);            // 0

// 报错, 值不可变
Gender.man = '公';
Gender2.man = 10;

特殊特性
如果元素的value为数字, 那么可以反向获取key

[AppleScript] 纯文本查看 复制代码

// 默认的数字值从0开始, 这里我们也自己指定
enum Directions  { 左 = 37, 上 = 38, 右 = 39, 下 = 40 };

console.log(Directions[37]);            // 左
console.log(Directions[38]);            // 上
// 指定value为字符串
enum Directions  { 左 = 'left', 上 = 'top', 右 = 'right', 下 = 'bottom' };

console.log(Directions.left);           // 报错, 不能通过字符串反向获取key
console.log(Directions.top);           // 报错, 不能通过字符串反向获取key

作用

---

作用1 - 限制变量的赋值范围

• 假如我有一个color变量, 要求这个变量的值只能为'红', '黄',' 蓝', '绿', '紫', 不能为其他
• 像这样的需求我们可以使用枚举来解决
  
  

[AppleScript] 纯文本查看 复制代码

// 先把有限的值定义成枚举类型, 并给每个值取个名字
enum Color {red = '红', yellow = '黄', blue = '蓝', green = '绿', purple = '紫'};

// 然后定义一个变量, 指明这个变量只能存储Color里面的东西
let color: Color = Color.red;

color = Color.yellow;          // 正常
color = '白';                        // 报错
color = '黑';                        // 报错
color = '紫';                        // 报错, 必须用Color给其赋值

作用2 - 定义固定数据, 拟补const不足

• 我们知道enum定义的数据内容是不可变的, 它的表现与const不同
• 如果使用const变量保存一个对象, 那么就不能给变量赋新值, 但是却可以给变量存储的对象的属性赋新值
• 所以要是有一些固定不变的数据, 比如: 周一到周日, 中国所有省, 四季, 人种等等, 我们都可以使用enum来定义
  
  

[AppleScript] 纯文本查看 复制代码

// 他们的默认值为0, 1, 2, 3
enum Season { '春', '夏', '秋', '冬' };

// 枚举有个特性, 如果值为数字, 可以反向取值, 利用这个特性我们可以遍历取出所有值
for(let i = 0; i < 2; i++) {
        console.log(Gender[i]);
}