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

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

元祖

元素個(gè)數(shù)和類(lèi)型固定的數(shù)組

type Tuple = [number, string];

接口interface

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

描述對(duì)象

interface Person {
    name: string;
    age: number;
}
const personObj: Person = {
    name: 'zhangsan',
    age: 18
}
// 如果對(duì)象的屬性不是固定的，可以考慮使用索引簽名進(jìn)行類(lèi)型聲明
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

編譯后的代碼

常量枚舉

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

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

編譯后的代碼

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

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

怎么讓Babel支持const enum?

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

字面量類(lèi)型

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

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

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

特殊類(lèi)型

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

類(lèi)型的裝飾

?: 可有可無(wú)

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

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

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

最新評(píng)論