TypeScript实例讲解(二)

623 阅读3分钟

接上一篇:TypeScript实例讲解(一)

本篇内容:TypeScript静态类型,以及类型注解与类型推断。

静态类型

静态类型分类

TypeScript 静态类型分两种,一种是基础静态类型,一种是对象类型。
基础类型:number、string、null、undefined、symbol、boolean、void
对象类型:普通对象、数组、class(类)、function(函数)

// 定义一个基础静态类型(number类型)的变量
const count: number = 2021
// 定义一个对象类型的变量
const number: number[] = [1, 2, 3]

TypeScript 要求我们为每一个变量注明类型。静态类型不仅让变量的类型无法更改,而且这个变量上的属性和方法也是确定的。因此静态类型可以帮助我们更直观地判断变量或属性的内容是什么。

函数的静态类型

函数的静态类型有两种写法,如下:

// 方法一
const toNumber = (str: string):number => {
    return parseInt(str, 10)
}
// 方法二
const toNumber: (str: string) => number = (str) => {
    return parseInt(str, 10)
}

上面我们用两种方法申明了一个功能为将字符串转为数字的函数,函数需要同时声明形参类型和返回值类型。其中方法一中的返回值类型可以省略,TypeScript 可以推断出来,具体为什么我们接着往下看。

类型注解与类型推断

定义

类型注解(type annotation):我们主动告诉 TypeScript 申明的变量是什么类型。比如: let count: number = 123
类型推断(type inference):TypeScript 也会自动的去尝试分析变量的类型。比如:let count = 123 并没有显式地告诉 TypeScript 变量的类型,但 TypeScript 会推断出该变量是一个number类型。

如果 TypeScript 能够自动分析出变量类型,我们就可以什么也不用做。那如果 TypeScript 无法分析出变量类型,我们就需要使用类型注解。

常见实例
const firstScore = 90;  // 变量firstScore可以不写类型注解
const secondScore = 70;  // 变量secondScore可以不写类型注解
const total = firstScore + secondScore;  // 这里的变量total也可以不写类型注解

虽然 TypeScript 要求我们为每一个变量注明类型,但这里的变量 total 能够自动推断出类型为number,我们就不需要手动地写类型注解了。

function getTotal(firstScore:number, secondScore:number){
    return firstScore + secondScore
}
const total = getTotal(1, 2)   // total的类型可以自动推断出来

这里 TypeScript 不知道 getTotal 函数会传进来什么具体类型的参数,所以需要手动加上类型注解。但变量 total 的类型可以自动推断出来。

其他实例

const date = new Date(); TypeScript 可以推断出来
const data = JSON.parse('{xxx}') 无法推断,需要手动添加类型注解
let a: number | string = 123 如果无法确定类型,我们可以为同一个变量申明多个类型

本篇完!如果文章对你有一点点帮助,请记得点个赞哦。