TypeScript基本类型有哪些

虾米哥 阅读:238 2022-06-06 15:06:23 评论:0

ts编译成js的工具

npm install -g typescript
使用命令: tsc example.ts

只执行ts代码,但不编译的工具

1、nodemon , 只要保存代码就会执行,比较推荐

安装:``` npm intall -g nodemon ``` 
使用: ``` nodemon example.ts ``` 

2、ts-node ,每次需要执行ts-node命令

安装:``` npm install -g ts-node ``` 
使用: ``` ts-node example.ts ```   

TypeScript基本类型有哪些

any 类型、number 类型 、boolean 类型 、 数组类型、元组类型、enum 枚举类型、void 类型、null 类型、 undefine 类型、 never 类型

/* any 类型 ,任意类型,表示可以赋予任何类型值*/ 
let any:any  // 等同于let any  
 
/*number 类型 */ 
let num:number = 1; 
 
/* string 类型 */ 
let str:string = 'string' 
 
/* boolean */ 
let boolean:boolean = true; 
 
/* 数组类型 ,表示元素的类型都是一样的*/ 
let arr: number[] = []; // 一般写法 
let arr1: Array<number> = [1, 2]; // 使用泛型,规定数组内容为number类型 
let arr2: Array<string> = ['1', '2']; // 使用泛型,规定数组内容为string类型 
let arr3: Array<boolean> = [true, false]; //使用泛型,规定数组内容为boolean类型 
 
/* 元组类型, 表示每个元素对应位置的类型要相同 */ 
let tuple: [number, string, boolean]; // 正确写法,元素位置类型一一对应 
tuple = [1, 'str', true]; 
// tuple = [1,2,'str']; // 错误写法 
 
/* enum 枚举类型 , 用于定义数值集合 */ 
enum Color { Red, Green, Blue }; 
let c: Color = Color.Red; // 取Red在枚举类型的枚举值0 
console.log(c);  // 输出0 
c = 1.1 //其实可以赋number类型, 但赋值其他类型值是不允许的,Color.Red的值就是number 
 
/* void 类型 , 用于表示函数/方法没有返回值*/ 
function func():void { 
// return 1  // 有返回值是错误的 
return //正确写法,可以不写 
} 
 
/* null 类型, 表示不属于任何类型 */ 
let nu:null  
nu = null //正确赋值 
 
/* undefine 类型 */ 
let und1:any = undefined //这是一般用法,初始化变量为一个未定义的值 
let und2: undefined = undefined //正确赋值 
 
/* never 类型,表示不是以上的所有类型,只能是异常类型*/ 
let x: never; 
let y: number; 
// x = 123; // 运行错误,数字类型不能转为 never 类型 
x = (() => { throw new Error('exception') })(); // never 类型可以赋值给 never类型 
y = (() => { throw new Error('exception') })(); // never 类型可以赋值给 数字类型 
function error(message: string): never { 
throw new Error(message);// 返回值为 never 的函数可以是抛出异常的情况 
} 
function loop(): never { 
while (true) { } // 返回值为 never 的函数可以是无法被执行到的终止点的情况 
}

可能你想为啥没有对象(Object)、数组(Array)、函数(Function)类型,还有两个特殊的对象:正则(RegExp)和日期(Date)

其实这些都是有的,因为ts保留了js的所有特性

TypeScript还可以声明为Object类型,它能被赋予的除了null 类型、 undefine 类型、 never 类型,其他类型都可以 (要理解万物皆对象,嘿嘿)

let obj: Object 
 
obj = function () {} 
console.log(typeof obj);//function 
 
obj = {} 
console.log(typeof obj);//object 
 
obj = [] 
console.log(typeof obj);//object 
 
obj = 1 
console.log(typeof obj);//number 
 
obj = 'str' 
console.log(typeof obj);//string 
 
obj = undefined //报错 
obj = null //报错 

可能你对枚举类型还有很多疑惑,接下来我们一起深入理解枚举

枚举是组织收集有关联变量的一种方式,许多程序语言(如:c / c# / Java)都有枚举数据类型

枚举可以分为数字枚举、字符串枚举、常量枚举、开放式枚举、有静态方法的枚举

数字枚举

enum Color { 
  Red, // 0 
  Green, // 1 
  Blue // 2 
} 
console.log(Color.Red);  // 输出0 
console.log(Color.Green);  // 输出1

以上ts代码被编译成js代码是这样的,就是

var Tristate; 
(function(Tristate) { 
  Tristate[(Tristate['False'] = 0)] = 'False'; 
  Tristate[(Tristate['True'] = 1)] = 'True'; 
  Tristate[(Tristate['Unknown'] = 2)] = 'Unknown'; 
})(Tristate || (Tristate = {})) 
console.log(Tristate); 
//Tristate输出结果如下 
/* { 
  '0': 'False', 
  '1': 'True', 
  '2': 'Unknown', 
  False: 0, 
  True: 1, 
  Unknown: 2 
} */ 
}

你可以通过特定的赋值来改变给任何枚举成员关联的数字,如下例子,我们从 3 开始依次递增

