深入理解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 }