这是我参与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迈出第一步。