本帖最后由 AreYouGlad 于 2017-12-20 11:52 编辑
在我们的上一篇帖子--【广州前端首发】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; // 报错
字符串类型的变量的只能赋值为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); // 报错
可选参数
[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]);
}
|
|
收藏
淘帖
踩
