TypeScript 中提升幸福感的 10 个高级技巧(上)

简介: TypeScript 中提升幸福感的 10 个高级技巧(上)

1. 注释


通过 /** */ 形式的注释可以给 TS 类型做标记提示,编辑器会有更好的提示:


/** This is a cool guy. */
interface Person {
  /** This is name. */
  name: string,
}
const p: Person = {
    name: 'cool'
}


如果想给某个属性添加注释说明或者友好提示,这种是很好的方式了。


微信图片_20220513162642.png


微信图片_20220513162657.png


2. 接口继承


和类一样,接口也可以相互继承。


这让我们能够从一个接口里复制成员到另一个接口里,可以更灵活地将接口分割到可重用的模块里。


interface Shape {
    color: string;
}
interface Square extends Shape {
    sideLength: number;
}
let square = <Square>{};
square.color = "blue";
square.sideLength = 10;


一个接口可以继承多个接口,创建出多个接口的合成接口。


interface Shape {
    color: string;
}
interface PenStroke {
    penWidth: number;
}
interface Square extends Shape, PenStroke {
    sideLength: number;
}
let square = <Square>{};
square.color = "blue";
square.sideLength = 10;
square.penWidth = 5.0;


3. interface & type


TypeScript 中定义类型的两种方式:接口(interface)和 类型别名(type alias)。


比如下面的 Interface 和 Type alias 的例子中,除了语法,意思是一样的:


Interface


interface Point {
  x: number;
  y: number;
}
interface SetPoint {
  (x: number, y: number): void;
}


Type alias


type Point = {
  x: number;
  y: number;
};
type SetPoint = (x: number, y: number) => void;



而且两者都可以扩展,但是语法有所不同。此外,请注意,接口和类型别名不是互斥的。接口可以扩展类型别名,反之亦然。


Interface extends interface


interface PartialPointX { x: number; }
interface Point extends PartialPointX { y: number; }


Type alias extends type alias


type PartialPointX = { x: number; };
type Point = PartialPointX & { y: number; };


Interface extends type alias


type PartialPointX = { x: number; };
interface Point extends PartialPointX { y: number; }


Type alias extends interface


interface PartialPointX { x: number; }
type Point = PartialPointX & { y: number; };

它们的差别可以看下面这图或者看 TypeScript: Interfaces vs Types


微信图片_20220513162833.png


所以檙想巧用 interface & type 还是不简单的。


如果不知道用什么,记住:能用 interface 实现,就用 interface , 如果不能就用 type 。


4. typeof


typeof 操作符可以用来获取一个变量或对象的类型。


我们一般先定义类型,再使用:


interface Opt {
  timeout: number
}
const defaultOption: Opt = {
  timeout: 500
}


有时候可以反过来:


const defaultOption = {
  timeout: 500
}
type Opt = typeof defaultOption


微信图片_20220513162920.png


当一个 interface 总有一个字面量初始值时,可以考虑这种写法以减少重复代码,至少减少了两行代码是吧,哈哈~


5. keyof


TypeScript 允许我们遍历某种类型的属性,并通过 keyof 操作符提取其属性的名称。


keyof 操作符是在 TypeScript 2.1 版本引入的,该操作符可以用于获取某种类型的所有键,其返回类型是联合类型。


keyofObject.keys 略有相似,只不过 keyofinterface 的键。


const persion = {
  age: 3,
  text: 'hello world'
}
// type keys = "age" | "text"
type keys = keyof Point;


写一个方法获取对象里面的属性值时,一般人可能会这么写


f

unction get1(o: object, name: string) {
  return o[name];
}
const age1 = get1(persion, 'age');
const text1 = get1(persion, 'text');


但是会提示报错


微信图片_20220513163008.png


因为 object 里面没有事先声明的 key。


当然如果把 o: object 修改为 o: any 就不会报错了,但是获取到的值就没有类型了,也变成 any 了。


微信图片_20220513163029.png


这时可以使用 keyof 来加强 get 函数的类型功能,有兴趣的同学可以看看 _.gettype 标记以及实现


function get<T extends object, K extends keyof T>(o: T, name: K): T[K] {
  return o[name]
}


微信图片_20220513163051.png

相关文章
|
3月前
|
JavaScript 前端开发 IDE
深入理解TypeScript:提升JavaScript开发的利器
【10月更文挑战第8天】 深入理解TypeScript:提升JavaScript开发的利器
39 0
|
3月前
|
JavaScript 前端开发 安全
TypeScript的优势与实践:提升JavaScript开发效率
【10月更文挑战第8天】TypeScript的优势与实践:提升JavaScript开发效率
|
2月前
|
JavaScript 前端开发 安全
掌握TypeScript:提升JavaScript开发质量
本文介绍了TypeScript如何通过其静态类型系统、面向对象特性及对现代JavaScript特性的支持,提升JavaScript开发的质量,包括减少错误、增强代码可维护性和利用类型推断等功能,适用于大型项目开发。
|
4月前
|
JavaScript 前端开发 架构师
软件工程师,TypeScript值得你拥有
软件工程师,TypeScript值得你拥有
49 9
软件工程师,TypeScript值得你拥有
|
3月前
|
传感器 JavaScript 前端开发
深入理解TypeScript:提升JavaScript开发效率
【10月更文挑战第8天】深入理解TypeScript:提升JavaScript开发效率
40 0
|
5月前
|
JavaScript 前端开发 测试技术
TypeScript逆袭!大型项目为何对它情有独钟?揭秘背后的真相!
【8月更文挑战第27天】随着前端领域的快速发展,JavaScript已成为Web开发的核心语言。然而,在处理大型项目时,其弱类型特性导致的维护困难和易错性等问题日益突出。为解决这些问题,TypeScript应运而生,逐渐成为大型项目的首选方案。
57 3
|
5月前
|
前端开发 JavaScript 安全
【前端开发新境界】React TypeScript融合之路:从零起步构建类型安全的React应用,全面提升代码质量和开发效率的实战指南!
【8月更文挑战第31天】《React TypeScript融合之路:类型安全的React应用开发》是一篇详细教程,介绍如何结合TypeScript提升React应用的可读性和健壮性。从环境搭建、基础语法到类型化组件、状态管理及Hooks使用,逐步展示TypeScript在复杂前端项目中的优势。适合各水平开发者学习,助力构建高质量应用。
80 0
|
8月前
|
传感器 JavaScript 前端开发
【TypeScript技术专栏】TypeScript在大型项目中的实践与挑战
【4月更文挑战第30天】TypeScript在大型前端项目中日益流行,以其类型系统和ES6+支持提升代码安全与维护性。然而,采用 TypeScript 面临学习曲线、构建时间增加及类型推断挑战。通过最佳实践和成熟工具链(如 tsc、tslint 和 Visual Studio Code)可克服这些问题。案例如Angular、Basecamp和Slack已成功应用TypeScript。掌握TypeScript对提升开发者技能和市场竞争力至关重要。
128 0
|
8月前
|
设计模式 JavaScript 安全
【TypeScript 技术专栏】TypeScript 性能优化与代码质量提升
【4月更文挑战第30天】探索 TypeScript 性能优化与代码质量提升:合理使用类型注解,减少不必要的类型断言,优化模块导入,避免过度封装;遵循编码规范,加强注释,运用设计模式,进行代码审查。在追求性能与质量间找平衡,通过案例分析实践优化策略,持续提升项目体验与可持续发展。一起打造优质 TypeScript 项目!
209 0
|
8月前
|
存储 JavaScript API
TypeScript 中类型转换的终极指南:从零到深入
TypeScript 中类型转换的终极指南:从零到深入
293 0