TS 简介

1. 定义

TypeScript is a typed superset of JavaScript that compiles to plain JavaScript.
Any browser. Any host. Any OS. Open source.

• 微软、2012 年、JavaScript 超集
• 静态类型、面向对象、扩展语法
• 更健壮、更可维护、大型项目

2. 对比

⑴ 动态类型

JavaScript 是一种动态类型的语言。

在声明变量时可以不必指定数据类型，数据类型会在代码执行时根据需要自动转换。

let a = 123;

也可以使用同一个变量保存不同类型的数据。

a = 'abc';

⑵ 静态类型

TypeScript 是 JavaScript 的一个超集，主要提供了类型系统和对 ESNext 的支持。

① 类型推论 Type Inference

如果没有明确地指定类型，那么 TypeScript 会依照类型推论的规则推断出一个类型。

let a = 123;

TypeScript 的类型系统可以自动推断出变量 a 的类型为 number。

a = 'abc';

报错：Type 'string' is not assignable to type 'number'.

② 类型断言 Type Assertion

类型断言可以用来手动指定一个值的类型。

let a: number = 123;
a = 456;

③ 接口 Interface

在 TypeScript 中，我们使用接口来定义对象的类型。

interface Person {
  name: string;
  age: number;
}
const person: Person = {
  name: 'wang',
  age: 23,
};

3. 优势

• 开发过程中，发现潜在问题
• 更友好的编辑器自动提示
• 代码语义更清晰易懂

// 类型定义
function tsDemo(data: { x: number, y: number }) {
  return Math.sqrt(data.x ** 2 + data.y ** 2);
}
tsDemo({ x: 3, y: 4 });

// 类型别名
type Side = {
  x: number,
  y: number,
};
function tsDemo(data: Side) {
  return Math.sqrt(data.x ** 2 + data.y ** 2);
}
tsDemo({ x: 3, y: 4 });

// 接口定义
interface Side {
  x: number;
  y: number;
}
function tsDemo(data: Side) {
  return Math.sqrt(data.x ** 2 + data.y ** 2);
}
tsDemo({ x: 3, y: 4 });

4. 安装

# 安装
npm i -g typescript

# 编译
tsc demo.ts

# 执行
node demo.js

# 安装
npm i -g ts-node

# 编译 + 执行
ts-node demo.ts