TypeScript基本数据类型

一、TypeScript介绍

1.TypeScript是由微软开发的一款开源的编程语言。
2.TypeScript是JavaScript的超集，遵循最新的ES6、ES5规范。TypeScript扩展了JavaScript的语法。
3.TypeScript更像后端java、C#面向对象语言。
4.最新的Vue、React也可以集成TypeScript。
5.Nodejs框架Nestjs、midway中用的就是TypeScript语法。

TypeScript相比JS的优势

· 优势一：类型化思维方式，使开发更加严谨，提前发现错误，减少改bug时间
· 优势二：类型系统提高了代码可读性，并使维护和重构代码更加容易
· 优势三：补充了接口、枚举等开发大型应用时JS缺失的功能

配置 typeScript+nodejs 和 react+typeScript 开发环境

1.安装nodejs(中文文档 http://nodejs.cn，node --version查看版本)
运行TS/JS代码的工具：Node.js
JavaScript的运行环境：浏览器、Node.js
Node.js让JavaScript摆脱了浏览器的束缚，可以实现服务端/桌面端编程等等。
2.npm(安装好node时就安装好了npm， npm -v查看是否安装成功)
3.typescript (终端命令，输入 cnpm install -g typescript 或者 yarn global add typescript，输入 tsc -v 查看是否安装成功）

VSCode中搭建typeScript+nodejs开发环境

1.新建一个空文件夹
2.使用VSCode打开文件夹
3.生成package.json 文件

npm init -y

VSCode生成自动编译.ts文件

4.创建tsconfig.json文件

tsc --init 生成配置文件

负责奖ts代dccg转为浏览器和nodejs识别的js代码

5.打开tsconfig.json文件，把其中的 “outDir" 和 ”rootDir“ 的注释打开，然后分别把后面的内容修改成 " ./out " 和 " ./src "，然后就要在左边的文件栏中创建这两个文件（out表示输出文件目录和src表示写代码的资源文件目录）

image.png

6.在src下创建一个index.ts文件， 同时会在out文件夹下生成index.js文件

image.png

7.运行index.ts的代码，需要修改 package.json 文件中的 "scripts"
修改前：

image.png

修改后：

image.png

因为修改了 outDir 使得生成的 Index.js 文件放在了定义的文件夹中，那么要编译 typeScript 的代码，实际上就是要编译它的 js 代码文件，所以这里也需要做相应的修改，否则运行报错

8.运行

 npm start

搭建 react + typeScript 开发环境

create-react-app react_typescript --typescript
创建成功，再输入终端命令： cd react_typescript
运行：yarn start

TypeScript

  1.编译型语言
  2.强类型语言
  3.真正面向对象的语言

变量

变量：是用来存储数据的容器，并且是可以变化的，为变量指定了类型就只能给这个变量设置相同类型的值
命名规则：变量只能出现：数字、字母、下划线、$，并且不能以数字开头。变量名称区分大小区

基本使用

let age: number = 18
let name: String = 'name'

var的作用域是函数作用域，在内层循环中和外层循环中使用的是同一个变量，在内层的修改会改变外层。
let的作用域是块级作用域，在内层循环中的变量和外层循环中的变量不是同一个变量，在内层的修改不会改变外层。
var：可以声明同名变量，只会得到一个变量，let一个变量只能声明一次

var age = 17; var age = 18; // 不会报错
let age = 0;  let age = 1; // 报错

const：定义的是常量，声明的的变量不能被重复赋值，const声明变量是必须立刻赋值；const声明的对象，对象本身是不能被赋值覆盖，但是对象的可修改属性是允许被修改值的

const num: Number = 10;
const info = {
    name: 'name',
    age: num,
}
info.name = 'na'
info.age = 20
console.log(info);
// { name: 'na', age: 20 }

数据类型

TypeScript中的数据类型分为两大类：原始类型(基本数据类型)、对象类型(复杂数据类型)
常用基本数据类型：number、string、boolean、undefined、null。

基本数据类型

数字类型
数字类型：包含整数和浮点型, 用number表示.

let age: number = 18 // 整数
let score: number = 18.8  // 浮点型

字符串类型
字符串：使用string表示文本数据类型。可以使用(" ")或者(' ')表示字符串

let age: number = 18
let name: sting = '姓名'
console.log( name + `${age}`)
// 姓名18
console.log(name+age) // 加号两边只要有一边是字符串，就执行字符串拼接
// // 姓名18

布尔型
最基本的数据类型就是简单的true/false值，不能用0和1代表
关键字： boolean

let is: boolean = true

数组
数组：是用于存放多个数据的集合。需要声明时指定数组中元素的类型，多个元素之间使用( , )分隔， 数组中的每一项内容称为元素
创建数组

// [](中括号)表示数组。如果数组中没有内容，就是一个空数组
1. [](中括号)表示数组
let 数组名: 元素类型[] = [ 元素1, 元素2, 元素3, ... ]
let list: string[] = []
2. 使用数组泛型表示，Array<元素类型>=[ 元素1, 元素2, 元素3, ... ]：
let list: Array = [1, 2, 3]
3. new Array()
let list: number[] = new Array(1, 2, 3)  // 创建一个数组
console.log(list)   // [ 1, 2, 3 ]
4.用any类型创建数组
var arr: any[] = ['12345', 2345, true]

// 数组长度
console.log(list.length)   // 3
// 修改元素，下标存在表示修改
list[1] = 5
console.log(list)   // [ 1, 5, 3 ]
// 添加元素，下标不存在表示添加
list[3] = 5
遍历数组
for (let i = 0; i < list.length; i++) {
    console.log(list[i])
}
// 1
// 5
// 3
// 5

· push()方法将一个或多个元素添加到数组的未尾，并返回该数组的长度

let num: number[] = [1, 3, 5]
num.push(7, 9)
console.log(num)
// [ 1, 3, 5, 7, 9 ]
let len = num.push()
console.log(len)
// 5

· forEach
forEach方法的参数是一个函数，这种函数也称为回调函数，是作为forEeach方法的实参传入，不需要指定类型注解
forEach方法的执行过程: 遍历整个数组，为数组的每一项元素，调用一次回调函数，无法中间停止

let num: number[] = [1, 3, 5, 7]
num.forEach(function(item, index){
    console.log(item, index)
})
// 1   0
// 3   1
// 5   2
// 7   3

some方法：遍历数组，查找是否有一个满足条件的元素(如果有，就可以停止循环)
循环特点：根据回调函数的返回值，决定是否停止循环，如果返回true，就停止；返回false就继续循环

let num: number[] = [1, 12, 9, 8, 6]
num.some(function(num){
    console.log(num)
    if (num > 10) {
        return true
    }
})
//  1
//  12

元组(Tuple)

元组属于数组的一种，就是固定长度的数组，合并了不同类型的对象，规定了元素数量和每个元素类型的数组，声明时要指完元素个数为每个元素规定类型，元素的类型和值必须一一对应。
语法：[数据类型, 数据类型, 数据类型, ... ]

let tuple: [string, number, boolean] = ['tuple', 20, false];
console.log( tuple);
// [ 'tuple', 20, false ]
console.log( tuple[1]);
// 20
修改元组
tuple[1] = 10
console.log(tuple)
// [ 'tuple', 10 ]

在声明一个元组时，可以在元素类型后缀一个问号 ？ 来说明元素是可选的，可选元素类型必须在必选元素类型后面，如果一个元素类型后面后缀了一个问号 ？，那么这个元素之后的所有元素类型都要后缀一个问号。

let tup1: [string, number?, number?]
tup1 = ['tup']
tup1 = ['tup', 1]
tup1 = ['tup', 1, 3]

使用 push() 方法向这个元组中添加新的元素

let tup2: [string, number, number] = ['tup2', 2, 3]
tup2.push('tup')
console.log(tup2);
// [ 'tup2', 2, 3, 'tup' ]

使用 pop() 方法删除元组中最后一个元素

let tup3: [string, number, number] = ['tup2', 2, 3]
tup3.pop()
console.log(tup3);
// [ 'tup2', 2 ]

解构元组

let tup3: [string, number, boolean] = ['tup3', 2, true]
let [a, b, c] = tup3
console.log(a);
console.log(b);
console.log(c);
//  tup3
//  2
//  true

枚举

枚举是组织有关联数据的一种方式，枚举使用 enum 关键词来声明一个枚举
使用场景：当变量的值只能是几个固定值中的一个，应该使用枚举来实现
数字枚举，声明了一个枚举成员均不带初始化值的枚举，枚举的成员值从 0 开始，依次递增；声明带初始化值的枚举，枚举的成员值是在上一个成员的基础上 +1；
· 枚举的特点
数字枚举经过编译之后会生成 lookup table (反向映射表)，即除了生成键值对的集合，还会生成值键对的集合。
字符串枚举没有自增行为，必须为每一个成员赋值
枚举成员是只读的，只可以访问，不能赋值
创建枚举的语法:

enum 枚举名称 { 成员1, 成员2, 成员3, ... }

enum enumTS {
    ts1,
    ts2 = 10,
    ts3,
    ts4 = 'ts4',
    ts5 = 'ts5',
}
console.log(enumTS);
//   {
//     '0': 'ts1',
//    '10': 'ts2',
//     '11': 'ts3',
//     ts1: 0,
//     ts2: 10,
//     ts3: 11,
//     ts4: 'ts4',
//     ts5: 'ts5'
//   }

console.log(enumTS.ts2);
// 10

Any

Any: 任意类型可以是 Number String Boolean Object ... 等等 JS 中存在的类型，一个变量设置为any类型后相当于对该变量关闭了TS的类型检测
声明变量如果不指定类型，TS会根据最后一次给变量赋值判断变量的类型，变量不赋值会自动判断变量的类型为any，any类型只能赋值给unknown类型

let any: any = 2
any = 'any'
console.log(any);
// any
let anyList: any[] = [1, '2', true, false]
console.log(anyList);
// [ 1, '2', true, false ]

unknown

unknown表示未知类型的值，实际上是一个类型安全的any
unknown类型的变量，不能直接赋值给其他变量，只能赋值给any类型

let u: unknown
u = 10
u = true
u = 'any'
let a
a = u

Void

void 表示空，是 undefined 的子类型，表示没有类型，一般用于表示没有返回值的函数。

// 表示方法没有返回任何类型
function say(): void {
    console.log('没有返回值')
}
say()
//  没有返回值

undefined、null 是never数据类型的子类型

· 共同点：只有一个值，值为类型本身(为其它值报错)。
· undefined：表示声明但未赋值的变量值(找不到值)
· null：表示声明了变量并已赋值，值为null(能找到，值就是null)

var num: number
console.log(num)   //   会报错(在赋值前使用了变量“num”)
var num: undefined
console.log(num)  //   不会报错
定义没有赋值就是undefined
var num: number | undefined
console.log(num)     //   不会报错

let u: undefined = undefined
let n: null = null
console.log(u, n)
// undefined null
let u: undefined
console.log(u)
// undefined 

never

never代表不存在的值的类型，常用作抛出异常或无限循环的函数返回类型
never类型是ts中的底部类型，所有类型都是never类型的父类，never类型的值可以赋给任意类型的变量

function nev(): never{
    while(true) {
        console.log('死循环')
    }
}

function nev(): never{
    throw new Error('错误')
}

Object

Object：表示任意的js对象

let a: object
a = {};
a = function() {

}

// {} 用来指定对象中可以包含的属性
// 语法:{ 属性名: 属性值, 属性名: 属性值, 属性名: 属性值, ... }
// 在属性的后边加上?，表示属性是可选的

let b: { name: string, age?: number}
b = { name: 'name'}
let c: { name: string, [info: string]: any }
c = { name: '1345', age: 10, sex: 12 }

类型别名

简化类型的使用

type type = 1 | 2 | 3 | 4 | 5
let k: type
let l: type
k = 1

联合类型

表示取值可以为多种类型中的一种
let 变量名: 变量类型1 | 变量类型2 | 变量类型3 = 值;