[JavaScript知识库]TypeScript简记

概述

1. TypeScript是微软开发的一个开源的编程语言，2013才发布了首个正式版本。
2. 由于JavaScript语言本身的局限性，难以胜任和维护大型项目开发。因此微软开发了TypeScript ，使得其能够胜任开发大型项目。
3. TypeScript是JavaScript的一个超集，支持 ECMAScript 6 标准，扩展了JavaScript的语法，添加了静态类型定义等特性。
4. 任何现有的JavaScript程序可以运行在TypeScript环境中。
5. TypeScript通过TypeScript编译器或Babel可以编译成JavaScript代码。

官网：https://www.typescriptlang.org/
文档：https://www.typescriptlang.org/zh/docs/

与 JavaScript 的不同

JavaScript 简记

https://xiaobai.blog.csdn.net/article/details/123540800

差异

1. 静态类型、类型批注：有利于检查代码错误，运行前检查类型错误
2. 函数缺省参数值
3. class类
4. 模块：可以把声明、数据、函数和类封装在模块中
5. 接口

如何选择

TypeScript 完全兼容 JavaScript ，使用它编写的代码并具有更高的健壮性和安全性，编码期间检测类型错误等功能使得开发更便捷、更容易。

所以，如无特殊情况，应当选择 TypeScript 。选择 TypeScript 的优势在开发大项目时会更加显著。

静态类型

推理类型

通过了解 JavaScript 的工作原理，TypeScript 可以构建一个接受 JavaScript 代码但具有类型的类型系统。它会在许多情况下自动为你生成类型，而无需你添加额外的代码去显式声明类型。

例如，在创建变量并将其分配给特定值时，TypeScript 将使用该值作为其类型。

// 等价于 let helloWorld: string
let helloWorld = "Hello World";

定义类型

// 对象
const user = {
  name: "Hayes",
  id: 0,
};

// interface（用于描述对象的类型）
interface User {
  name: string;
  id: number;
}

// 声明对象符合interface
const user: User = {
  name: "Hayes",
  id: 0,
};

// 将interface和class一起使用
class UserAccount {
  name: string;
  id: number;
 
  constructor(name: string, id: number) {
    this.name = name;
    this.id = id;
  }
}
const user: User = new UserAccount("Murphy", 1);

// 在函数上作为返回值和入参使用
function getAdminUser(): User {
  //...
}
 
function deleteUser(user: User) {
  // ...
}

原始类型

支持 JavaScript 的原始类型：

1. boolean
2. bigint
3. null
4. number
5. string
6. symbol（ES6新增类型，描述键值对，类似map概念）
7. undefined

支持扩展的类型：

• any（任何内容）
• unknown（确保使用此类型的人声明该类型是什么）
• never（这种类型不可能发生）
• void（函数返回undefined或什么也不返回）

组合类型

1. 使用联合的方式：

type WindowStates = "open" | "closed" | "minimized";

function getLength(obj: string | string[]) {
  return obj.length;
}

2. 使用泛型的方式

type StringArray = Array<string>;
type ObjectWithNameArray = Array<{ name: string }>;

interface Backpack<Type> {
  add: (obj: Type) => void;
  get: () => Type;
}

判断类型

typeof s === "string"
typeof n === "number"
typeof b === "boolean"
typeof undefined === "undefined"
typeof f === "function"
Array.isArray(a)

结构类型系统

如果两个对象具有相同的结构，TypeScript 认为它们属于同一类型，而不管实现细节如何。

interface Point {
  x: number;
  y: number;
}
 
function logPoint(p: Point) {
  console.log(`${p.x}, ${p.y}`);
}
 
// point因为和Point有相同的结构，所以代码可以编译通过
const point = { x: 12, y: 26 };
logPoint(point);

参考

https://www.typescriptlang.org/docs/handbook/typescript-in-5-minutes.html

从 JavaScript 迁移到 TypeScript

编写配置文件

TypeScript 使用 tsconfig.json 来管理项目选项，例如要包含哪些文件，以及要执行哪种检查。

更多参见：https://www.typescriptlang.org/docs/handbook/tsconfig-json.html

tsconfig.json 文件样例：

{
  "compilerOptions": {
    "outDir": "./built",
    "allowJs": true,
    "target": "es5"
  },
  "include": ["./src/**/*"]
}

迁移到 TypeScript 文件

将.js文件重命名为.ts；如果你的文件使用 JSX，则需要将其重命名为.tsx。

此时，如果你在支持 TypeScript 的编辑器中打开该文件（或者运行tsc --pretty），可能会在某些行上看到红色的错误提示。
但是即使有错误提示，TypeScript 仍然会把你的代码编译为 JavaScript。

如果不希望 TypeScript 在遇到错误时仍然编译为 JavaScript，则可以使用noEmitOnError选项。

清除错误

从模块导入

错误提示，例如：Cannot find name 'require'. 和 Cannot find name 'define'.。

修正示例：

import foo = require("foo");

// foo.doStuff();

获取声明文件

错误提示，例如：Cannot find module 'lodash'.。

这里的问题是没有声明文件来描述你的库。
修正示例：

