TypeScript基础类型学习

291 阅读4分钟

介绍

TypeScript中最简单的数据元:数字(number)、字符串(string)、布尔值(boolean)等还提供实用性较强的枚举值(enum)

布尔值(boolean)

布尔值仅包含true/false

var bool: boolean = true;
console.log(false == 0); // 报错

数字(number)

在TypeScript中所有数字都是浮点数。除了支持十进制、十六进制,还支持二进制和八进制。可表示最大值:1.79e+308

var num: number = 12; // 12
var hexLiteral: number = 0xf00d; // 61453
var binaryLiteral: number = 0b1010; // 10
var octalLiteral: number = 0o744; // 484

字符串(string)

可以处理网页或服务器端的文本数据。

  • 可以使用单引号('')或双引号("")
  • 可以使用模板字符串,可以定义多行文本和内嵌表达式,以反引号包围(``),并且以${expr}形式嵌入表达式。
var stuName: string = "张三";
var desc: string =  `${stuName} 同学你好,欢迎来到这里!`;
var tip: string = `同学你好,欢迎来到这里!
hhh
同学你好,欢迎来到这里!
同学你好,欢迎来到这里!`;
console.log(desc); // 张三 同学你好,欢迎来到这里!
console.log(tip); 
/** tip输出
    同学你好,欢迎来到这里!
    hhh
    同学你好,欢迎来到这里!
    同学你好,欢迎来到这里!
 */

数组(array)

定义数组的方法

  • 直接在元素类型后面接上 []
  • 使用数组泛型 Array<元素类型>
// 方式一
var arrNum: number[] = [1,2,3];
var arrStr: string[] = ['1,2,3','23','你好'];
// 方式二
var arrBool: Array<boolean> = [true,false];

注:元素类型与数组元素类型一一对应

元组(Tuple)

元组类型允许表示一个已知元素数量和类型的数组,各元素的类型不必相同。是数组中的一种。

var tulpe: [number, string, boolean] = [12, '12', true];

var tupleX: [string, boolean, string];
tupleX = ['下标0', true, '正常']; // tupleX = [1, true]; // 报错
console.log(tupleX); // ["下标0", true, "正常"]
console.log(tupleX[0]); // 下标0

注:

  • numberstring类型有toString
  • 访问越界的元素时,会使用联合类型替代

枚举(enum)

枚举是对JS标准数据类型的一个补充,使用枚举可以为一组数值赋予友好的名字。
不支持boolean

  • 手动赋值
    支持number/string/number+string
enum Color {Red="红色", Yellow="黄色", Blue="蓝色"};
var c: Color = Color.Red;
console.log(c); // 红色
  • 手动为部分成员赋值(官网写得支持<_>!!!)
    支持number类型,不支持string
// Enum member must have initializer 枚举成员必须具有初始值设定项
enum ColorX {Red="红色", Yellow, Blue="蓝色"};

enum Color {Red=1, Green='false', Blue=2}
var c: Color = Color.Green;
console.log(c); // false
  • 得知值,获得映射后的名字
enum Color {Red=1, Green='false', Blue=2}
var cN: string = Color[2];
console.log(cN); // Blue

任意类型(any)

不希望类型检查器对这些值进行检查而是直接让他们通过编译阶段的检查。例如用户输入的内容或滴三方代码库。

// 包含了不同的类型的数据
var any: any[] = [1, '你好', true];
console.log(any[1]); // 你好

var x: any;
x = 4;
x = true;
x = '你你你';
console.log(x); // 你你你

void类型

当一个函数没有返回值时,设置其返回类型为void

function warnMes(): void {
  console.log('warn');
}
warnMes(); // warn

声明一个 void 类型的变量并没有什么作用,相当于为其赋值undefinednull

var unusable: void = undefined;

Null 和 Undefined

  • nullundefined都有各自的类型,分别为nullundefined。和void相似,本身类型用处不是很大。
  • 默认情况下nullundefined是所有类型的子类型。就是说可以把nullundefined赋值给number类型的变量。
    指定了 --strictNullChecks标记,null和undefined只能赋值给void和它们各自。
  • 传入一个 stringnullundefined,你可以使用联合类型string | null | undefined

Never

  • never类型表示的是那些永不存在的值的类型。
  • never类型是那些总是会抛出异常根本就不会有返回值的函数表达式或箭头函数表达式的返回值类型。
  • never类型是任何类型的子类型,也可以赋值给任何类型。除never本身可以为自己赋值外,没有类型可以为其赋值(没有类型是never类型的子类型)。any类型也不可以为never类型赋值。
// 返回never的函数必须存在无法达到的终点
function error(message: string): never {
    throw new Error(message);
}

// 推断的返回值类型为never
function fail() {
    return error("Something failed");
}

// 返回never的函数必须存在无法达到的终点
function infiniteLoop(): never {
    while (true) {
    }
}

Object

object表示非原始类型,也就是除了numberstringbooleansymbolnullundefined之外的类型。使用object类型,就可以更好的表示object.create这样的API。

declare function create(o: object | null): void;

create({ prop: 0 }); // OK
create(null); // OK

create(42); // Error
create("string"); // Error
create(false); // Error
create(undefined); // Error

类型断言

类型断言好比其它语言里的类型转换,但是不进行特殊的数据检查和解构。 它没有运行时的影响,只是在编译阶段起作用。

  • "尖括号" 语法
let someValue: any = "this is a string";

let strLength: number = (<string>someValue).length;
  • as 语法
let someValue: any = "this is a string";

let strLength: number = (someValue as string).length;

注:当你在TypeScript里使用JSX时,只有 as 语法断言是被允许的。

关于let

let 关键字是JavaScript的一个新概念,TypeScript实现了它。很多常见的问题都可以通过使用 let 来解决,所以尽可能地使用let来代替var吧。
参考官方文档,xixixi^_^