Skip to content

TS 以及实验性语法

ES modules

导入(非内置模块不建议省略后缀)

javascript
import {
    name,
    age
} from "./index.js"
import * as all from "./index.js"
import msg, {
    name,
    age
} from "./index.js"
import {
    default as all,
    name,
    age
} from "./index.js"

导出

javascript
export function age() {}
export let name = "Alice"
export default {
    msg: "",
}

浏览器中使用 ES modules 需要在 script 标签中指定type="module",且引入可能带来跨域问题。

而在 nodejs 中不做任何配置时后缀 mjs 来表示使用 ES modules。nodejs 有专门笔记介绍。

Typescript

ts 是 js 的超集,它使用更严格的语法,需要编译为 js 后再执行。

在 typescirpt 中 ES modules 是默认的引入和导出模块的方式。

安装

在 nodejs 环境下使用 npm 安装来环境。

shell
pnpm install typescript

配置

生成配置文件,在配置文件中修改可以启用一些实验性语法等配置

shell
# npx tsc --init
pnpm tsc --init

命令行执行

ts-node 包的命令可以不生成编译后的 js 直接运行 ts 文件。可以全局安装。

shell
pnpm i ts-node
pnpm i @types/node -D
npx ts-node test.ts

学习:

TypeScript 入门教程 (ts.xcatliu.com)

深入理解 TypeScript | 深入理解 TypeScript (jkchao.github.io)

权限修饰符

ts 已经支持权限修饰符,且可以通过配置useDefineForClassFields属性的行为

  • public 实例对象外部内部子类可随意访问(兼容 JS,默认)
  • private 实例对象内部(不包含子类)可访问
  • protected 实例对象的内部与子类内部可访问

权限修饰符可以与静态修饰符 static 可以一起用。

修饰时也可以写在 constructor 内的属性里。

typescript
import { inject, injectable } from "tsyringe"

@injectable()
export default class MyServer {
  constructor(
    @inject("CfgInterface")
    private preprocessor: CfgInterface
  ) {}
}

其中 injectable 和 inject 是装饰器,见下

装饰器

装饰器是闭包的高级用法,即使是在 ts 中它也是实验性语法。

因为其实现依赖 Object.defineProperty,目前只支持装饰类以及类的属性

javascript
function testable(isTestable) {
    return function(target) {
        target.isTestable = isTestable
    }
}

@testable(true)
class MyTestableClass {}
MyTestableClass.isTestable // true

@testable(false)
class MyClass {}
MyClass.isTestable // false

装饰时也可以写在 constructor 内的属性里

可选链

可选链操作符是一个新的 js api,它允许读取一个被连接对象的深层次的属性的值而无需明确校验链条上每一个引用的有效性。目前已经可以在 node14 上内置

javascript
obj?.prop
obj?.[expr]
func?.(args)

管道

管道运算符(|>)在函数式编程(如 Elixir )中很常见,但他目前还没内置在 JavaScript 中,但草案的阶段性通过已经是板上钉钉(遥遥无期)

javascript
"helloWorld" |> console.log