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); 
} 
  

（编辑：河北网）

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