TypeScript入门必备知识

一、typescript安装

1.先安装npm、node，再安装typescript，安装命令：npm install -g typescript，安装完成后用tsc -v查看版本号

2.运行typescript

（1）方法一：手动编译ts文件

①编写TS代码 --> 新建.ts文件，在文件中编写代码

②编译TS --> 在命令行中输入tsc ./当前文件，如：tsc ./01first.ts，文件夹下出现对应的js文件即编译成功

③运行JS --> 将JS文件引入HTML页面并执行

（2）方法二：自动编译

自动编译：设置VSCode自动编译

①运行tsc --init，创建tsconfig.json文件

②修改tsconfig.json文件，设置js文件夹：“outDir”: “./js/”

③设置vscode监视任务：在vsc中点击终端 => 运行任务 => tsc监视

二、Typescript 变量与数据类型

1.变量语法：let 变量名:变量类型 = 值

eg：let zouAge:number = 18;

注意：在TS中，为变量指定了类型，就只能给这个变量设置相同类型的值，否则会报错。

2.数据类型

①原有类型：string，number，boolean，Array，null，undefined，Symbol，Object

②新增类型：tuple元组，enum枚举，any任意类型，never，void

（1）数组：需要声明时指定数组中元素的类型

语法：方式一： let 数组名:类型[ ] = [值1，值2]；

eg：let arrHeros: string[] = [‘安其拉’,‘压缩’];

方式二： let 数组名：Array<类型> = [值1，值2];

eg：let arrHeros: Array = [‘安其拉’,‘压缩’];

特点：元素类型固定，长度不限制

（2）元组

概念：就是一个规定了元素数量和每个元素类型的“数组”，而每个元素的类型可以不相同

语法：let 元组名：[类型1，类型2] = [值1，值2]；

eg：tup1:[stringg, number, boolean] = [‘我是’， 18， true];

特点：声明时，要指定元素的个数，声明时，要为每个元素规定类型。

（3）枚举

语法：

enum 枚举名 {
枚举项1 = 枚举值1，
枚举项2 = 枚举值2，
… = …
}
enum sex {
sexBoy = 1，
sexGirl = 2，
sexUnde = 3
}

枚举项一般用英文跟数字，而枚举值用整形数字

使用默认枚举值：

enum 枚举名 {
枚举项1，
枚举项2，
…
}
enum sex {
sexBoy， -> 0
sexGirl， -> 1
sexUnde -> 2
}

枚举值 将自动生成从0开始的数值

（4）any：任意类型，一般在获取dom时使用

（5）void：代表没用类型，一般用在无返回值的函数

（6）never：代表不存在的值的类型，常用作为抛出异常或无限循环的函数返回类型

补充：never类型是ts中的底部类型，所有类型都是never类型的父类型，所以never类型值可以赋给任意类型的变量

（7）联合类型

概念：表示取值可以为多种类型中的一种 let 变量名：变量类型1 | 变量类型2 = 值；

三、Typescript的函数返回值与参数

1.函数 | 返回值类型

如果函数没有返回值，则定义为void
function 函数名():返回值类型 {
}
let 变量名:变量类型 = 函数名（）；

2.函数 | 形参类型

function 函数名(形参1：类型，形参2：类型)：返回值类型 {
}
let 变量名:变量类型=函数名(实参1，实参2）

特点：实参和形参的类型要一致，实参和形参的数量要一致

3.函数 | 可选参数，即在形参后加？表示可选参数的实参可传可不传

4.函数 | 默认值

默认值的参数本身也是可选参数
function 函数名(形参1:类型=默认值1，形参2:类型=默认值2):返回值类型 {
}

调用

不传递实参 函数名(); -->均用默认值
传1个实参 函数名(实参1)； --> 第二个用默认值
只传第2个实参 函数名(undefined, 实参2)； -->第一个为默认值

5.函数 | 剩余参数

当数量不确定的参数时
function add (形参1：类型，形参2：类型，…形参3：类型[]):void {
console.log(a + b)
}

特点：

剩余参数只能定义有一个；剩余参数只能定义为数组；剩余参数只能定义在形参列表的最后

其他内容在下一篇噢，有帮助到你的话留个赞吧，记得收藏下次好查找哟