TypeScript高级数据类型和技术文档写作 | 青训营

YOLO807
97 阅读3分钟

通过JavaScript与TypeScript的一一映射关系，可以将JavaScript代码TypeScript化

日常编码中的case

  1. 联合 / 交叉类型 联合类型： IA | IB ，表示一个值可以是几种类型之一 交叉类型： IA & IB ， 多种类型叠加到一起成为一种类型，它包含了所需的所有类型的特性 type IBookList = Array<{ author: string; } & ({ type: 'history'; range:string; } |{ type: 'story'; theme: string; })>

  2. 类型保护与类型守卫 interface IA { a: 1, a1: 2 } interface IB { b: 1, b1: 2 } function log(arg: IA | IB) { /* 报错: 类型“IA|IB”上不存在属性“a”。类型“IB”上不存在属性“a”。 */ /* 结论: 访问联合类型时，处于程序安全，仅能访问联合类型中的交集部分*/ if (arg.a) { console.log(arg.a1) } else { console.log(arg.b1); }

上面的这段代码写在JavaScript中绝对没有任何问题，但是写在TypeScript中运行会报错 因为只能调用一些两者的公共方法。例如：toString方法

可以进行下面的改造 interface IA { a: 1, a1: 2 } interface IB { b: 1, b1: 2 } /* 类型守卫: 定义一个函数，它的返回值是一个类型谓词，生效范围为子作用域*/ function getIsIA(arg: IA | IB): arg is IA { return !!(arg as IA).a; } function log2(arg: IA | IB) { if (getIsIA(arg)) { console.log(arg.a1) } else { console.log(arg.b1); }

// 实现函数logBook类型 // 函数接受书本类型，并logger出相关特征 function logBook(book: IBookItem) { // 联合类型 +类型保护 =自动类型推断 if (book.type === 'history') { console.log(book.range) } else { console.log(book.theme); 了

/** 实现merge函数类型 要求sourceObj必须为targetObj的子集 */ function merge1(source0bj, targetobj) { const result ={ ...source0bj }; for(let key in targetobj) { const itemVal = source0bj[key]; itemVal && ( result[key] = itemVal ); } return result; } function merge2(sourceObj, targetObj) { return { ...source0bj,...targetobj }; }

summary about typescript ：TypeScript 是一种开源的编程语言，它是 JavaScript 的一个超集，可以编译成纯 JavaScript 代码。它的主要作用是增强了 JavaScript 的静态类型检查和语言特性，让项目更加可维护、可扩展、可读性更高。

通过 TypeScript 的静态类型检查，可以在编译器级别就发现许多常见的错误，例如变量使用前未声明、类型不匹配等问题，从而减少运行时错误。同时，TypeScript 还支持面向对象编程、泛型以及其他高级语言特性，提高了代码的可读性和可维护性。

在使用 TypeScript 开发项目时，需要先安装 TypeScript 编译器，并在项目中创建 TypeScript 文件进行编写。然后通过编译器将 TypeScript 文件编译成 JavaScript 文件，供浏览器或 Node.js 运行。还可以使用 TypeScript 的构建工具和编辑器插件，使开发效率更高。

下面是一个 TypeScript 的示例代码：

class Person {
  private name: string;
  constructor(name: string) {
    this.name = name;
  }
  public sayHello(): void {
    console.log(`Hello, my name is ${this.name}`);
  }
}

let person = new Person('Tom');
person.sayHello();

这段代码定义了一个名为 Person 的类，包含一个私有属性 name 和一个公共方法 sayHello()。通过 TypeScript 的类型注解，明确了 name 属性和构造函数的参数类型为字符串。在 sayHello() 方法中，使用了模板字符串和 this 关键字来输出字符串。最后创建了一个 Person 类的实例，并调用了它的 sayHello() 方法。这段代码经过编译后，会生成与上述代码功能相同的 JavaScript 代码。

TypeScript的发展前景非常广阔。它已经成为许多现代Web开发项目的首选语言，尤其是在使用Angular框架和React框架时，TypeScript已经成为了主流的选择。

以下是几个原因：

  1. TypeScript是JavaScript的超集，它向后兼容JavaScript，并提供了更高级的语言特性，例如类型安全、编译时静态检查等。这使得TypeScript成为了一种更加健壮和可维护的语言，能够显著提高代码的质量和稳定性。

  2. TypeScript是由Microsoft维护和支持的开源项目。这样的背景让开发者们十分信任这个项目，并且相信它将有更好的发展前景。

------------------------我是分割线，下面是技术文档写作-----------------------------

极简写作：学习如何用精简有力的语言来传递内容。

avatar
文章
阅读
粉丝