TypeScript数据类型

93 阅读5分钟

布尔类型(boolean)

let married: boolean=false;

数字类型(number)

let age: number=10;

字符串类型(string)

let firstname: string='zfpx';

数组类型(array)

let arr2: number[]=[4,5,6];
let arr3: Array<number>=[7,8,9];

元组类型(tuple)

  • 在 TypeScript 的基础类型中,元组( Tuple )表示一个已知数量类型的数组
let beijing:[string,number] = ['beijing',5];
beijing[0].length;
beijing[1].toFixed(2);
元组数组
每一项可以是不同的类型每一项都是同一种类型
有预定义的长度没有长度限制
用于表示一个结构用于表示一个列表
const animal:[string,number,boolean] = ['beijing',10,true];

枚举类型(enum)

  • 事先考虑某一个变量的所有的可能的值,尽量用自然语言中的单词表示它的每一个值
  • 比如性别、月份、星期、颜色、单位、学历

1 普通枚举

enum Gender{
    GIRL,
    BOY
}
console.log(`张三是${Gender.BOY}`);
console.log(`李梅梅是${Gender.GIRL}`);

enum Week{
    MONDAY=1,
    TUESDAY=2
}
console.log(`今天是星期${Week.MONDAY}`);

2 常数枚举

  • 常数枚举与普通枚举的区别是,它会在编译阶段被删除,并且不能包含计算成员。
  • 假如包含了计算成员,则会在编译阶段报错
const enum Colors {
    Red,
    Yellow,
    Blue
}

let myColors = [Colors.Red, Colors.Yellow, Colors.Blue];
const enum Color {Red, Yellow, Blue = "blue".length};

任意类型(any)

  • any就是可以赋值给任意类型
  • 第三方库没有提供类型文件时可以使用any
  • 类型转换遇到困难时
  • 数据结构太复杂难以定义
let root:any=document.getElementById('root');
root.style.color='red';
注:这里说一下,上面例子,如果不想用any,vscode会提示HTMLElement | null类型,
    然而此时,下方的root.style.color会报错,因为root不一定会有style,此时可以强转换
    root!.style.color='red';//断言不为空
    说明告诉ts,别废话了,root肯定会有style属性

null 和 undefined

  • null 和 undefined 是其它类型的子类型,可以赋值给其它类型,如数字类型,此时,赋值后的类型会变成 null 或 undefined
  • strictNullChecks
let x: number;
x = 1;
x = undefined;    
x = null;   
注:如果tsconfig.json中strictNullChecks为true,x赋值为null 或 undefined会报错,严格模式会校验住
    strictNullChecks为false则不会

let y: number | null | undefined;
y = 1;
y = undefined;   
y = null;   

void 类型

  • void 表示没有任何类型
  • 当一个函数没有返回值时,TS 会认为它的返回值是 void 类型。
  • 当我们声明一个变量类型是 void 的时候,它的非严格模式下仅可以被赋值为 null 和 undefined;
function greeting(name:string):void {
    console.log('hello',name);
}
greeting('beijing');

never类型

never是其它类型(null undefined)的子类型,代表不会出现的值

10.1

  • 作为不会返回( return )的函数的返回值类型
// 返回never的函数 必须存在 无法达到( unreachable ) 的终点
function error(message: string): never {
    throw new Error(message);
}

// 由类型推论得到返回值为 never
function fail() {
    return error("Something failed");
}

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

10.2 strictNullChecks

  • 在 TS 中, null 和 undefined 是任何类型的有效值,所以无法正确地检测它们是否被错误地使用。于是 TS 引入了 --strictNullChecks 这一种检查模式
  • 由于引入了 --strictNullChecks ,在这一模式下,null 和 undefined 能被检测到。所以 TS 需要一种新的底部类型( bottom type )。所以就引入了 never。
// Compiled with --strictNullChecks
function fn(x: number | string) {
  if (typeof x === 'number') {
    // x: number 类型
  } else if (typeof x === 'string') {
    // x: string 类型
  } else {
    // x: never 类型
    // --strictNullChecks 模式下,这里的代码将不会被执行,x 无法被观察
  }
}

10.3 never 和 void 的区别

  • void 可以被赋值为 null 和 undefined的类型。 never 则是一个不包含值的类型。
  • 拥有 void 返回值类型的函数能正常运行。拥有 never 返回值类型的函数无法正常返回,无法终止,或会抛出异常。

类型推论

  • 是指编程语言中能够自动推导出值的类型的能力,它是一些强静态类型语言中出现的特性
  • 定义时未赋值就会推论成any类型
  • 如果定义的时候就赋值就能利用到类型推论
let username2;
username2 = 10;
username2 = 'beijing';
username2 = null;

包装对象(Wrapper Object)

  • JavaScript 的类型分为两种:原始数据类型(Primitive data types)和对象类型(Object types)。

  • 所有的原始数据类型都没有属性(property)

  • 原始数据类型

    • 布尔值
    • 数值
    • 字符串
    • null
    • undefined
    • Symbol
let name = 'beijing';
console.log(name.toUpperCase());

console.log((new String('beijing')).toUpperCase());
  • 当调用基本数据类型方法的时候,JavaScript 会在原始数据类型和对象类型之间做一个迅速的强制性切换
let isOK: boolean = true; // 编译通过
let isOK: boolean = Boolean(1) // 编译通过
let isOK: boolean = new Boolean(1); // 编译失败   期望的 isOK 是一个原始数据类型

联合类型

  • 联合类型上只能访问两个类型共有的属性和方法
let name4: string | number;
name4 = 3;
name4 = 'beijing';
console.log(name4.toUpperCase());

类型断言

  • 类型断言可以将一个联合类型的变量,指定为一个更加具体的类型
  • 不能将联合类型断言为不存在的类型
let name5: string | number;
(name5 as number).toFixed(3);
(name5 as string).length;
(name5 as boolean);

字符串、数字、布尔值字面量

type Lucky = 1 | 'One'|true;
let foo:Lucky = 'One';

字符串字面量 vs 联合类型

  • 字符串字面量类型用来约束取值只能是某几个字符串中的一个, 联合类型(Union Types)表示取值可以为多种类型中的一种
  • 字符串字面量 限定了使用该字面量的地方仅接受特定的值,联合类型 对于值并没有限定,仅仅限定值的类型需要保持一致