介绍

本文为个人学习手记，资料为ts官网示例

Hello World

我们从简的示例入手，示例尽量采用接近原生js的写法，即是对现有知识的重新利用，又可以了解ts，以降低学习成本。

如下示例，Typescript 能够通过小小的转译，将 const 转为 var,从而可以在各个浏览器中运行。

转译前

const hello = "Hello";
const world = "World";
console.log(hello + " " + world);

转译后

var hello = "Hello";
var world = "World";
console.log(hello + " " + world);

Objects-and-Arrays

对象是键值对的结合

const userAccount = {
  name: "Kieron",
  id: 0,
};

const pie = {
  type: "Apple",
};

ts 可以将多个对象组合组合成稍微复杂点的数据模型

const purchaseOrder = {
  owner: userAccount,
  item: pie,
};

鼠标悬停 purchaseOrder,你将发现，typescript 将 js 代码转为标签类型（动手试一下吧🧪）

如图所示，purchaseOrder.owner 的值为userAccount,那么他的属性类型会和和userAccount一一对应，name为字符串类型，id为数字类型。

当你获取对象属性时，typescript会出现相应提示。

同样，数组也有相同功能。大家可自行尝试，然后鼠标悬停查看效果。

如何声明一个只读数组？（为了降低代码的复杂度）

// 依据 purchaseOrder 创建一个类型
type PurchaseOrder = typeof purchaseOrder;

// 创建一个只读的数组 readonlyOrders
const readonlyOrders: readonly PurchaseOrder[] = [purchaseOrder];

知识点
- type PurchaseOrder - 声明一个新的typescript类型 PurchaseOrder。
- typeof - 根据typeof 后面传入的值，使用类型推断系统设置类型。即 typeof 操作符可以用来获取一个变量或对象的类型。
- purchaseOrder-获取变量purchaseOrder，并告诉TypeScript这是orders数组中所有对象的 shape 。
- readonly - 表示该数组/对象无法变更。

此时试图更改数组readonlyOrders.pop(); 将会报错。

Typescript examples- Hello-World & Objects-and-Arrays

介绍

Hello World

Objects-and-Arrays