TypeScript 01 Type Erasure

TypeScript 学习笔记01 类型擦除

TypeScript 环境搭建

TypeScript 编译环境

• esbuild (不检查ts语法)
• swc (不检查ts语法)
• neno
  • 一个在线neno环境 https://www.mycompiler.io/new/deno
• babel –presets @babel/preset-typescript 1.ts
• nodejs

下面是nodejs环境下 typescript 环境搭建过程

安装 TypeScript

npm install -g typescript

-g 表示全局安装
node新版本会有一个warning,可以忽略

npm WARN config global --global, --local are deprecated. Use --location=global instead" occurs because the --global option was deprecated in an older version of npm

类型擦除 (Type Erasure)

什么是类型擦除

粗略地说，一旦 TypeScript 的编译器检查完您的代码，它就会擦除类型以生成生成的 “compiled” 代码。这意味着一旦你的代码被编译，生成的普通 JS 代码就没有类型信息。

Roughly speaking, once TypeScript’s compiler is done with checking your code, it erases the types to produce the resulting “compiled” code. This means that once your code is compiled, the resulting plain JS code has no type information.

这也意味着 TypeScript 永远不会根据它推断的类型更改程序的行为。最重要的是，虽然您可能会在编译期间看到类型错误，但类型系统本身与程序运行时的工作方式无关。

This also means that TypeScript never changes the behavior of your program based on the types it inferred. The bottom line is that while you might see type errors during compilation, the type system itself has no bearing on how your program works when it runs.

最后，TypeScript 不提供任何额外的运行时库。您的程序将使用与 JavaScript 程序相同的标准库（或外部库），因此无需学习额外的 TypeScript 特定框架。

Finally, TypeScript doesn’t provide any additional runtime libraries. Your programs will use the same standard library (or external libraries) as JavaScript programs, so there’s no additional TypeScript-specific framework to learn.

typescript新手指引

类型擦除 (Type Erasure) 示例

const a:number = 1+2;
console.log(a)

执行编译

tsc 1.ts

执行编译后，会生成一个 1.js 文件

const a = 1 + 2;
console.log(a);

运行结果

>>>3

TypeScript工作原理

TypeScript 编译器将 TypeScript 代码转换为 JavaScript 代码。 它使用类型信息来执行以下操作：

• 验证代码中的类型
• 推断类型
• 生成 JavaScript 代码
• 生成与 JavaScript 代码兼容的类型信息
• 生成与 JavaScript 代码兼容的运行时
• 生成与 JavaScript 代码兼容的源映射
• 生成与 JavaScript 代码兼容的调试器支持
• 生成与 JavaScript 代码兼容的文档
• 生成与 JavaScript 代码兼容的测试
• 生成与 JavaScript 代码兼容的类型检查器支持
  …..

如何查看ES6兼容表

ES6兼容性表在线查看

几种在线编辑器

• PlayCode.io
• Stackblitz.com
• Codesandbox.io
• Codepen.io

VSCode 插件(持续更新)

• pretty-ts-errors
  • 一个查看typescript报错信息格式化擦插件(20231116)