TypeScript查漏补缺(基础类型)

简介: TypeScript查漏补缺(基础类型)

前言

TypeScript 入门教程看完了,大部分都按自己的理解来做了下笔记输出。但是,总感觉有遗漏的知识点。于是,找了一些大佬的博客,来查漏补缺一下。(但是这里只记录一下基本类型的,因为其他部分暂时看的还有点云里雾里)

基础类型

主要补充之前的笔记中没有的讲到的类型。

unknown类型

unknown类型是any类型对应的安全类型。

所有类型都可以赋值给any,也可以赋值给unknown

// unknown
let myunknown: unknown

myunknown = 123
myunknown = 'hello'

// any
let myany: any

myany = 123
myany = 'hello'

// number
let mynumber: number

mynumber = 123
mynumber = 'hello'  // 报错:不能将类型“string”分配给类型“number”。

any类型能被赋值给任意类型(anyunknownnumber等,unknown类型只能被赋值给unknownany类型)

// unknown
let myunknown: unknown

let value1: unknown = myunknown
let value2: any = myunknown
let value3: number = myunknown  // 报错:不能将类型“unknown”分配给类型“number”。


// any
let myany: any

let value4: unknown = myany
let value5: any = myany
let value6: number = myany 

any类型的值进行操作无需检查,unknown类型需要检查

// unknown
let myunknown: unknown
console.log(myunknown.name) // 报错:类型“unknown”上不存在属性“name”。

// any
let myany: any
console.log(myany.name)

上面的例子简单讲一下本人的理解:任意类型any顾名思义,值可以是任意类型,也就包括是对象,而对象可能会有name,所以就不会报错。但是,unknown类型就会不知道该类型究竟存储了什么类型的值,虽然它也可能是对象,但是为了安全着想,会报错。unknown类型是any类型对应的安全类型。

void类型

void类型表示没有任何类型。一般用来声明没有返回值的函数。(实际上,返回undefinednull也是可行的,void类型更像是不会返回有用的值)

function sayHello(): void {
    console.log('Hello')
}

sayHello()

但是,这里又有一个疑问:函数没有返回值时,默认返回undefined

那么,声明函数时的void类型和undefined类型有什么区别呢?

返回值为undefined类型必须有返回值

虽然函数没有返回值时,默认返回undefined,但是当我们指定函数的返回值为undefined类型时,没有返回值会报错。

function sayHello(): void {
    console.log('Hello')
}

console.log(sayHello())


function sayHi(): undefined {
    console.log('Hi')
}

undefined能被赋值给void,但void不能赋值给undefined

void类型不能赋值给undefined这是符合正常的情况的:即只能赋值给自己和any类型

function sayHello(): void {
    console.log('Hello')
}

const s1: undefined = sayHello()    // 报错
const s2: void = sayHello()
const s3: null = sayHello()         // 报错

但是,有例外情况:undefined可以被赋值给void

const s1: undefined = undefined
const s2: void = undefined

顺带提一下:nullundefined的关系还是依然难解难分。因为nullundefined都能被赋值给任意类型的变量。

const s1: null = undefined
const s2: undefined = null 


let num: number;
let str: string;

num = null;
str = undefined;

never类型

never类型表示永不存在的值的类型。如抛出异常或不会有返回值的函数的返回值类型。

也就是说:如果看到never类型,很有可能是代码出问题了。

function errFunc(): never {
    throw new Error('clz')
}

function infiniteLoop(): never {
    while (true) { }
}

可以看下官方提示(VSCode翻译版)

那么,never类型有什么用途呢?毕竟按上面的写法的话,就像是只能手动制造bug一样。
在TS中,可以利用never类型来实现详细的检查

实例:

type Nickname = string | number

function checkNickname(nickname: Nickname) {
    if (typeof nickname === 'string') {
        console.log(`你的昵称是string类型${nickname}`)
    } else if (typeof nickname === 'number') {
        console.log(`你的昵称是number类型${nickname}`)
    } else {
        throw new Error('请检查类型')
    }
}

checkNickname('赤蓝紫')

checkNickname(123)

checkNickname(true)     

