当前位置:网站首页>Typescript基本类型---上篇

Typescript基本类型---上篇

2022-08-11 08:48:00 前端小白在前进

ts专栏 ===> typescript入门到拔高(持续更新中…)

类型声明

  • 类型声明是TS非常重要的一个特点
  • 通过类型声明可以指定TS中变量(参数、形参)的类型
  • 指定类型后,当为变量赋值时,TS编译器会自动检查值是否符合类型声明,符合则赋值,否则报错
  • 简而言之,类型声明给变量设置了类型,使得变量只能存储某种类型的值
  • 语法:
let 变量: 类型;

let 变量: 类型 =;

function fn(参数: 类型, 参数: 类型): 类型{
    
    ...
}

自动类型判断

  • TS拥有自动的类型判断机制
  • 当对变量的声明和赋值是同时进行的,TS编译器会自动判断变量的类型
  • 所以如果你的变量的声明和赋值时同时进行的,可以省略掉类型声明

类型

类型例子描述
number1, -33, 2.5任意数字
string‘hi’, “hi”任意字符串
booleantrue、false布尔值true或false
字面量其本身限制变量的值就是该字面量的值
any*任意类型
unknown*类型安全的any
void空值(undefined)没有值(或undefined)
never没有值不能是任何值

number

声明一个变量a,同时指定它的类型是number

let a : number;

a的类型设置为了number,在以后使用a的过程中a的值只能是数值

a = 33;
// a = 'hello' 此行代码会报错,因为变量a的类型是number,不能赋值字符串

string

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

let fullName: string = `Bob Bobbington`;
let age: number = 37;
let sentence: string = `Hello, my name is ${
      fullName}.I'll be ${
      age + 1} years old next month.`;

boolean

let isDone: boolean = false;

字面量

可以直接使用字面量进行类型声明

let c : 10
c= 10
console.log(typeof c)  //number

也可以使用字面量去指定变量的类型,通过字面量可以确定变量的取值范围,可以使用|连接多个类型(联合类型),这里的|是“”的意思

let color: 'red' | 'blue' | 'black';
let num: 1 | 2 | 3 | 4 | 5;

any

  1. any表示任何类型,一个变量设置类型为any后相当于关闭了ts的类型检测
  2. 不建议使用
let a : any;
let d: any = 4;
d = 'hello';
d = true;

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

let e;
e = 'hello'
e = 123

unknown

unknown 表示未知类型的值

let f : unknown
f  = 10
f = "hello"

unknown 实际上就是一个类型安全的any
unknown类型的变量,不能直接赋值给其他变量,如图所示:

在这里插入图片描述

在这里我们定义一个string类型的变量,没有赋值,随后定义了f,我们直接将f赋值给s,直接会报错,这就是因为unknown类型的变量,不能直接赋值给其他变量
我们需要给f指定类型,这样的话才不会报错,实例代码如下:

if (typeof f === 'string') {
    
    s = f
}

但是在我们的实际书写代码的时候,编译器一旦遇到unknown类型的变量时便无法解析,我们一直if判断未免不会感到麻烦,这就引入了一个名词类型断言

类型断言

定义 :用来告诉解析器变量的实际类型

语法: 变量 as 类型<类型>变量

s = f as string
s = <string>f

void

在我们书写函数的时候都知道函数都可以去返回值的,在书写函数的时候:void用来表示空,以函数为例,就表示没有返回值的函数

function fn() : void {
    

}
//es6箭头函数
const fn1 = () :void =>{
    
    
}

never

never表示永远不会返回结果(undefined都不会返回),在我们学习js的时候都学过抛出异常这个函数,这个函数什么都不返回,就是提示报错。

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

在书写代码时,当我们需要报错的时候只要一调用这个函数,就会报错,这就体现了ts的严谨性!

小结

通过ts基本类型的上篇学习,就可以感受到ts书写代码的严谨性,ts在运用到大型项目中非常的实用,在维护的过程中非常的便利,通过学习基本类型就可以感觉到ts比js更加的细节!

原网站

版权声明
本文为[前端小白在前进]所创,转载请带上原文链接,感谢
https://blog.csdn.net/m0_52040370/article/details/126190258