TypeScript（一）：TypeScript基本理解

TypeScript基本理解

为什么使用TS

• JavaScript发展至今，没有进行数据类型的验证
• 而我们知道，在编程阶段，错误发现的越早越好
• 而TS就解决了JS的这个问题

认识TypeScript

• TypeScript是拥有类型的JavaScript超级，它可以编译成普通、干净。完整的JavaScript代码
• 我们可以将TypeScript理解成为 加强版的JavaScript
• **JavaScript拥有的特性，TypeScript全部都是支持的，**并且，紧随着ECMAScript的标准
• Typescript在 实现新特性的同时，总是保持和ES标准的同步甚至领先
• TypeScript最终会被编译成JavaScript代码

TypeScript特点

• 始于JavaScript，归于JavaScript
• TypeScript是一个强大的工具，用于构建大型项目
• 拥有先进的JavaScript

TypeScript的编译环境

• 前面我们知道TS最终会转成JS代码的
• 那么TS代码运行也需要响应的环境
• npm install typescript -g全局安装TypeScript代码运行环境
• 创建 index.ts文件

//let 变量名称：变量类型 = 
//String：大写的是JavaScript中的包装类，new String()
//string：小写的是TypeScript定义变量的类型
let message: string = "123"
console.log(message)

• 而后通过 tsc index.ts将ts文件编译成js文件，进行使用

TypeScript的运行环境

• 若每次使用 tsc命令，将ts转成js，比较麻烦
• 我们也可以使用ts-node直接运行
• 使用ts-node需要全局安装两个包
  • npm install ts-node -g
  • npm install tslib @type/node -g
• 而后运行 ts-node index.ts即可

变量定义

• 上面的例子中，我们对变量定义进行了说明

//   let/const 变量名称:数据类型（类型注解） = 赋值
let message:string = "hello"  //string就是类型注解

变量的类型推导（推断）

• 在实际书写过程中，我们无需为每一个变量，指定数据类型
• 因为 TypeScript会根据赋值的内容，自动推导出变量的类型

let message = "hello"

• 而const声明的变量，则是 字面量类型

const message:"hello" = "hello"
const num:1.88 = 1.88

JavaScript和TypeScript的数据类型

• TypeScript是JavaScript的一个超集
  • JS拥有的特性TS全部拥有

JavaScript类型-number类型

• 数字类型是开发中经常用到的类型，不区分整数型和浮点数类型

let num:number = 1.88

JavaScript类型-boolean类型

let flag:boolean = true

JavaScript类型-string类型

let str:string = "hello"

JavaScript类型-Array类型

• 明确指定<数组>的类型注解

  • 1.string[]：数组类型，并且数组中存放的字符串类型

  let names:string[] = ['1','2']
  

  • 2.Array与上述表述的一致，只是另外一种写法

  let num:Array<number> = [1,2,3]
  

JavaScript类型-Object类型

//类型注解，要和实际的内容相对应，否则就会报错
let obj:{
    name:string,
    age:number
} = {
    name:"zhangcheng",
    age:18
}

• 但是不能写成以下写法
  • 下面的写法相当于是一个空对象，在后续的操作中，都会报错

let obj:object = {
    name:"zhangcheng"
}

JavaScript类型-null和undefined类型

let n: null = null
let unde:undefined = undefined

函数的类型

函数的参数类型

• 在定义函数的时候，对于传入的参数，我们可以指定传入参数的类型
• 同时参数的个数也会限制死

function sum(num1:number,num2:number){}

函数的返回值类型

• 通常情况下，是不用对函数的返回值进行类型的注解，因为会自动推导出来
• 但是明确的写明类型注解，会有助于代码的阅读性
  • 通常在小括号最后对函数的返回值进行类型注解

function sum(num1:number,num2:number):number{}

匿名函数的参数

• 针对于匿名函数，会根据上下文自动推导出参数的类型，不需要特别的去指定

let arr = ["zhangsan","lisi"]
arr.forEach((item,index,arr)=>{})
//item,index,arr属于上下文类型，不需要特殊的指定

对象类型与函数类型联合使用

//参数名称:{属性1：类型注解，属性2：类型注解，....}
function printPoint(ponit: { x: number, y: number }) {
    console.log(ponit.x,ponit.y);
}

//传入参数的时候，一定要包含设定好的属性
printPoint({x:100,y:200})

• 同时，有另外一种写法

type ponitType = {
    x: number
    y: number
    //z表示可选属性，可以传入，可以不传入
    z?:number
}

//参数名称:{属性1：类型注解，属性2：类型注解，....}
function printPoint(ponit: ponitType) {
    console.log(ponit.x,ponit.y);
}

//传入参数的时候，一定要包含设定好的属性
printPoint({x:100,y:200})

TypeScript类型-any类型

• 在某些情况下，我们无法确定一个变量的类型，并且这个变量的类型可能会发生变化，可以使用any类型
• 对于 any类型的变量，我们可以对变量赋值任何值

let a:any = "why"
a = 123

• 一般在数据类型十分复杂的时候，我们可以使用any类型，但是不推荐到处使用any，也不推荐不使用any

TypeScript类型-unknown类型

• unknown是TypeScript中比较特殊的类型

• unknown类型的变量，做所有的操作前都是不合法的

  • 因此在做操作前，需要进行类型校验 称类型缩小

let str: unknown = "123456"

//直接取length会报错
// console.log(str.length);

//需要进行类型校验
if (typeof str === "string") {
    console.log(str.length)
}

• 与 any类型的区别
  • any类型，做所有的操作都是合法的，无需进行类型的校验
  • 而unknown类型，做所有的操作都是非法的，需要进行类型的校验

TypeScript类型-void类型

• void通常用来指定一个函数是没有返回值的，就是void类型
• 在TS中如果一个函数没有任何的返回值，那么返回值的类型就是void类型
  • 而js不返回任何东西，默认返回的就是undefined类型
• 应用场景
  • 用于指定函数返回值类型是void类型
  • 同时，可以指定传入的参数是函数类型

//指定一个变量是函数 let foo:()=>void = () => {}
function delayFn(fn: () => void) {
    setTimeout(() => {
        fn()
    },1000)
}

delayFn(() => {
    console.log(123);
})

TypeScript类型-never类型

• 开发中很少实际去定义 never类型，通常是根据上下文自动推导出来的 never类型

//情况一不会自己定义never类型，通常是自动推导出来的
//1.死循环
function foo(): never {
    while (true) {
        console.log(123)
    }
}
foo()

//2.函数返回值是空的情况
function foo1() {
    return []
}

• 在开发框架或者工具的时候，可能会用到never

function changeMessage(message: string | number) {
    switch (typeof message) {
        case "string":
            console.log(message.length)
            break
        case "number":
            console.log(message);
            break
        default:
            //正常来说永远不会执行到default中的代码
            const check:never = message 
    }
}

changeMessage(123)

//但有一天某个人对工具函数进行了更改，增加了一种boolean的情况，且没有考虑boolean的case，则default就会提示报错，让开发者能够看到问题

• nerver表示永远不会发生值的类型，不能接受任何值

TypeScript类型-tuple类型

• 元组类型
• 与 数组类型十分相似，但是也有区别
  • **数组类型：**里面存放的数据要保持类型统一，虽然可以不统一，但是取值的时候，不能明确类型
  • 元组类型：可以存放不同的数据类型，且可以通过下标进行取值，取出来的值的类型是明确的

//数组的定义方法 类型[]
let arr: (string | number)[] = [123, "123"]

//元组的定义方法 [类型1，类型2]
let tuple: [string, number, boolean] = ["123", 123, true]
console.log(tuple[0]);