JavaScript的內(nèi)置類型 VS TypeScript內(nèi)置類型

除此之外，TypeScript又單獨提出了三種類型，分別是元祖(Tuple)、接口(Interface)、枚舉(Enum)

元祖

元素個數(shù)和類型固定的數(shù)組

type Tuple = [number, string];

接口interface

可以描述函數(shù)、對象、構(gòu)造器的結(jié)構(gòu)

描述對象

interface Person {
    name: string;
    age: number;
}
const personObj: Person = {
    name: 'zhangsan',
    age: 18
}
// 如果對象的屬性不是固定的，可以考慮使用索引簽名進行類型聲明
interface Person {
    name: string;
    age: number;
    [prop: string]: string | number;
}

描述函數(shù)

interface GetDataInterface {
    (name: string):string;
}
const getData: GetDataInterface = (name) => {
    return `${name}你好`
}

描述構(gòu)造器

interface Person {
    name: string;
    age: number;
}
interface PersonConstructor{
    new (name: string, age: number): Person;
}
function createPerson(ctor: PersonConstructor): Person{
    return new ctor('zhangsan', 18);
}
// 使用createPerson案例
class Employee {
    public name: string;
    public age: number;
    constructor(name: string, age: number) {
      this.name = name;
      this.age = age;
    }
}
createPerson(Employee);

interface和type有什么區(qū)別？

枚舉

數(shù)字枚舉

enum DataEnum {
    A,
    B,
    C
}
console.log(DataEnum[0]);//反向映射 輸出 A  
console.log(DataEnum[1]); //反向映射 輸出 B
console.log(DataEnum['A']); //正向映射 輸出 0 

編譯后的代碼

字符串枚舉

enum DataEnum {
    ThisA = 'A',
    ThisB = 'B',
    ThisC = 'C'
}
console.log(DataEnum['ThisA']); // 輸出 A

編譯后的代碼

常量枚舉

• 編譯階段生成的對象會被刪除
• 常量枚舉成員在使用的地方被內(nèi)聯(lián)進來
• 不存在映射關(guān)系，而且只能正向訪問，不能 Directions[0] 這種使用

const enum Directions {
  Up,
  Down,
  Left,
  Right
}
console.log(Directions.Up);

編譯后的代碼

上圖編譯后的代碼是符合ts常量枚舉的概念的，但是你會發(fā)現(xiàn)，當常量枚舉和react、vue結(jié)合使用的時候，編譯后的代碼并不會刪除映射對象，編譯后常量枚舉和普通枚舉沒有區(qū)別，這又是為什么吶？

目前TypeScript受限于babel限制無法支持常量枚舉const enum，Babel是一個語法轉(zhuǎn)換器，是逐個腳步一個個編譯的，無法處理跨文件的源碼更新。例如type.ts文件內(nèi)導出一個常量枚舉，這個常量枚舉被多個文件使用，Babel是單個文件編譯，并不會根據(jù)多個入口對type.ts進行重復編譯，所以導致babel編譯TS時不支持const enum，會將其當初普通enum處理。

怎么讓Babel支持const enum?

Babel V7.15.0+版本，使用 @babel/plugin-transform-typescript插件，配置### optimizeConstEnums為true，可以讓Babel編譯TS時，如果常量枚舉是文件內(nèi)聯(lián)，沒有export導出，會當成常量枚舉進行編譯。如果進行了export導出，同樣還是會當初普通枚舉編譯，這是因為Babel的逐個編譯單個文件特性導致

字面量類型

字面量類型也就是例如 111、'aaaa'、{a: 1}這種值也可以作為類型。其主要分為兩類:

• 第一類是普通的字面量類型，就是111、'aaa'、{a: 1}這種。
• 第二類是模板字面量類型，比如test${string}表示以test開頭的字符串

functon getData(name: `test${string}`){
}

特殊類型

• never 代表不可達，比如函數(shù)拋出異常的時候，就是返回never
• void 代表空，可以是undefined或never
• any 任意類型，任意類型可以復制給它，它也可以賦值給任意類型(never除外)
• unknown 是未知類型，任何類型都可以賦值給它，但是它不可以賦值給別的類型

類型的裝飾

?: 可有可無

readonly: 只讀屬性，不允許修改

interface Person{
    readonly name: string;
    age?: number;
}
type Tuple = [string, number, object?];

以上就是TypeScript類型使用示例剖析的詳細內(nèi)容，更多關(guān)于TypeScript類型剖析的資料請關(guān)注腳本之家其它相關(guān)文章！

最新評論