TS(TypeScript)基础知识五:Type别名、断言

715 阅读3分钟

这是我参与8月更文挑战的第10天,活动详情查看:8月更文挑战

Type 别名

示例

实例一

我们先来看第一个例子看看什么是别名,别名是如何工作的。

type sstr = string;
let a: sstr = '1'
let b: string = '2'

上例中:使用type关键字给string起了个别名sstr。sstr即是string的代称。
起了别名之后我们就可以像使用string一样来使用sstr了

!!因为是别名,所以我们不可能使用关键字type创建不存在的类型。

示例二

虽然我们不能创建新的类型,但是我们可以为其他任何存在的类型添加别名。

type NuStr = number | string;
let a: NuStr;

上例中,我们生命了变量a。a既可能是number类型,亦可以是string类型。例子中给number和string的联合类型起了个别名叫NuStr。之后只要是number和string的联合类型只要调用NuStr即可。

示例三

我们也可以给对象添加别名。

type P = {
  x: number
  y: number
};
function fn(pt: P) {
  console.log(pt.x, pt.y)
}
fn({ x: 100, y: 100 });

上例中,我们给对象限制起别名叫P;但是看起来有点熟悉~对!和接口interface很像。

对比interface

声明方式

interface P {
  x: number;
  y: number;
}
type P = {
  x: number
  y: number
}

声明方式:接口没有使用赋值方式(=),type别名因为是别名使用了赋值符号

继承方式

我们已经知道interface中可以使用extends实现继承。我们来看一下别名中的继承方式:

type Father = {
  name: string
}
type Son = Father & { 
  age: number 
}
// type Son = { 
//   name: string 
// } & { 
//   age: number 
// }

实例中别名Son通过关键字& 实现了对Father的继承。我们已经知道,Father只是别名所以我们也可以按照注释中的方式重写Son

对已经定义好的接口或别名进行修改

接口:

interface I {
  name: string
}

interface I {
  age: number
}

上面的例子中接口I开始添加了name属性,后面又添加了age;最终F既有string类型的name。也有number类型的age

别名:

type T = {
  name: string
}

type T = {
  age: number
}

上例中报错:Duplicate identifier 'T';重复标识符“T”

在大多数情况下,可以根据个人偏好选择使用接口或者别名。这两者其它的区别,欢迎探索。

类型断言as、!

用途:指定一个值的类型

as使用方式

let str = '' as string;
let un = '1' as unknown;
type NuSt = string | number;
const x = ("hello" as string) as NuSt ;

上例中:我们断言空字符串‘’是 string类型。字符串'1'是未知类型。

假设我们指定一个字符串为number类型

let num = '1' as number;

报错:Conversion of type 'string' to type 'number' may be a mistake because neither type sufficiently overlaps with the other. If this was intentional, convert the expression to 'unknown' first

由报错我们可以看到即使是断言,我们也不能把已知类型断言成其它不对应的类型

as简写

我们也可使用尖括号来替换冗长的as写法:

let str = <string>'';
let un = <unknown>'1' 
type NuSt = string | number; 
let x =<NuSt><string>'hell0'

*提醒:因为在编译时删除了型断言,所以在运行时没有断言相关的检测。所以在断言错误时,是没有错误提示的。 *
这里加一个小知识:"tsc --noEmitOnError" 转换为js语法时传入参数noEmitOnError表示有检测到错误时不进行转换;

非空断言操作符“!”

*TS中特殊的语法,用于删除null和undefined。(不需要定义也不需要显示的检查) *

function fn(x?: number | null) {
  console.log(x!.toFixed());
}

上面的例子中:只有number类型有toFixed方法。当我们知道x一定不能为null或者function时我们需要加上!

文章中知识介绍了断言的基础用法,适合从0迈出第一步。