TypeScript的基础类型和高级类型梳理总结

一、基础类型

1、boolean 布尔类型

表示逻辑值,可以是 true 或 false

let isBoolean:boolean = false

2、number 数字类型

表示整数和浮点数(例如 423.14159),不论是十进制、二进制、八进制还是十六进制,都是number类型

let decimal: number = 6;  
let hex: number = 0xf00d;

3、string 字符串类型

表示文本类型的数据,使用单引号或双引号包围

let color: string = "blue";  
color = 'red';

4、array 数组类型

表示一个元素列表,元素类型相同。有两种方式可以定义数组,两种写法是等价的,都可

let list: number[] = [1, 2, 3];  
let list: Array<number> = [1, 2, 3];

5、tuple 元组类型

表示一个已知元素数量和类型的数组,各元素的类型可以不必相同

let x: [string, number] = ['您好!', 666]

6、enum 枚举类型

enum类型是对JavaScript标准数据类型的一个补充,使用枚举类型可以为一组数值赋予友好的名字。在开发中,后端返回的一些类型全是数值,在前端代码中直接使用数据,语义化不明显,也影响阅读,所以使用枚举转换一下更推荐

enum Color {Red = 1, Green = 2, Blue = 4}
let c: Color = Color.Green;  //c就等于 2

7、any 任何类型

当不确定一个变量应该是什么类型的时候,可以使用 any 类型。any 类型是 TypeScript 的一个强大特性,它允许我们在编译时可选择地包含或移除类型检查。但建议尽量不要使用,如果大量使用any,那使用ts的意义就失去了

let notSure: any = 666;

//notSure没有指定具体类型,这里的赋值不会报错,即使notSure初始值是一个number类型
notSure = "maybe a string instead"; 

8、void  没有返回值的函数的返回类型

当一个函数没有返回值时,采用void,如果有返回值,应该写返回值的具体类型

function warnUser(): void {  
    console.log("This is my warning message"); 
    //这个函数没有返回值 
}

9、Null

在 TypeScript 中,null 值有自己的类型 null; null是所有类型的子类型

let n: null = null;

10、Undefined

在 TypeScript 中,undefined 有它专门的类型 undefined,undefined是所有类型的子类型

let u: undefined = undefined; 

11、never

表示的是那些永不存在的值的类型, 例如, never类型是那些总是会抛出异常或根本就不会有返回值的函数表达式或箭头函数表达式的返回值类型; 变量也可能是 never类型,当它们被永不为真的类型保护所约束时。never类型是任何类型的子类型,也可以赋值给任何类型,但除never类型本身,其他的类型都不可以赋值给never类型,包括any

function error(message: string): never {  
    throw new Error(message);  
}

12、Object 对象类型

表示非原始类型的对象类型,如下,参数O 和 lngLat都只接受对象类型数据传入

declare function create(o: object | null): void;
或
funtion getAddress(lngLat:{lng: string, lat: string} | null): string

二、高级类型

1、Intersection Types 交叉类型 

使用 & 分隔不同的类型,表示交叉类型是将多个类型合并为一个类型。这让我们可以把多个类型的成员合并到一个类型里,可以理解为取这些类型的并集

type A = {x: number}
type B = {y: number}
type Combined  = A & B//表示Combined类型必须同时具有x和y属性。

2、union types 联合类型

使用 | 分隔不同的类型,联合类型表示一个值可以是几种类型之一,所以 number | string | boolean 表示一个值可以是 number, string,或 boolean
如果一个值是联合类型,我们只能访问此联合类型的所有类型里共有的成员,可以理解为取 交集

interface Bird {
    fly();
    layEggs();
}

interface Fish {
    swim();
    layEggs();
}

function getSmallPet(): Fish | Bird {
    // ...
}

let pet = getSmallPet();
pet.layEggs(); // okay
pet.swim();    // errors, swim不是共有成员

3、Type Aliases 类型别名

类型别名会给一个类型起个新名字。 类型别名有时和接口很相似,但是可以作用于原始类型,联合类型,元组和字面量。

type Name = string; //用Name 代替原始类型string
type NameResolver = () => string;
type NameOrResolver = Name | NameResolver;
function getName(n: NameOrResolver): Name {//这里的函数返回值是string,因为第一行代码对string进行了别名,所以就可以用Name代替string
    if (typeof n === 'string') {
        return n;
    }
    else {
        return n();
    }
}

类型别名不能出现在声明右侧的任何地方

type Yikes = Array<Yikes>; // error

4、String Literal Types 字符串字面量类型

表示允许指定字符串必须的固定值,和联合类型一起使用,可以实现类似枚举类型的字符串

type SuperAdmin = "admin"
type Easing = "ease-in" | "ease-out" | "ease-in-out"; //与联合类型结合使用

5、Numeric Literal Types 数值字面量类型

与字符串字面量类型类似,数值字面量类型用来约束取值只能是特定的数值。

function rollDice(value: 1 | 2 | 3 | 4 | 5 | 6) {  
    console.log(`Player rolled a ${value}`);  
}

6、Type Guards 类型保护

类型保护就是一些表达式,它们会在运行时检查以确保在某个作用域里的类型。 要定义一个类型保护,我们只需要简单地为一个函数的返回值为类型谓词

pet is Fish就是类型谓词。 谓词为 parameterName is Type这种形式

function isFish(pet: Fish | Bird): pet is Fish {
    return (<Fish>pet).swim !== undefined;
}

还可以用typeof 进行类型保护, TS本身会把typeof识别成类型保护,所以可以直接在代码中使用

function padLeft(value: string, padding: string | number) {
    if (typeof padding === "number") {
        return Array(padding + 1).join(" ") + value;
    }
    if (typeof padding === "string") {
        return padding + value;
    }
    throw new Error(`Expected string or number, got '${padding}'.`);
}

7、Mapped Types 映射类型

它基于旧类型但是以某种方式对每个属性进行修改,这就是映射类型。例如,你可以获取一个类型的所有属性并使其成为只读
 

//旧接口
interface PersonPartial {
    name: string;
    age: number;
}

//映射旧接口,获得新接口
type Readonly<T> = {
    readonly [P in keyof T]: T[P];
}
type ReadonlyPerson = Readonly<Person>;

//新接口等同如下
interface PersonReadonly {
    readonly name: string;
    readonly age: number;
}


8、Conditional Types 条件类型

条件类型是一种表达形式,它类似于 JavaScript 中的三元运算符,用于选择两种类型之一。 条件类型在描述输入与输出类型之间关系的时候非常有用,并且能用来提取复杂类型中的信息。

type IsStringType<T> = T extends string ? true : false;  
  
type A = IsStringType<'hello'>; // type A: true  
type B = IsStringType<number>;  // type B: false

  • 12
    点赞
  • 18
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值