typescript基础学习（一）

简介

• TypeScript 是微软推出的一门语言
• TypeScript 是JavaScript 的超集，包含 ES
• 新增了类型系统和完整的面向对象语法
• 使用 TS 编写的项目更加健硕，更加便于扩展和维护

使用

TS 文件的解析方式：
TS 编译为 JS ，再交给浏览器解析运行。 类似 Less --> css

1. 全局安装

npm i -g typescript

作用： 负责将 TS 代码转换为浏览器和 node.js 识别的 JS 代码。
查看是否安装完成命令 tsc -v 。
2. 新建 .ts 后缀名的 TS 文件
3. 编译 ts 文件为js文件并使用

ts 文件编译成 js 文件的两种方式：

1. 直接执行命令 tsc test.ts
2. 设置 vscode自动编译：
   01:运行 tsc init 创建 tscconfig.json 文件
   02：修改 tscconfig.json 设置 js 文件夹 “outDir”: “./js/”
   03: 右键tab终端–>设置vscode 监视任务

变量与常用类型

声明变量并指定类型：

let name: string = "zhangsan"

变量指定类型后，后续若对其赋非指定类型值，会报错。

ts中的数据类型有： js 所有数据类型 string, number, boolean, null, underfind, Array, Object, Symbol, 以及新增了 tuple(元组), enum(枚举), any（任意类型, never, void 。

数据类型 | 数组

ts 中数组使用上和 js 有一定差异。 js 中声明数组后， 数组中的元素可以是任意类型， 而 ts 在声明时就需要指定数组类型。

语法：

• 方式一：

// let 数组名: 类型[] = [值1， 值2]
let nameList: string[] = ['zhangsan', 'lisi', 'wangwu']

• 方式二：

// let 数组名: Array<类型> = [值1， 值2]  // 泛型语法
let nameList: Array<string> = ['zhangsan', 'lisi', 'wangwu']

数据类型 | 元组

ts 中元组就是一个规定了元素数量和每个元素类型的“数组”， 而每个元素的类型可以不同。
**元组中的每个元素必须与声明的类型保持严格一致，否则会报错。

q：为什么要用元组？
a：TS中数组元素类型必须保持一致，如过需要不同元素，就要用到元组。

语法：

// let 元组名: [类型1， 类型2， 类型3] = [值1， 值2， 值3]
let tup1: [string， number, boolean] = ['zhangsan', 18, true]

元组特点：

• 声明时必须指定元素个数
• 必须指定每个元素类型

数据类型 | 枚举

语法：

/*
 enum 枚 = 举名 {
	枚举项1 = 枚举值1
	枚举项2 = 枚举值2，
	...
}
// 枚举项一般用英文和数字； 枚举值用 整型 数字
 */

enum Animals {
	cow: 1,
	horde: 2,
	donkey: 3
}

// 使用默认枚举  枚举值将自动生成从 0 开始的 数值
enum Animals {
	cow, // -> 0
	horde, // -> 1
	donkey // -> 2
}

使用示例：

// 创建动物枚举
enum Animals {
	cow: 1,
	horde: 2,
	donkey: 3
}
// 创建 骡子动物变量
let animal1:  Animals  = Animals.donkey
console.log(animal1) // 3

数据类型 | any

ts 中any 表示任意类型，一般在获取 dom，接收用户未知类型输入，或不确定返回什么类型值时使用。

语法：

let txtName: any = document.getElementById('txtDom')

数据类型 | void

ts 中 void 表示没有类型，一般用在无返回值的函数。

• ts 中函数必须指定返回值类型，除了void 类型函数。

语法：

 // 一般函数
 function sayHi(): string {
 	return 'hello~ '  // 调用 ： let re1 = sayHi()
 }
// 无返回值
 function bye(): void{
 	console.log('bye~') // 调用 ： sayHi()
 }

注意： TS中函数参数必须指定数据类型，且形参实参数据类型与参数个数需保持一致（可选参数除外）。

数据类型 | never

ts 中 never 表示不存在的值的类型， 常用作为 抛出异常 或 无限循环 的函数返回类型
语法：

 function test1(): never{
 	while (true) {}
 }
 // ------------------------------------------------------------
 function test2(): never{
 	throw new Error('大哥按错了')
 }

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

let x: never = test1
let y: string = test1

数据类型 | 类型推断

如果变量的声明和初始化是在同一行，可以省略掉变量类型的声明。

let 变量名= 值 相当于 let 变量名: 变量类型 = 变量值
如 let age= 18 此时age变量的类型被推断为 number ，在对其赋 其他 类型值， 会报错。

数据类型 | 联合类型

表示变量取值可以为多种类型中的一种。

语法：

// let 变量名: 变量类型1 | 变量类型2 = 值
let unknow: string | null = 'zhangh'