TypeScript简介、TS中的类型

JS缺点

js中没有类型，带来方便的同时，也带来了安全隐患。

• 变量没有类型
• 函数参数也没有类型

TS就是为了弥补JS的缺陷而诞生的。TS中指明了变量的类型，同时增加了许多js没有的操作。

TS简介

TS全称TypeScript。
ts的诞生不意味着替代了js：

• TypeScript是以JavaScript为基础构建的语言
• TypeScript扩展了JavaScript,并添加了类型
• TypeScript是JavaScript的一个超集
• 可以在任何支持JavaScript的平台中执行 TypeScript
• TS 不能 被JS解析器直接执行。所以需要把 ts 编译成 js 供浏览器解析。

ts可以编译成让任意版本的js

TS的环境搭建

• 安装node： ts 需要编译成 js 所以要下载 ts的编译器，同时ts的编译器是由node编写的所以要先下载node：http://nodejs.cn/
• 安装 ts编译器:npm i -g typescript
• 简单使用：
  编写ts文件
  01_hello.ts

console.log('Hello TS')

控制台输入 tsc .\01_helloTS.ts,就会生成编译完成的.ts文件。

TS的类型

类型声明

• 类型声明是TS非常重要的一个特点
• 类型声明格式：

let 变量:类型;
let 变量:类型 = 值;
function fn(参数:类型,参数:类型):类型{
……
}

• 指定类型后，当为变量赋值时，TS编译器会自动检查值是否符合类型声明，符合则赋值， 否则报错
  eg：
  如果声明一个变量a，同时指定它的类型为number，那么在以后的使用过程中a的值只能是数字。
  
  ng)

• 如果变量的声明和赋值是同时进行的，TS可以自动对变量进行类型检测，就无需使用:数据类型来指明变量类型了
  eg：
  

• 通过类型声明可以指定TS中变量(参数、形参)的类型
  js的函数参数没有数量和类型的规定，所以比较容易出错。

eg：js函数：

function sum (a,b){
    return a+b
}
console.log(sum(123,"456","多余参数"))

输出：

123456

ts函数：

function sum (a:number,b:number):number {
    return a+b
}
console.log(sum(123, 456))

传参不对会报错

ts类型列表

类型	描述
number	任意数字
string	任意字符串
boolean	布尔值true或false
字面量	限制变量的值就是该字面星的值
any	任意类型
unknown	类型安全的any
void	没有值(或undefined)
never	不能是任何值
object	任意的JS对象
array	任意]S数组
tuple	元组，TS新增类型，固定长度数组
enum	枚举，TS中新增类型

• 联合类型：可以使用|来连接多个类型

let a: string | boolean
a = 'yang'
a = true

• 字面量类型： let 变量名:字面量
  那么该变量的值只能是该字面量。

let b: 'male' | 'female'
b = 'male'
b = 'female'

• any表示的是任意类型，一个变量设置类型为any后相当于对该变量关闭TS的类型检测

let c: any//显示any
c = 10
c = 'yang'
c = true

let d //隐式any，声明变量如果不指定类型，则TS解析器会自动判断变量的类型为any

== any类型的变量可以赋值给任何类型的变量 ==

• unknown：表示类型未知

let e: unknown
e = 10
e = 'yang'
e = true

== unknown类型的变量只能赋值给 unknown类型的变量 ==
但是可以通过判断类型将unknow类型的变量赋值给其他类型的变量

let e: unknown
e = 10
e = 'yang'
let s:string
if (typeof e === "string") {
    s = e
}

也可以使用类型断言进行赋值：
类型断言可以用来告诉解析器变量的实际类型。
断言写法：
变量 as 类型或者<类型>变量

let e: unknown
e = 10
e = 'yang'
let s:string
s = e as string
s = <string>e

• void 用来表示空，常用作函数的返回值。
  如果函数的返回类型为void，就表示没有返回值的函数

function add(): void{  
}

• never 表示永远不会返回结果
  可以用于，程序因错误退出而没有返回值的情况

function fun(): never{
    throw new Error('报错了')
}

• object：对象

let a: object
a={}

但是我们一般不这样写，我们通常使用{}指定对象中可以包含哪些属性：
语法: {属性名:属性值,属性名:属性值}

let a: {
    name: string,
    age:number
}
a = {name:'yang',age:18}

使用 ? 表示该属性可选可不选

let a: {
    name: string,
    age?:number
}
a = {name:'yang'}

如果想要设置任意属性项：

// 表示一定要包含name属性，其他属性任意
// [propName:string]:any,意思是其他任意属性的属性名字必须是string类型,同时属性值是任意类型
let a: {
    name: string,
    [propName:string]:any
}
a = {name:'yang',age:18,gender:'男'}

• 指定函数类型
  设置函数结构的类型声明:
  语法: (形参:类型，形参:类型...）=>返回值

// 表示b是一个函数,并且参数是两个number类型的变量,返回值也是number类型
let b:(a:number,b:number)=>number

• array
  数组的类型声明: .
  let 数组名:类型[]
let 数组名:Array<类型>

// 字符串数组
let e: string[]
e = ['a', 'b', 'c', 'd', 'e']
// 数字数组
let f: Array<number>
f = [1, 2, 3, 4, 5, 6] 

• tuple:元组
  元组就是固定长度的数组
  语法: [类型，类型，类型]

let h: [string, string]
h=['hello','yang']

• enum：枚举
  枚举经常用于类型确定的情况。

enum Gender{
    Male = 0,
    Female = 1
}

应用：

enum Gender{
    Male = 0,
    Female = 1
}

let i: { name: string, gender: Gender }
i = {
    name: 'yang',
    gender:Gender.Female
}

类型中的连接符

• | 或

let c: string | number
c = 'yang'
c = 12

• & 与（同时）

let j:{ name: string } & { age: number }
j={name:'yang',age:18}

类型别名

type 类型别名 = 类型

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

函数的类型声明

eg：

function fn(参数:类型,参数:类型):类型{
……
}

键值对的类型声明

[key:string]: any： 表示一个键值对，key值是string类型，value是任意值，并且可有可无。

eg：

export interface Car {
    // 表示一个键值对：key值是string类型，value是任意值，并且可有可无
    [T: string]: any,
    code?: number | string,
    msg?: string,
    //表示data的值是一个键值对的对象
    data?: {[X: string | number]: any}
}