赤峰做网站公司长春网站建设技术支持

TypeScript

是JavaScript的超集，代码量比JavaScript复杂、繁多；但是结构更清晰

一、简介

为什么需要TypeScript？

JavaScript的困扰

1. 不清楚的数据类型
2. 不会指明代码的逻辑漏洞
3. 访问不存在的属性
4. 低级的拼写错误

Typescript会进行静态类型检查：在代码运行前对代码进行检查标红；将代码错误前置

如何编译TypeScript？

要将.ts编译成.js文件；需要配置TypeScript的编译环境

1. 全局安装TypeScript：npm i TypeScript -g

2. 初始化：tsc --init

   生成一个编译控制文件tsconfig.json

3. 监视ts文件：tsc --watch index.ts

   会生成一个对应的js文件，一有变化就会更新；并生成一个配置文件tsconfig.json

4. 修改配置文件：取消注释 noEmitOnError:true

   只要ts文件语法正确的时候才会更新ts

二、类型声明

声明变量时，需要对其进行类型声明；使用:来进行类型声明

let a: string // a是字符串变量，只能赋值字符串（官方推荐小写）
let b: String // 字符串对应的包装对象

function sum(a: number, b: number): number {return a + b
} //sum函数的参数必须的number，返回值也必须是number

三、数据类型

any

任意类型，意味着放弃类型检查；即可以存任意类型的值，也可以赋值给任意类型的变量

unknown

未知类型，类型安全的any，但是不能将unknown数据类型赋给其他类型

若要将unknown赋值给其他类型，可以这么做：

let a: unknown
a = "hello"
let b: string
b = a as string

let str:unknown
str = "world"
str.toUppercase() //有警告
(str as string).toUppercase() //无警告

nerver

不是任何值；我们一般不用，不然声明的变量将无用。一般是TypeScript主动推断出来的，或者是特殊的函数（不需要任何返回值）

void

通常用于函数返回值的类型声明；这个类型是，函数返回值为空（undefined），且不依赖函数返回值进行任何操作。

function fn():undefined{ ... } 
let result1 = fn() // 编码者可以利用函数的返回值
function fn():void{ ... } 
let result2 = fn() // 编码者不可以利用函数的返回值

object

object(小写)：非原始数据类型

Object(大写)：可以调用到Object方法的类型；通俗讲，除了null和undefined都可以。

1. 声明对象类型

  let person: { name: string, age?: number, [key: string]: any }//age?表示可选，// [key: string]: any 表示索引签名，任意数量的属性；key是any类型，value是string类型。

2. 声明函数类型

  let sum: (a: number, b: number) => number //指明传入的参数类型number，返回类型也为numbersum = function (x, y) {return x + y}

3. 声明数组类型

  let arr1:srtring[] //字符串数组let arr2:Array<string> //数字数组

tuple

元组类型 -> 特殊的数组类型。元素固定数量，可以是不同类型

!注意：元组不是关键字

let arr1 = [number,string] //两个元素，一个数字，一个字符串
let arr2 = [number,...[string]] //一个数字和任意个string

enum

枚举类型，定义一组命名常量；增强可读性，可维护性，程序员编写代码时不容易出错

1. 数字枚举

  enum Direction{ Up, Down, Left, Right }function walk(data:Direction){ //使用例子if(data === Direction.Up){console.log("向【上】走");}else if(data === Direction.Down){console.log("向【下】走")}else if(data === Direction.Left){console.log("向【左】走")}else if(data === Direction.Right){console.log("向【右】走")}}

2. 字符串枚举

  enum Direction{Up = "up",Down = "down",Left = "left",Right = "right"}

3. 常量枚举

使用const关键字定义，在编译时内联，避免产生额外的代码

：那么何为内联？

在TypeScript编译时，将成员引用替换成实际值，不生成额外枚举对象，减少Javascript代码量，提高运行速度。

Type

为任意数据类型创建别名；一般开头用大写

1. 创建别名

   type num = number // num是数字类型
   

2. 联合类型(高级类型)

   type Status = number|string //Status是数字或字符串类型
   type Gender = "男"|"女" //Gender是字符"男"or"女"
   

3. 交叉类型

   type Area = {height : number;width : number;speak():void;
   };
   

一些特殊情况

！当使用类型声明限制函数的返回值为空时，TypeScript并不会严格限制函数的返回值为空！

补充 数组方法map()，find()都是有返回值的操作；而forEach()是单纯遍历数组，没有返回值

type LogFunc = () => viod
const fn:LogFunc = () => {return 100 //允许返回非空值
}

为什么如此呢？就是为了兼容以下代码：

let src = [1, 2, 3]
const dst = [0]
src.forEach((e1) => dst.push(e1)) //forEach本身没有返回值，但是由于如果箭头函数只有一段代码可以不加{}，如果严格限制返回值必须为空的话，这样写就会不合法，所以提前用限制函数为void的话，不是严格要求返回值必须是空