TS 简介

官方文档：TS 是一种由微软开发的自由和开源的编程语言。他是JS的一个超集，本质上向这个语言添加了可选的静态类型和基于类的面对对象编程

TS的优点：

  1. 更强大的静态类型检查：TypeScript引入了静态类型检查，可以在编译时发现潜在的类型错误，提供更可靠的代码。

  2. 更好的代码可维护性：通过类型注解和严格的类型检查，TypeScript可以提供更好的代码可读性和可维护性，减少了调试和维护代码的时间成本。

  3. 渐进式学习和迁移：TypeScript支持渐进式学习和迁移，可以将现有的JavaScript代码逐步迁移到TypeScript中，无需一次性重写整个代码库。

  4. 更多的语言特性和面向对象编程支持：TypeScript提供了更多的语言特性，如接口、类、泛型等，使得开发者可以使用更多的面向对象编程技术来组织和设计代码。

TS的缺点：

  1. 学习曲线陡峭：相对于其他前端开发语言，TypeScript的学习曲线要陡峭一些，因为它引入了类型系统和一些新的概念，需要一定的时间和精力来掌握。

  2. 繁琐的类型注解：在编写TypeScript代码时，需要为变量、函数和对象等添加类型注解，这增加了代码的冗余性和编写的复杂性。

  3. 需要编译：TypeScript是一种编译型语言，需要将TypeScript代码编译成JavaScript代码后才能运行。这增加了开发过程中的一些步骤和额外的时间成本。

TS 环境安装

在线环境使用

官网地址：https://www.typescriptlang.org/zh/

本地安装

# npm 全局安装TS
npm install -g typescript

# 检查Ts版本
tsc -v 

# 将TS文件转换为JS文件
tsc [ts文件名]

基础类型

number 数字类型

let num:number = 123
num = 222
num = "2222"  //报错，number 类型不能用于 string 类型

string 字符串类型

let str:string = "123"
str = 123 //报错，string 类型不能用于 number 类型

boolean 布尔类型

let bool:boolean = true
bool = 123 //报错，布尔不能分配给数字类型
bool = "123" // 报错，布尔不能分配给字符串类型

undefined 类型

undefined表示声明了变量但没有赋值

let name   // 没有赋值，默认为undefined
let obj = {}; console.log(obj.age)   // 访问对象不存在的属性，默认返回undefined

null 类型

null表示变量被明确赋值为空

let name = null

Any 类型

any 代表任意类型，不知道什么类型可以直接使用 any

建议：不要常使用 any 类型，要不然就和写 js 没什么区别了

let a:any = 1;
a = "2"
a = true

void 类型

没有类型或类型不存在，大部分应用在函数没有返回值的情况

function test():void{
  console.log("test")
  // return 2 // 报错，不能将类型number分配给void类型
  return undefined // 只有返回undefined类型不会报错，undefined代表没有返回值
}

// 默认不写void类型也能自动推断出是void类型
function test(){}

unknown 类型

用于表示可能的类型不确定的情况。对于unknown类型的值，不能直接进行操作，需要先进行类型检查或类型断言，确保操作的类型是正确的。这使得unknown类型比any类型更安全，因为它强制进行类型检查

let name: unknown // 定义一个unknown类型

// 错误的使用方式
function test(val: unknown) {
    val.toUpperCase()  // 报错：提示val类型为unknown类型，不能使用该方法
}

// 正确使用方式1
function test(val: unknown) {
    if (typeof val === "string") {
        val.toUpperCase()
    }
}

// 正确使用方式2
function test(val: unknown) {
    (val as string).toUpperCase()
}

never类型

never 类型表示的是那些永远不会发生的情况，比如抛出异常或者进入无限循环等。

// 抛出异常
function a():never{
  throw new Error('error')
}

// 无限循环
function b():never{
  while(true){
    
  }
}

数组类型

不定长度的

let arr = [1,2,3,4,5]

// 定义成TS写法，第一种写法
let arr:number[] = [1,2,3]

// 第二种写法
let arr2:Array<number> = [1,2,3]

元组类型

元组是定长的

let arr3:[number,string] = [1,'2']

元组的应用场景

// 方法的初始写法
function test(a:string,b:number){
  
}

// 改用元组的写法
function test(...args:[string,number]){
  
}

枚举类型

enum color {
    red,   // 0
    green, // 1
    yellow // 2
}

// 枚举从1开始计算
enum color2 {
    red = 1, // 1
    green,   // 2
    yellow   // 3
}

// 当我的green为8的时候，其他数值是多少
enum color3 {
    red, // 0
    green = 8,   // 8
    yellow   // 9
}

枚举的应用场景

// 枚举字符串的用法（用于定义和后端的接口）
enum color3 {
    red = "/color/red",
    green = "/color/green",
    yellow = "/color/yellow"
}