TypeScript 中高级应用与完美实践

当我们讨论 TypeScript 时，我们在讨论什么？

• JavaScript 的超集
• 编译期行为
• 不引入额外开销
• 不改变运行时行为
• 始终与 ESMAScript 语言标准一致 (stage 3 语法)

TypeScript 中的 Decorator 较为特殊，为 Angular 团队和 TypeScript 团队交易的结果，有兴趣可自行搜索相关资料。而且近期 EcmaScript 规范中的 decorator 提案内容发生了剧烈变动，建议等此语法标准完全稳定后再在生产项目中使用。

本文只讨论图中蓝色部分。

JSDoc 也能标注类型，为什么要用 TypeScript？

• JSDoc 只是注释，其标注没有约束作用
• TS 有—checkJs 选项，但不好用

TS 会自动推断函数返回值类型，为什么要多此一举标注出来？

• 契约高于实现
• 检查返回值是否写错
• 写 return 时获得提醒

几组 VSCode 快捷键

• 代码补全 control + 空格 ctrl + 空格
• 快速修复 command + . ctrl + .
• 重构（重命名） fn + f2 f2

一个网站

TypeScript Playground

初始化项目

自行配置

"compilerOptions": { 
    "esModuleInterop": true, 
    "allowSyntheticDefaultImports": true, 
    "noImplicitAny": true, 
    "strictNullChecks": true, 
    "noImplicitThis": true, 
    "moduleResolution": "node" 
} 
  

react 项目运行 create-react-app ${项目名} —scripts-version=react-scripts-ts

&和 | 操作符

虽然在写法上，这两个操作符与位运算逻辑操作符相同。但在语义上，它们与位运算刚好相反。

位运算的表现：

1001 | 1010 = 1011    // 合并1 
1001 & 1010 = 1000    // 只保留共有1 

在 TypeScript 中的表现：

interface IA { 
    a: string 
    b: number 
} 
  
type TB = { 
    b: number 
    c: number[] 
} 
  
type TC = IA | TB;    // TC类型的变量的键只需包含ab或bc即可，当然也可以abc都有 
type TD = IA & TB;    // TD类型的变量的键必需包含abc 

对于这种表现，可以这样理解： & 表示必须同时满足多个契约， | 表示满足任意一个契约即可。

interface 和 type 关键字

interface 和 type 两个关键字因为其功能比较接近，常常引起新手的疑问：应该在什么时候用 type，什么时候用 interface？

interface 的特点如下：

• 同名 interface 自动聚合，也可以和已有的同名 class 聚合，适合做 polyfill
• 自身只能表示 object/class/function 的类型

建议库的开发者所提供的公共 api 应该尽量用 interface/class，方便使用者自行扩展。举个例子，我之前在给腾讯云 Cloud Studio 在线编辑器开发插件时，因为查阅到的 monaco 文档是 0.15.5 版本（当时的最新版本）的，而 Cloud Studio 使用的 monaco 版本为 0.14.3，缺失了一些我需要的 API，所以需要手动 polyfill 一下。

/** 
 * Cloud Studio使用的monaco版本较老0.14.3，和官方文档相比缺失部分功能 
 * 另外vscode有一些特有的功能，必须适配 
 * 故在这里手动实现作为补充 
 */ 
declare module monaco { 
  interface Position { 
    delta(deltaLineNumber?: number, deltaColumn?: number): Position 
  } 
} 
  
// monaco 0.15.5 
monaco.Position.prototype.delta = function (this: monaco.Position, deltaLineNumber = 0, deltaColumn = 0) { 
  return new monaco.Position(this.lineNumber + deltaLineNumber, this.column + deltaColumn); 
} 
  

（编辑：南平站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!