【TypeScript】003-原始数据类型与任意值

阳光穿透心脏的1/2处 2023-10-03 06:49 30阅读 0赞

### 文章目录 ###

*  二、基础
 *   *  1、原始数据类型
     *   *  布尔值
         *  数值
         *  字符串
         *  空值
         *  Null 和 Undefined
     *  2、任意值
     *   *  什么是任意值类型
         *  任意值的属性和方法
         *  未声明类型的变量

# 二、基础 #

## 1、原始数据类型 ##

> JavaScript 的类型分为两种：原始数据类型（[Primitive data types][]）和对象类型（Object types）。
> 
> 原始数据类型包括：布尔值、数值、字符串、`null`、`undefined` 以及 ES6 中的新类型 [`Symbol`][Symbol] 和 ES10 中的新类型 [`BigInt`][BigInt]。
> 
> 本节主要介绍**前五种**原始数据类型在 TypeScript 中的应用。

### 布尔值 ###

布尔值是最基础的数据类型，在 TypeScript 中，使用 `boolean` 定义布尔值类型：

let isDone: boolean = false;

注意，使用构造函数 `Boolean` 创造的对象**不是**布尔值：

let createdByNewBoolean: boolean = new Boolean(1); // 返回的是一个Boolean对象！boolean是基本类型！
    
    // Type 'Boolean' is not assignable to type 'boolean'.
    // 'boolean' is a primitive, but 'Boolean' is a wrapper object. Prefer using 'boolean' when possible.

事实上 `new Boolean()` 返回的是一个 `Boolean` 对象：

let createdByNewBoolean: Boolean = new Boolean(1); // 这么写是对的！

直接调用 `Boolean` 也可以返回一个 `boolean` 类型：

let createdByBoolean: boolean = Boolean(1); // 这么写是对的！

在 TypeScript 中，`boolean` 是 JavaScript 中的**基本类型**，而 `Boolean` 是 JavaScript 中的**构造函数**。其他基本类型（除了 `null` 和 `undefined`）一样，不再赘述。

### 数值 ###

使用 `number` 定义数值类型：

let decLiteral: number = 6;
    let hexLiteral: number = 0xf00d;
    // ES6 中的二进制表示法
    let binaryLiteral: number = 0b1010;
    // ES6 中的八进制表示法
    let octalLiteral: number = 0o744;
    let notANumber: number = NaN;
    let infinityNumber: number = Infinity;

编译结果：

var decLiteral = 6;
    var hexLiteral = 0xf00d;
    // ES6 中的二进制表示法
    var binaryLiteral = 10;
    // ES6 中的八进制表示法
    var octalLiteral = 484;
    var notANumber = NaN;
    var infinityNumber = Infinity;

其中 `0b1010` 和 `0o744` 是 [ES6 中的二进制和八进制表示法][ES6]，它们会被编译为十进制数字。

### 字符串 ###

使用 `string` 定义字符串类型：

let myName: string = 'Tom';
    let myAge: number = 25;
    
    // 模板字符串
    let sentence: string = `Hello, my name is ${
          myName}.
    I'll be ${
          myAge + 1} years old next month.`;

编译结果：

var myName = 'Tom';
    var myAge = 25;
    // 模板字符串
    var sentence = "Hello, my name is " + myName + ".
    I'll be " + (myAge + 1) + " years old next month.";

注意 [ES6 中的模板字符串][ES6 1]的定义，`${expr}` 用来在模板字符串中嵌入表达式。

### 空值 ###

JavaScript 没有空值（Void）的概念，在 TypeScript 中，可以用 `void` 表示没有任何返回值的函数：

function alertName(): void {
        
        alert('My name is Tom');
    }

声明一个 `void` 类型的变量没有什么用，因为你只能将它赋值为 `undefined` 和 `null`（只在 --strictNullChecks 未指定时）：

let unusable: void = undefined;

### Null 和 Undefined ###

在 TypeScript 中，可以使用 `null` 和 `undefined` 来定义这两个原始数据类型：

let u: undefined = undefined;
    let n: null = null;

与 `void` 的区别是，`undefined` 和 `null` 是所有类型的子类型。也就是说 `undefined` 类型的变量，可以赋值给 `number` 类型的变量：

// 这样不会报错
    let num: number = undefined;
    
    // 这样也不会报错
    let u: undefined;
    let num: number = u;

而 `void` 类型的变量不能赋值给 `number` 类型的变量：

let u: void;
    let num: number = u;
    
    // Type 'void' is not assignable to type 'number'.

## 2、任意值 ##

> 任意值（Any）用来表示允许赋值为任意类型。

### 什么是任意值类型 ###

如果是一个普通类型，在赋值过程中改变类型是不被允许的：

let myFavoriteNumber: string = 'seven';
    myFavoriteNumber = 7;
    
    // index.ts(2,1): error TS2322: Type 'number' is not assignable to type 'string'.

但如果是 `any` 类型，则允许被赋值为任意类型。

let myFavoriteNumber: any = 'seven';
    myFavoriteNumber = 7;

### 任意值的属性和方法 ###

在任意值上访问任何属性都是允许的：

let anyThing: any = 'hello';
    console.log(anyThing.myName);
    console.log(anyThing.myName.firstName);

也允许调用任何方法：

> 任意值可能是任意类型，所以可以被当作任意类型使用，只是可能为空罢了！

let anyThing: any = 'Tom';
    anyThing.setName('Jerry');
    anyThing.setName('Jerry').sayHello();
    anyThing.myName.setFirstName('Cat');

可以认为，**声明一个变量为任意值之后，对它的任何操作，返回的内容的类型都是任意值**。

### 未声明类型的变量 ###

**变量如果在声明的时候，未指定其类型，那么它会被识别为任意值类型**：

> 这里和**类型推断**并没有冲突，因为这里声明的时候没有赋值，因此推断为任意类型！

let something; // 这里没有直接赋值，因此类型推断为任意类型，如果直接赋值为“seven”则推断为字符串类型！
    something = 'seven';
    something = 7;
    
    something.setName('Tom');

等价于：

let something: any;
    something = 'seven';
    something = 7;
    
    something.setName('Tom');

[Primitive data types]: https://developer.mozilla.org/en-US/docs/Glossary/Primitive
[Symbol]: http://es6.ruanyifeng.com/#docs/symbol
[BigInt]: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/BigInt
[ES6]: http://es6.ruanyifeng.com/#docs/number#%E4%BA%8C%E8%BF%9B%E5%88%B6%E5%92%8C%E5%85%AB%E8%BF%9B%E5%88%B6%E8%A1%A8%E7%A4%BA%E6%B3%95
[ES6 1]: http://es6.ruanyifeng.com/#docs/string#%E6%A8%A1%E6%9D%BF%E5%AD%97%E7%AC%A6%E4%B8%B2