从上面的例子中,可以看到checkNickname只是接受stringnumber类型,当我们传boolean类型的时候,会在编译期间报错。

但是,当同事修改Nickname的类型为string | number | boolean时,而且没修改checkNickname的逻辑的话,就会出问题。

可以发现:我们传参为boolean时,会在运行时抛出我们自定义的错误,但是再编译时没法检测出问题。这时候就能利用never来实现编译时就检测出问题。

上面的例子中,else分支的nickname会被收窄为boolean类型,而boolean类型无法被赋值给never类型,所以会出现编译错误,就能够提前检测出错误,避免很多没必要的问题。

使用never类型能够避免新增联合类型,但是没有对应实现的情况

参考链接:

目录
相关文章
|
2月前
|
JavaScript
typeScript进阶(9)_type类型别名
本文介绍了TypeScript中类型别名的概念和用法。类型别名使用`type`关键字定义,可以为现有类型起一个新的名字,使代码更加清晰易懂。文章通过具体示例展示了如何定义类型别名以及如何在函数中使用类型别名。
39 1
typeScript进阶(9)_type类型别名
|
2月前
|
JavaScript
typeScript基础(2)_any任意值类型和类型推论
本文介绍了TypeScript中的`any`任意值类型,它可以赋值为其他任何类型。同时,文章还解释了TypeScript中的类型推论机制,即在没有明确指定类型时,TypeScript如何根据变量的初始赋值来推断其类型。如果变量初始化时未指定类型,将被推断为`any`类型,从而允许赋予任何类型的值。
55 4
|
26天前
|
JavaScript 前端开发 安全
深入理解TypeScript:增强JavaScript的类型安全性
【10月更文挑战第8天】深入理解TypeScript:增强JavaScript的类型安全性
41 0
|
26天前
|
JavaScript 前端开发 开发者
深入理解TypeScript:类型系统与实用技巧
【10月更文挑战第8天】深入理解TypeScript:类型系统与实用技巧
|
2月前
|
JavaScript
typeScript基础(5)_对象的类型-interfaces接口
本文介绍了TypeScript中接口(interfaces)的基本概念和用法,包括如何定义接口、接口的简单使用、自定义属性、以及如何使用`readonly`关键字定义只读属性。接口在TypeScript中是定义对象形状的重要方式,可以规定对象的必有属性、可选属性、自定义属性和只读属性。
38 1
|
2月前
|
存储 JavaScript
typeScript进阶(11)_元组类型
本文介绍了TypeScript中的元组(Tuple)类型,它是一种特殊的数组类型,可以存储不同类型的元素。文章通过示例展示了如何声明元组类型以及如何给元组赋值。元组类型在定义时需要指定数组中每一项的类型,且在赋值时必须满足这些类型约束。此外,还探讨了如何给元组类型添加额外的元素,这些元素必须符合元组类型中定义的类型联合。
44 0
|
2月前
|
JavaScript
typeScript进阶(10)_字符串字面量类型
本文介绍了TypeScript中的字符串字面量类型,这种类型用来限制变量只能是某些特定的字符串字面量。通过使用`type`关键字声明,可以确保变量的值限定在预定义的字符串字面量集合中。文章通过示例代码展示了如何声明和使用字符串字面量类型,并说明了它在函数默认参数中的应用。
36 0
|
9天前
|
JavaScript 开发者
在 Babel 插件中使用 TypeScript 类型
【10月更文挑战第23天】可以在 Babel 插件中更有效地使用 TypeScript 类型,提高插件的开发效率和质量,减少潜在的类型错误。同时,也有助于提升代码的可理解性和可维护性,使插件的功能更易于扩展和升级。
|
21天前
|
JavaScript 前端开发
TypeScript【类型别名、泛型】超简洁教程!再也不用看臭又长的TypeScript文档了!
【10月更文挑战第11天】TypeScript【类型别名、泛型】超简洁教程!再也不用看臭又长的TypeScript文档了!
|
23天前
|
JavaScript 前端开发 安全
TypeScript【基础类型】超简洁教程!再也不用看臭又长的TypeScript文档了!
【10月更文挑战第9天】TypeScript【基础类型】超简洁教程!再也不用看臭又长的TypeScript文档了!