递增规则是:如果不给当前位置的值不给特定值,就会根据上个位置的值+1

enum Color { 
  Red = 3,  
  Green,  
  Blue  
} 
console.log(Color.Red);  // 输出3 
console.log(Color.Green);  // 输出4

其实还能这么玩,对其它值进行一定的计算

enum AnimalFlags { 
  None        = 0, 
  HasClaws    = 1 << 0, 
  CanFly      = 1 << 1, 
  EatsFish    = 1 << 2, 
  Endangered  = 1 << 3, 
  //对以上值进行一定的计算 
  composition  = HasClaws | CanFly | EatsFish | Endangered 
}

字符串枚举

export enum EvidenceTypeEnum { 
  UNKNOWN = '', 
  PASSPORT_VISA = 'passport_visa', 
  PASSPORT = 'passport', 
  SIGHTED_STUDENT_CARD = 'sighted_tertiary_edu_id', 
  SIGHTED_KEYPASS_CARD = 'sighted_keypass_card', 
  SIGHTED_PROOF_OF_AGE_CARD = 'sighted_proof_of_age_card' 
}

这些可以更容易被处理和调试,因为它们提供有意义/可调试的字符串。

你可以使用它们用于简单的字符串比较:

// Where `someStringFromBackend` will be '' | 'passport_visa' | 'passport' ... etc. 
const value = someStringFromBackend as EvidenceTypeEnum; 
 
// Sample use in code 
if (value === EvidenceTypeEnum.PASSPORT) { 
  console.log('You provided a passport'); 
  console.log(value); // `passport` 
}

常量枚举

枚举类型加const关键字,有助于性能的提升,以下代码将会被编译成 var lie = 0;这里编译是因为

不会为枚举类型编译成任何 JavaScript(在这个例子中,运行时没有 Tristate 变量),因为它使用了内联语法。

const enum Tristate { 
    False, 
    True, 
    Unknown 
} 
const lie = Tristate.False;

如果没有const关键字,编译结果是这样的,因此提高了性能

var Tristate; 
(function (Tristate) { 
    Tristate[Tristate["False"] = 0] = "False"; 
    Tristate[Tristate["True"] = 1] = "True"; 
    Tristate[Tristate["Unknown"] = 2] = "Unknown"; 
})(Tristate || (Tristate = {})); 
var lie = Tristate.False;

常量枚举 preserveConstEnums 选项

使用内联语法对性能有明显的提升作用。运行时没有 Tristate 变量的事实,是因为编译器帮助你把一些在运行时没有用到的不编译成 JavaScript。然而,你可能想让编译器仍然把枚举类型编译成 JavaScript,用于如上例子中从字符串到数字,或者是从数字到字符串的查找。在这种情景下,你可以使用编译选项 --preserveConstEnums,它会编译出 var Tristate 的定义,因此你在运行时,手动使用 Tristate['False']Tristate[0]。并且这不会以任何方式影响内联。

有静态方法的枚举有静态方法的枚举

你可以使用 enum + namespace 的声明的方式向枚举类型添加静态方法。如下例所示,我们将静态成员 isBusinessDay 添加到枚举上:

enum Weekday { 
  Monday, 
  Tuesday, 
  Wednesday, 
  Thursday, 
  Friday, 
  Saturday, 
  Sunday 
} 
 
namespace Weekday { 
  export function isBusinessDay(day: Weekday) { 
    switch (day) { 
      case Weekday.Saturday: 
      case Weekday.Sunday: 
        return false; 
      default: 
        return true; 
    } 
  } 
} 
 
const mon = Weekday.Monday; 
const sun = Weekday.Sunday; 
 
console.log(Weekday.isBusinessDay(mon)); // true 
console.log(Weekday.isBusinessDay(sun));

开放式枚举

以下同名的枚举,可以进行合并,不过要注意的是:在有多个声明的enum中,只有一个声明可以省略其第一个enum元素的初始化式,否则会报错

enum Color { 
  Red, 
  Green, 
  Blue 
} 
 
enum Color { 
  DarkRed = 1, 
  DarkGreen, 
  DarkBlue 
}

编译js结果如下:

var Color; 
(function (Color) { 
    Color[Color["Red"] = 0] = "Red"; 
    Color[Color["Green"] = 1] = "Green"; 
    Color[Color["Blue"] = 2] = "Blue"; 
})(Color || (Color = {})); 
(function (Color) { 
    Color[Color["DarkRed"] = 0] = "DarkRed"; 
    Color[Color["DarkGreen"] = 1] = "DarkGreen"; 
    Color[Color["DarkBlue"] = 2] = "DarkBlue"; 
})(Color || (Color = {})); 
console.log(Color); 
//输出结果 
/*  
{ 
  '0': 'DarkRed', 
  '1': 'DarkGreen', 
  '2': 'DarkBlue', 
  Red: 0, 
  Green: 1, 
  Blue: 2, 
  DarkRed: 0, 
  DarkGreen: 1, 
  DarkBlue: 2 
} 
*/

标签:前端
声明

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

关注我们

一个IT知识分享的公众号