内容简介：然而现在的我想说: 真香.我们经常吐槽别人代码可维护性特别低, 总是希望别人能够主动的写注释, 可是写注释却没有任何方式可以进行约束. 这下好了, 类型就是最好的注释, 用
一年前刚接触 Typescript 的时候, 觉得它加大了 代码工作量. 写一大堆东西.为了找某个类型东奔西跑, 引入第三库还经常报错.
然而现在的我想说: 真香.
我们经常吐槽别人代码可维护性特别低, 总是希望别人能够主动的写注释, 可是写注释却没有任何方式可以进行约束. 这下好了, 类型就是最好的注释, 用 Typescript , 可以大大提高代码的可维护性.
一. 如何处理第三方库类型相关问题
Typescipt 所提供的第三方库类型定义不仅约束我们的输入调用, 还能为我们提供文档. 现在, NPM 上的第三方类型定义种类繁多，很难保证类型定义是正确的. 也很难保证所有使用的第三方库都有类型定义.
那么, 在这个充满未知的过程中，如何才能正确使用TypeScript中的第三方库呢？
下面列举了四种常见的无法正常工作的场景以及对应的解决方法：
-
库本身没有自带类型定义
-
库本身没有类型定义, 也没有相关的@type
-
类型声明库有误
-
类型声明报错
1. 库本身没有自带类型定义
查找不到相关的库类型. 举个栗子
在初次将 react 改造支持 typescript 时, 想必很多人都会遇到 module.hot 报错. 此时只需要安装对应的类型库即可.
安装 @types/webpack-env
2. 库本身没有类型定义, 也没有相关的@type
那只能自己声明一个了. 随便举个栗子.
declare module "lodash"
3. 类型声明库有误
-
推动解决官方类型定义的问题, 提issue, pr
-
Import 后通过 extends 或者 merge 能力对原类型进行扩展
-
忍受类型的丢失或不可靠性
-
使用 // @ts-ignore 忽略
4. 类型声明报错
-
在 compilerOptions 的添加"skipLibCheck": true, 曲线救国
二. 巧用类型收缩解决报错
下 面列举了几种常见的解决方法：
-
类型断言
-
类型守卫 typeof in instanceof 字面量类型保护
-
双重断言
1、 类型断言
类型断言可以明确的告诉 TypeScript 值的详细类型，
在某些场景, 我们非常确认它的类型, 即使与 typescript 推断出来的类型不一致. 那我们可以使用类型断言.
语法如下:
< 类型 > 值
值 as 类型
// 推荐使用这种语法. 因为<>容易跟泛型, react 中的语法起冲突
举个例子, 如下代码, padding 值可以是 string , 也可以是 number, 虽然在代码里面写了 Array(), 我们明确的知道, padding 会被parseint 转换成 number 类型, 但类型定义依然会报错.
function padLeft ( value : string , padding : string | number ) {
// 报错: Operator '+' cannot be applied to
// types 'string | number' and 'number'
return Array ( padding + 1 ). join ( " " ) + value ;
}
解决方法, 使用类型断言. 告诉 typescript 这里我确认它是 number 类型, 忽略报错.
function padLeft ( value : string , padding : string | number ) {
// 正常
return Array ( padding as number + 1 ). join ( " " ) + value ;
}
但是如果有下面这种情况, 我们要写很多个 as 么?
function padLeft ( value : string , padding : string | number ) {
console . log (( padding as number ) + 3 );
console . log (( padding as number ) + 2 );
console . log (( padding as number ) + 5 );
return Array (( padding as number ) + 1 ). join ( ' ' ) + value ;
}
2、 类型守卫
类型守卫有以下几种方式, 简单的概括以下
-
typeof: 用于判断 "number"，"string"，"boolean"或 "symbol" 四种类型.
-
instanceof : 用于判断一个实例是否属于某个类
-
in: 用于判断一个属性/方法是否属于某个对象
-
字面量类型保护
上面的例子中, 是 string | number 类型, 因此使用 typeof 来进行类型守卫. 例子如下:
function padLeft ( value : string , padding : string | number ) {
if ( typeof padding === 'number' ) {
console . log ( padding + 3 ); //正常
console . log ( padding + 2 ); //正常
console . log ( padding + 5 ); //正常
//正常
return Array ( padding + 1 ). join ( ' ' ) value ;
}
if ( typeof padding === 'string' ) {
return padding + value ;
}
}
相比较 类型断言 as , 省去了大量代码. 除了 typeof , 我们还有几种方式, 下面一一举例子.
-
instanceof :用于判断一个实例是否属于某个类
class Man {
handsome = 'handsome' ;
}
class Woman {
beautiful = 'beautiful' ;
}
function Human ( arg : Man | Woman ) {
if ( arg instanceof Man ) {
console . log ( arg . handsome );
console . log ( arg . beautiful ); // error
} else {
// 这一块中一定是 Woman
console . log ( arg . beautiful );
}
}
-
in : 用于判断一个属性/方法是否属于某个对象
interface B {
b : string ;
}
interface A {
a : string ;
}
function foo ( x : A | B ) {
if ( 'a' in x ) {
return x . a ;
}
return x . b ;
}
-
字面量类型保护
有些场景, 使用 in, instanceof, typeof 太过麻烦. 这时候可以自己构造一个字面量类型.
type Man = {
handsome : 'handsome' ;
type : 'man' ;
};
type Woman = {
beautiful : 'beautiful' ;
type : 'woman' ;
};
function Human ( arg : Man | Woman ) {
if ( arg . type === 'man' ) {
console . log ( arg . handsome );
console . log ( arg . beautiful ); // error
} else {
// 这一块中一定是 Woman
console . log ( arg . beautiful );
}
}
3、双重断言
有些时候使用 as 也会报错,因为 as 断言的时候也不是毫无条件的. 它只有当S类型是T类型的子集，或者T类型是S类型的子集时，S能被成功断言成T.
所以面对这种情况, 只想暴力解决问题的情况, 可以使用双重断言.
function handler ( event : Event ) {
const element = event as HTMLElement ;
// Error: 'Event' 和 'HTMLElement'
中的任何一个都不能赋值给另外一个
}
如果你仍然想使用那个类型，你可以使用双重断言。首先断言成兼容所有类型的any
function handler ( event : Event ) {
const element = ( event as any ) as HTMLElement ;
// 正常
}
三. 巧用 typescript 支持的 js 最新特性优化代码
1. 可选链 Optional Chining
let x = foo ?. bar . baz ();
typescript 中的实现如下:
var _a ;
let x = ( _a = foo ) === null ||
_a === void 0 ? void 0 : _a . bar . baz ();
利用这个特性, 我们可以省去写很多恶心的 a && a.b && a.b.c 这样的代码
2. 空值联合 Nullish Coalescing
let x = foo ?? '22' ;
typescript 中的实现如下:
let x = ( foo !== null && foo !== void 0 ?
foo : '22' );
四. 巧用高级类型灵活处理数据
typescript 提供了一些很不错的 工具 函数. 如下图
-
类型索引
为了实现上面的工具函数, 我们需要先了解以下几个语法:
keyof : 获取类型上的 key 值
extends : 泛型里面的约束
T[K] : 获取对象 T 相应 K 的元素类型
type Partial < T > = {
[ P in keyof T ]?: T [ P ]
}
在使用 props 的时候, 有时候全部属性都是可选的, 如果一个一个属性写 ? , 大量的重复动作. 这种时候可以直接使用 Partial
Record 作为一个特别灵活的工具. 第一个泛型传入对象的key值, 第二个传入 对象的属性值.
type Record < K extends string , T > = {
[ P in K ]: T ;
}
我们看一下下面的这个对象, 你会怎么用 ts 声明它?
const AnimalMap = {
cat: { name: '猫' , title: 'cat' },
dog: { name: '狗' , title: 'dog' },
frog: { name: '蛙' , title: 'wa' },
};
此时用 Record 即可.
type AnimalType = 'cat' | 'dog' | 'frog' ;
interface AnimalDescription {
name : string , title : string
}
const AnimalMap :
Record < AnimalType , AnimalDescription > = {
cat: { name: '猫' , title: 'cat' },
dog: { name: '狗' , title: 'dog' },
frog: { name: '蛙' , title: 'wa' },
};
-
never, 构造条件类型
除了上面的几个语法. 我们还可以用 never , 构造条件类型来组合出更灵活的类型定义.
语法:
never : 从未出现的值的类型
// 如果 T 是 U 的子类型的话，那么就会返回 X，否则返回 Y
构造条件类型 : T extends U ? X : Y
type Exclude < T , U > = T extends U ? never : T ;
// 相当于: type A = 'a'
type A = Exclude < 'x' | 'a' , 'x' | 'y' | 'z' >
-
更简洁的修饰符: - 与 +
可以直接去除 ? 将所有对象属性变成必传内容.
type Required < T > = { [ P in keyof T ]-?: T [ P ] };
// Remove readonly
type MutableRequired < T > = {
- readonly [ P in keyof T ]: T [ P ]
};
-
infer: 在 extends 条件语句中待推断的类型变量。
// 需要获取到 Promise 类型里蕴含的值
type PromiseVal < P > =
P extendsPromise < infer INNER > ? INNER : P ;
type PStr = Promise < string >;
// Test === string
type Test = PromiseVal < PStr >;
五. 辨别 type & interface
在各大类型库中, 会看到形形色色的 type 和 interface . 然而很多人在实际中却不知道它们的区别.
官网的定义如下:
An interface can be named in an extends or implements clause, but a type alias for an object type literal cannot.
An interface can have multiple merged declarations, but a type alias for an object type literal cannot.
从一张图看出它们两的区别:
建议: 能用 interface 实现，就用 interface , 如果不能才用 type.
- END -
如果你觉得这篇内容对你挺有启发，我想邀请你帮我三个小忙：
-
点个「 在看 」，让更多的人也能看到这篇内容（喜欢不点在看，都是耍流氓 -_-）
-
关注我的官网 https:// m uyiy.cn ，让我们成为长期关系
-
关注公众号「 高级前端进阶 」，每周重点攻克一个前端面试重难点，公众号后台回复「面试题」 送你高级前端面试题。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持 码农网
猜你喜欢:
- 渗透技巧之Powershell实战技巧
- 渗透技巧——快捷方式文件的参数隐藏技巧
- Python实用技巧，你不知道的7个好玩的Python技巧
- Python 技巧总结
- 监控OpenStack的技巧
- JNI技巧
本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。
Ajax Design Patterns
Michael Mahemoff / O'Reilly Media / 2006-06-29 / USD 44.99
Ajax, or Asynchronous JavaScript and XML, exploded onto the scene in the spring of 2005 and remains the hottest story among web developers. With its rich combination of technologies, Ajax provides a s......一起来看看 《Ajax Design Patterns》 这本书的介绍吧!
