TypeScript之基础用法

什么是typeScript ?

概念 : TypeScript是具有类型语法的javascript，是一门强类型的编程语言。

typeScript 带来的好处 ?

1. 静态类型检查,提前发现代码错误, 当我们定义一个变量并设置类型后,重新赋值为不为定义的类型时,会静态报错

    2 .良好的代码提示，提升开发效率 , 当我们使用v-for 渲染一个数据时,会提示数据中的元素,减少代码中单词写错的问题        

 

如何安装编译TS的工具包 ?

搭建手动编译环境

1. 安装typeScript包 ( 编译引擎 ) ->注册tsc 命令 npm install -g typescript
2. 需要新增 hello.ts 文件 , 执行 tsc hello.ts 命令 生成hello.js文件
3. 执行node hello.js 运行js文件查看效果

搭建自动编译环境

基于工程化的TS开发模式（webpack / vite），TS的编译环境已经内置了，无需手动安装配置，通过以下命令即可创建一个最基础的自动化的TS编译环境

npm create vite@latest ts-pro -- --template vanilla-ts

什么是类型注解 ?

类型注解值的是给变量添加类型约束 :

1. 添加类型注解能是变量只能被赋值为约束好的类型

2. 在编码过程中能够有相关的提示

给变量定义类型注解方法 => let 变量 : 类型 = 值

简单类型注解示例 :

let name: string = '小明'
let age: number = 18
let isOk: boolean = true
let u: undefined = undefined
let n: null = null
let s: symbol = Symbol()
let big: bigint = BigInt(123)

什么是类型推论 ?

类型推论是TS的机制,简单来说某些没有明确指出类型的地方,TS类型推论机制就会帮助提供类型, 使得有些场合下的类型注解是可以省略不写的

常见场景 :

1. 声明变量并初始化时

   2.  决定函数返回值时

使用类型推论小技巧 :
1 . 能省略的地方就省略

2 . 如果不知道类型 , 可以通过鼠标放在变量名称上,利用VSCode的提示来查看类型

ts中常见用类型注解

数组类型注解

给数组添加类型约束

语法1 :

let arr: number[] = [1,2,3]
// 代码表示:  变量arr只能用来保存数组类型，并且数组的元素必须是number类型

语法2 : 泛型函数

let arr : Array<number> = [1,2,3]
// Array 表示数组 
// <> 表示泛型
// number 表示number型

联合类型

概念 : 将多个类型合并成一个类型对变量进行注解

  |  竖线在TS中叫做 联合类型 , 即：由两个或多个其他类型组成的类型，表示可以是这些类型中的任意一种

需求: 当数组中既有number,又有string类型时,我们就要用到联合类型

示例代码:

let arr: (number | string) = [1, 2, '3']

函数类型

1- 基本使用

概念：函数类型是指给函数添加类型注解，本质上就是给函数的参数和返回值添加类型约束

const fn = (num1: number,num2: number): number => {
  return num1 + num2
}

说明：

1. 函数参数注解类型之后不但限制了参数的类型还限制了参数为必填
2. 函数返回值注解类型之后限制了该函数内部return出去的值必须满足类型要求

好处：

1. 避免因为参数不对导致的函数内部逻辑错误
2. 对函数起到说明的作用

2- 函数表达式

函数表达式的类型注解有两种方式：

1. 参数和返回值分开注解
2. 函数整体注解

参数和返回值分开注解

const add1 = (a: number ,b: number): number => {
  return a + b
}

函数整体注解（只针对于函数表达式）

type AddFn =  (a: number ,b: number) => number
 // 函数返回值 是number : 类型注解
const add1: AddFn = (a, b) => {
  return a + b
}

函数可选参数

概念：可选参数表示当前参数可传可不传，一旦传递实参必须保证参数类型正确

 说明：lastName参数表示可选参数，可传可不传，一旦传递实参必须保证类型为string类型

函数无返回值 - void

概念：JS中的有些函数只有功能没有返回值，此时使用void进行返回值注解，明确表示函数没有函数值

function eachaArr(arr: number[]): void {
  arr.forEach(item => {
    console.log(item)
  })
}

注意事项：

1. 在JS中如果没有返回值，默认返回的是undefined
2. 在TS中 void和undefined不是一回事：
   1. undefined在TS中是一种明确的简单类型，如果指定返回值为undefined，那返回值必须是undefined类型
   2. void表示没有返回值

字面量类型

可以理解为 : 限制变量的取值范围 单个字面量就是一个类型

使用场景 :

1. 性别只能是 ’男‘ 和 ’女‘，就可以采用联合类型配合字面量的类型定义方案

示例 : 当我们定义字面量类型后,在使用时代码会给我们提示可选类型

 2 . ElementUI中的el-button组件按钮的type属性

type Props = {
  type: 'primary' | 'success' | 'danger' | 'warning'
}

any 类型

当值的类型为 any 时，可以对该值进行任意操作，并且不会有代码提示

示例代码

let obj: any = { x: 0 }  // any 就是任意类型

obj.bar = 100
obj()
const n: number = obj

解释:

• 以上操作都不会有任何类型错误提示，即使可能存在错误

两种隐式的 any 类型的情况

1. 声明的变量不提供类型也不提供默认值
2. 函数参数不加类型

原则:

1. 不推荐使用 any! 这会让 TypeScript 变为 “AnyScript”(失去 TS 类型保护的优势)
2. 除非临时使用 any 来“避免”书写很长、很复杂的类型

类型断言

有时候你会比 TS 更加明确一个值的类型，此时，可以使用类型断言（as）来指定更具体的类型

应用场景：把一个大类型 缩小 为更加具体的类型

格式：类型 as 具体类型

问题 获取页面中的id为link的a元素，尝试通过点语法访问href属性

发现代码报错了

原因是：getElementById方法返回值的类型是 HTMLElement，而这个类型只包含所有标签公共的属性或方法，这个类型太宽泛(不具体)，不包含 a 标签特有的 href 等属性。

解决方法 : 使用类型断言

 

解释:

1. 使用 as 关键字实现类型断言
2. 关键字 as 后面的类型是一个更加具体的类型（HTMLAnchorElement 是 HTMLElement 的子类型）
3. 通过类型断言，aLink 的类型变得更加具体，这样就可以访问 a 标签特有的属性或方法了

类型别名--type

定义 : type 自定义名字 = 类型 ( type 定义 类型的方法 )

注意 : 自定义名字可以是任意合法字符串,一般 首字母大写

作用 : 将存在重复类型注解优化为一个变量存起来

示例代码 :

const arr1:(number | string)[] = [1, '1'] 
const arr2:(number | string)[] = ['a', 'b', 3] 



// 改造上述代码
type ArrType = (number | string)[]
const arr1: ArrType = [1, '1'] 
const arr2: ArrType = ['a', 'b', 3]