黑马程序员技术交流社区

标题: 【广州前端首发】TypeScript核心课程笔记（二） [打印本页]

---

作者: AreYouGlad    时间: 2017-12-13 14:40
标题: 【广州前端首发】TypeScript核心课程笔记（二）

查看更多精彩前端资源

---

在我们的上一篇帖子--【广州前端首发】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);

}

---

作者: AreYouGlad    时间: 2017-12-13 17:44

---

欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2