写篇文章让自己会写Ts——(2)Ts使用入二门

224 阅读2分钟

上篇文章讲了讲基本的类型和几种常用语法,本篇文章集中讲解数组和元组,并在开始分享ts-node工具。

一、ts-node

上篇文章我们讲到使用tsc来完成ts到js的编译,但是运行js程序完成指令总共有两步,于是有人结合了两步的工具开发了ts-node,顾名思义就是tsc和node的结合。

通过ts-node我们可以用一行带代替tsc和node两步操作(更好的帮助我们学习使用ts单个文件)。

原:
tsc index.ts
node index.js
现:
ts-node index.ts

安装

安装指令:

npm install -g ts-node

重点提示:为了避免版本问题导致使用时报错,建议使用后面的代码安装固定版本8.5.4:
npm i -g ts-node@8.5.4
同时提供卸载指令:npm uninstall ts-node -g

二、TS的引用类型

数组

数组的通常简洁写法:

const strs : string [] = [ 'ss' , 'xx' ] ;
let unanys : [] = [] ;

我们发现特点:

constlet 变量名 : 数组元素的类型 []  = [ 值 , 值 ]

通过测试总结下列特点:(建议大家动手试试)

  1. [] 前的数组元素类型定义可以任意组合和设计(或、自定义等)。
  2. [] 前的数组元素类型定义使用或语法后数组内的类型没有顺序要求(let strs : (number|string )[] = ['111111',234,"werqer"] ;)。
  3. [] 前没有写数组元素类型的话默认数组只能接受0个元素。

官方还提供了一种写法:数组泛型。
Array<元素类型>
Array<number> = [ 1 , 2 , 3 ]

ReadonlyArray

ReadonlyArray和下篇文章的readonly设计思路是一致的,主要是进行只读的限制(规范)。

let roarr: ReadonlyArray<number> = [1, 2, 3, 4];

Array<T>相似,只是把所有可变方法去掉了,因此可以确保数组创建后再也不能被修改.

元组

通过上面的第二点我们发现元组进行了限制。

constlet 变量名 : [ 元素的类型A , 元素的类型B ]  = [ A类型值 , B类型值 ]

元组可以将类型写在中括号内来限制类型顺序

image.png

我们发现:

1.元组能限制类型和长度,越界元素无法操作。

image.png

对象类型

对象可以理解 object + null。null也属于是对象,特殊的对象。

let objs : ( object | null ) [] = [ 
    { prop : 2 } , 
    null , 
    { name : "juejinjin" } 
]

我们发现object作为类型限制,对于对象十分包容,不限制对象的属性名和属性以及属性的类型。

字节电商前端持续招人,帮忙内推,简历请发1826235370@qq.com或微信15884204478(上海北京杭州多地)