npm install -S @types/lodash

从模块导出

可以使用顶级导出语句，示例：

function foo() {
  // ...
}
export = foo;

太多/太少的参数

使用 arguments 对象的函数需要进行改造，声明正确个数的参数。

修正示例：

// 原函数可以接受2个参数：函数和1个数组，或者接受任意多个参数：函数和一系列数字
function myCoolFunction() {
  if (arguments.length == 2 && Array.isArray(arguments[1])) {
    var f = arguments[0];
    var arr = arguments[1];
    // ...
  }
  // ...
}

// 添加声明：使用函数重载的方式进行声明，对于任意多个参数情况使用剩余参数 ...nums 来表示
function myCoolFunction(f: (x: number) => void, nums: number[]): void;
function myCoolFunction(f: (x: number) => void, ...nums: number[]): void;

顺序添加的属性

在 TypeScript 中，类似下面的代码会报错，提示 options 不具有对应的属性：

var options = {};
options.color = "red";
options.volume = 11;

修正示例：

// 定义interface来指定类型
interface Options {
  color: string;
  volume: number;
}
let options = {} as Options;
options.color = "red";
options.volume = 11;

// 使用any类型，这样最容易，但益处最少
let options: any = {};
options.color = "red";
options.volume = 11;

获得更严格的检查

好处

TypeScript 带有某些检查，可以为您的程序提供更多的安全性和分析结果。将代码库转换为 TypeScript 后，您可以开始启用这些检查以提高安全性。

没有隐式 any

在某些情况下，TypeScript 无法确定某些类型应该是什么，会使用 any 类型来代替。使用 any 意味着你没有获得任何类型安全性，和其他工具支持。

使用 noImplicitAny 选项将开启隐式any的错误检查。

严格检查 null undefined

默认情况下，TypeScript 假定 null undefined 存在每种类型的域中，即任何特定类型的内容都可能是 null 或者 undefined。

使用 strictNullChecks选项，则将进行严格的 null undefined 检查。

实际应用中，可以使用联合类型来表示某个变量可能为 null 等，并使用 ! 来获取非null值：

declare var foo: string[] | null;

foo.length; // 错误用法：foo可能为null
foo!.length; // 正确用法

没有隐含 any 的 this

当你在类之外使用关键字 this 时，默认情况下它具有 any 类型。同样的，这样不会具有类型安全检查。

使用 noImplicitThis 选项将对 this 开启类型安全检查。

使用示例：

class Point {
  constructor(public x, public y) {}
  getDistance(p: Point) {
    let dx = p.x - this.x;
    let dy = p.y - this.y;
    return Math.sqrt(dx ** 2 + dy ** 2);
  }
}
// ...
// Reopen the interface.
interface Point {
  distanceFromOrigin(): number;
}

// 错误：tihs 没有安全类型检查
Point.prototype.distanceFromOrigin = function () {
  return this.getDistance({ x: 0, y: 0 });
};

// 正确：在参数中显式给出 this 的类型
Point.prototype.distanceFromOrigin = function (this: Point) {
  return this.getDistance({ x: 0, y: 0 });
};

参考

https://www.typescriptlang.org/docs/handbook/migrating-from-javascript.html

直接在 JavaScript 中使用 TypeScript

通过 JSDoc 在 JS 中提供类型提示

在.js文件中，通常可以推断出类型。当无法推断类型时，可以使用 JSDoc 语法指定它们：JSDoc 注释出现在声明之前，将用于设置该声明的类型。

更多 JSDoc 语法参见：https://www.typescriptlang.org/docs/handbook/jsdoc-supported-types.html

示例：

/** @type {number} */
var x;

x = 0; // OK
x = false; // OK?!

使用 @ts-check 启用检查

上一个代码示例的最后一行会在 TypeScript 中引发错误，但在 JS 项目中默认不会。

要在 JavaScript 文件中启用错误检查，请在文件的第一行添加：// @ts-check。

示例：

// @ts-check

// some codes
...

/** @type {number} */
var x;
 
x = 0; // OK
x = false; // Not OK

使用 jsconfig.json 启用批量检查

目录中存在 tsconfig.json 文件表明该目录是 TypeScript 项目的根目录。该 tsconfig.json 文件指定编译项目所需的根文件和编译器选项。
JavaScript 项目可以使用 jsconfig.json 文件来代替，它的作用几乎相同，但默认启用了一些与 JavaScript 相关的编译器标志。

更多参见：https://www.typescriptlang.org/docs/handbook/tsconfig-json.html

使用 @ts-nocheck 跳过检查

当使用 jsconfig.json 启用批量检查时，可以通过在文件第一行添加 // @ts-nocheck 跳过对该文件的检查。

使用 @ts-ignore 或 @ts-expect-error 来忽略错误

可以通过在前一行添加// @ts-ignore或//@ts-expect-error忽略特定行上的错误。

示例：

// @ts-check
/** @type {number} */
var x;
 
x = 0; // OK
// @ts-expect-error
x = false; // 忽略该行报错

参考

https://www.typescriptlang.org/docs/handbook/intro-to-js-ts.html