Typescript常用类型(一)

TypeScript简介

  1. TypeScript是JavaScript的超集。
  2. 它对JS进行了扩展,向JS中引入了类型的概念,并添加了许多新的特性。
  3. TS代码需要通过编译器编译为JS,然后再交由JS解析器执行。
  4. TS完全兼容JS,换言之,任何的JS代码都可以直接当成JS使用。
  5. 相较于JS而言,TS拥有了静态类型,更加严格的语法,更强大的功能;TS可以在代码执行前就完成代码的检查,减小了运行时异常的出现的几率;TS代码可以编译为任意版本的JS代码,可有效解决不同JS运行环境的兼容问题;同样的功能,TS的代码量要大于JS,但由于TS的代码结构更加清晰,变量类型更加明确,在后期代码的维护中TS却远远胜于JS。

类型注解
代码示例

let name:string = '张三'

注:代码中 :number 就是类型注解。类型注解约束了只能给该变量赋值该类型的值

常用类型

类型 描述
number 任意数字
string 任意字符串
boolean 布尔值true或false
字面量 限制变量的值就是该字面量的值
any 任意类型
unknown 类型安全的any
void 没有值(或undefined)
never 不能是任何值
object 任意的JS对象
array 任意JS数组
tuple 元素,TS新增类型,固定长度数组
enum 枚举,TS中新增类型

原始类型
number/string/boolean/null/undefined/symbol
特点:可完全按照 JavaScript 中的名称来书写

let age: number = 18;
let username: string = '张三';
let isMerry: boolean = false;
let unique: Symbol = Symbol('shuiruohanyu');

字面量声明

let a: 10;
a = 10;

可以使用 | 来连接多个类型(联合类型)

let b: "male" | "female";
b = "male";
b = "female";

let c: boolean | string;
c = true;
c = 'hello';

any
any 表示的是任意类型,一个变量设置类型为any后相当于对该变量关闭了TS的类型检测

// 使用TS时,不建议使用any类型
// let d: any;

声明变量如果不指定类型,则TS解析器会自动判断变量的类型为any (隐式的any)

let d;
d = 10;
d = 'hello';
d = true;

注意:开发中要尽量少用any,当值的类型为any时,可以对该值进行任意操作,并且不会有代码提示

unknown
表示未知类型的值

let e: unknown;
e = 10;
e = "hello";
e = true;
let s:string;
// d的类型是any,它可以赋值给任意变量
// s = d;
e = 'hello';
// unknown 实际上就是一个类型安全的any
// unknown类型的变量,不能直接赋值给其他变量
if(typeof e === "string"){
    s = e;
}

类型断言
可以用来告诉解析器变量的实际类型
语法:变量 as 类型<类型>变量

s = e as string;
s = <string>e; //不常用,了解即可

void
用来表示空,以函数为例,就表示没有返回值的函数

function fn(): void{
}

never
表示永远不会返回结果

function fn2(): never{
    throw new Error('报错了!');
}

类型别名
当一个复杂类型或者联合类型过多或者被频繁使用时,可以通过类型别名来简化该类型的使用
用法:type名称 = 具体类型

type StrArray = Array<number | string>;
let arr: StrArray = [1, 2, '3'];

以上代码中,type作为创建自定义类型的关键字

  • 类型别名可以使任意合法的变量名称
  • 推荐大驼峰的命名写法
posted @ 2022-07-27 22:02  何萌昊  阅读(62)  评论(0)    收藏  举报