Angular学习笔记55:TypeScript基础 -- 数据类型

Angular 是一个用 HTML 和 TypeScript 构建客户端应用的平台与框架并且 Angular 本身就是用 TypeScript 写成的。

所以学习一些TypeScript相关的知识是非常重要的。

先说说TypeScript的主要特征

  1. 免费开源
  2. 基于 ECMAScript 标准进行扩展
  3. 新增了可选静态类型,类,模块
  4. 经过编译以后成为可读的,符合 ECMAScript 规范的JavaScript
  5. 跨平台
  6. 可以和 JavaScript 代码一起运行

TypeScript的基本类型

  1. boolean(布尔)类型:
const isShow: boolean = false;
  1. number(数字)类型:
const a: number = 1;
const b: number = 1_000; // === 1000
  1. string(字符串)类型:
    在这里可以使用双引号(")或者单引号(’)标示字符串
let a: string = "Mr a.";
let b: string = 'Mr b.';

还可以使用模版字符串,可以定义多行文本和内嵌表达式,是由反引号表示,并使用$进行插值表达

let a: string = "Mr a.";
let b: string = 'Mr b.';
let message1: string = `This is ${a} and ${b}`;
let message2: string = 'This is ' + a + ' and ' + b;

注意:上述代码中,message1 和 message2 的值是一样的。

  1. null(一个表明是null值的特殊关键字)

注意:大小写敏感,不能写成:NULL 或者 Null。

  1. undefined(变量未定义时的属性)
  2. symbol (ES6新添加的一种类型,类型的实例唯一且不可以改变)
const symbol1 = Symbol('Hello World');
const symbol2 = Symbol('Hello World');
console.log(symbol1===symbol2); // false

因为 symbol 是唯一的,所以symbol1,symbol2无论如何都不会相等,在项目开发中,常量使用 symbol 值最大的好处是在其他的任何值都不可能有项目的值,可以保证在特定的变量或者特定的switch 语句按照预想的方式工作。

  1. object(对象,存放值的命名容器)
  2. Array(数组)

定义数组的两种方式
在元素类型后面跟上[],并且由此表示此类型的元素组成的数组

let list: number[] = [1, 2, 3];

使用数组泛型,Array<元素类型>

let list: Array<number> = [1, 2, 3];

类型断言

泛型

在项目中,大部分时候,设计的某一个功能可能需要支持多种数据类型,而不是局限于某一种类型,泛型用于提高代码的重用性。

  1. 泛型函数

创建一个泛型函数,sayHello 函数,这是一个简单的函数,直接将参数值作为返回值。

当需要传入一个数字类型的时候,函数为

public function sayHello(arg: number): number{
    return arg;
}

但是突然需求改成需要传入一个字符串,就会变成

public function sayHello(arg: string): string{
    return arg;
}

也可以使用 any 类型来表示这种混乱

public function sayHello(arg: any): any{
    return arg;
}

但是any类型并不能准确的表达出函数的返回值与参数值相同、类型相同。

此时就可以使用泛型变量 T, T 代表用户传入的类型,类型既可以是number,也可以是string,也可以使用 T 作为函数的返回类型。这样就达到了返回值与参数值的类型相同的目的,保持函数表达的准确性。

public function sayHello<T>(arg: T): T{
    return arg;
}

使用泛型函数

使用泛型函数有两种方式

  1. 使用尖括号进行类型表达
let world = sayHello<string>('hello World');
  1. 使用类型推断(什么都不做)

TypeScript的编译器会根据传入的参数类型自动判断 T 的数据类型

let world = sayHello('hello World');

这个时候,编译器会知道函数的参数类型就是 string 类型的,同样,返回的类型也就是string了。

枚举类型

在项目开发中,有时候会和后端开发约定某个业务的状态值: 代办状态是0,申请开发状态是1, 完成状态是2,这样的纯数字会使代码缺乏可读性,此时就可以使用枚举类型,从而提高代码的可读性。

TypeScript 支持基于数字枚举和字符串的枚举

  1. 数字枚举
enum taskStatus {
    backLog,
    applyDev,
    done,
}

实际开发中,就可以使用taskStatus.backLog 代表原来的数字 0 了。

  • 小技巧
    当在使用数字枚举时,如果第一个枚举的变量没有赋值,那么第一个变量的值就是0,后面的变量依次递增。如果第一个枚举的变量的2,或者其他数字,其他的变量没有赋值,那么第一个以后的变量就为第一个变量值依次递增。

例如,对backLog赋值为4,那其他的值为5,6

enum taskStatus {
    backLog = 4,
    applyDev,  // 5
    done,      // 6
}
  1. 字符串枚举

在一个字符串枚举中,为了可读性,所有成员必须是字符串字面量。

enum taskStatus {
    backLog = 'backLog',
    applyDev = 'applyDev',
    done = 'done',
}
  1. 反向映射

反向映射仅限于 数字类型的枚举

例如设定一个枚举:

export enum TaskStatus {
  a, // 0
  b, // 1
  c, // 2
}

此时输出:

console.log(TaskStatus.a);  // 0
console.log(TaskStatus[0]); // 'a'

注意: 字符串枚举没有反向映射

在Angular中,创建一个枚举类型的数据

使用 cli 命令创建,执行命令:

ng g enum taskStatus

或者

ng generate enum taskStatus

结果

wujiayudeMacBook-Pro:demo-test wjy$ ng generate enum taskStatus
CREATE src/app/task-status.enum.ts (27 bytes)

打开文件以后,如下:

export enum TaskStatus {
}

此时就可以在这个文件中添加成员变量了。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值