深入理解TypeScript中的数据类型

一、TS数据类型有哪些

TypeScript是JavaScript的超集，它自身集成了JavaScript的数据类型，同时还增加了更多的数据类型。下面是TypeScript中的一些常用数据类型：

/**
 * TypeScript中的数据类型
 */
const str: string = 'hello';
const num: number = 1;
const bool: boolean = true;
const arr: Array<string> = ['TypeScript', 'React', 'Vue'];
const tuple: [string, number] = ['TypeScript', 1];
const enu: enum = { TypeScript: 1, React: 2, Vue: 3 }
const anyValue: any = 'any';
const voidFun = (): void => { console.log('void function') };
const undefinedVal: undefined = undefined;
const nullVal: null = null;
const symbolVal: symbol = Symbol('symbol')

二、TS数据类型通用的

TypeScript中的数据类型与JavaScript有相通的地方。

1. JavaScript中的变量在没有赋值时是undefined，TypeScript中也相同。

/**
 * 变量未赋值
 */
let undefVar;
console.log(undefVar) // undefined

2. JavaScript中判断数据类型使用typeof，TypeScript中也相同。

/**
 * 判断数据类型
 */
const str: string = 'hello';
console.log(typeof str === 'string'); // true

3. JavaScript中空数组长度为0，TypeScript中也相同。

/**
 * 空数组长度为0
 */
const arr: Array<string> = [];
console.log(arr.length === 0); // true

三、TS数据类型unknown

TypeScript在3.0版本中增加了unknown类型。它与any类型类似, 但是只能赋值给any和unknown。

/**
 * 未知类型
 */
let unknownVal: unknown = 'unknown';
unknownVal = true;
unknownVal = 1;
unknownVal = ['TypeScript', 'React', 'Vue'];
unknownVal = {};
unknownVal = null;

/**
 * 只能赋值给any和unknown
 */
let anyVal: any = unknownVal;
let unknownVal2: unknown = unknownVal;

四、TS数据类型转换

TypeScript中数据类型转换与JavaScript中有所不同。

1. 使用as关键字进行类型转换。

/**
 * 数据类型转换
 */
let num1: number = 1;
let str1: string = num1 as unknown as string;
console.log(str1); // '1'

2. 使用<>或as进行类型转换。

/**
 * 数据类型转换
 */
let num2: number = 2;
let str2: string = <string> <unknown> num2;
console.log(str2); // '2'

五、TS数据类型never

TypeScript中的never类型表示永远不会有返回值。

/**
 * 永远不会有返回值
 */
const neverFun = (): never => {
  while (true) {
    console.log('never');
  }
}

六、TS数据类型有没有对象

在TypeScript中，对象是非常常见的数据类型。

/**
 * 对象
 */
const obj: object = { name: 'TypeScript', age: 3 };
const obj1: {} = { name: 'TypeScript', age: 3 };
const obj2: Record<string, unknown> = { name: 'TypeScript', age: 3 };

七、JS数据类型

TypeScript中的数据类型与JavaScript数据类型有相通之处。

1. 在JavaScript中，字符串是基本数据类型。在TypeScript中，它是一种数据类型。

/**
 * 字符串
 */
const str3: string = 'TypeScript';
console.log(str3); // 'TypeScript'

2. 在JavaScript中，数字是基本数据类型。在TypeScript中，它是一种数据类型。

/**
 * 数字
 */
const num3: number = 3;
console.log(num3); // 3

3. 在JavaScript中，布尔值是基本数据类型。在TypeScript中，它是一种数据类型。

/**
 * 布尔值
 */
const bool3: boolean = true;
console.log(bool3); // true

八、TS基本数据类型

以下是TypeScript中的基本数据类型：

1. string：表示字符串类型。

/**
 * 字符串类型
 */
const str4: string = 'TypeScript';
console.log(str4); // 'TypeScript'

2. number：表示数字类型。

/**
 * 数字类型
 */
const num4: number = 4;
console.log(num4); // 4

3. boolean：表示布尔类型。

/**
 * 布尔类型
 */
const bool4: boolean = true;
console.log(bool4); // true

九、TS类型推断

TypeScript中的类型推断是通过变量的赋值推断出变量的类型。如果变量没有赋值，则变量为unknown类型。

/**
 * 类型推断
 */
let typeInference1 = 'TypeScript';
console.log(typeof typeInference1); // 'string'
let typeInference2;
typeInference2 = 'TypeScript';
console.log(typeof typeInference2); // 'string'

十、TS的类型选取

在TypeScript中，我们可以使用类型选取，只选取对象中需要的属性。

/**
 * 类型选取
 */
interface ObjectTest1 {
  name: string;
  age: number;
  location: string;
}
interface ObjectTest2 {
  name: string;
  age: number;
}

const objTest1: ObjectTest1 = { name: 'TypeScript', age: 3, location: 'China' };
const objTest2: ObjectTest2 = objTest1; // { name: 'TypeScript', age: 3 }