TypeScript 基础数据类型-联合类型-类型推导等

TypeScript
, , ,

JavaScript类型缺失

在前端工程师最要接触的编程语言就是 JavaScript 了。因为前端领域的迅速发展，让 JavaScript 变得更加强大。它在也不是只能跑在浏览器上的语言。

著名的Atwood定律：Stack Overflow的创立者之一的 Jeff Atwood 在2007年提出了著名的 Atwood定律。

  • any application that can be written in JavaScript, will eventually be written in JavaScript.
  • 任何可以使用JavaScript来实现的应用都最终都会使用JavaScript实现。

Atwood定律也在被印证。现在 JavaScript 能干的事情就多了。

  • Web端的开发一直使用的编程语言就是 JavaScript
  • 桌面端开发我们可以借助于 Electron 进行开发。像程序员日常使用的代码编辑器 Microsoft VS Code、听歌的 国外Spotify，国内网易云音乐等都是借助于 Electron 这门技术开发的。
  • 移动端：自 2014 年乔布斯发布了它的 iPhone 4 ，代表着移动端时代到来。前端也有着开发移动端的跨端技术。如 React Native、Taro等
  • 小程序：国内很多餐饮品牌为了方便用户点单。都有了自己的微信小程序、支付宝小程序等。小程序开发也是使用的 JavaScript 进行开发。
  • 服务端：开发者可以借助于 Node.js 进行服务端的开发。像 Uber 、 Netflix 等公司都在借助于 Node.js 开发自己的后端。

然而 JavaScript 有很多优点，相对应的它也有许多缺点。这其中类型的缺乏就是它的缺点之一。这也意味着变量的类型是在运行时，而不是在编译是。这就带来了以下几个问题。

  1. 类型不安全：由于没有类型检查，开发者很容易犯错误。如将字符串赋值给一个数字的变量。这也意味着开发者，只能在编译时才能发现这个错误。错误最好要在编写时就发现。
  2. 可读性和维护性差：由于类型的不明确，加上一个项目不仅仅是由一名前端工程师开发。每个人写的代码，如果没有类型的注解很难明白别人写的代码究竟是用来干什么的。
  3. …..

为了解决这个问题。Microsoft 在 2012年 推出了 TypeScript 这门语言。它是 JavaScript 的超集。增加了静态类型检查功能。

TypeScript 编译环境

我们需要全局安装 TypeScript ，这样才能编写 TypeScript 代码。

// 安装命令

npm install typescript -g

// 查看当前版本

tsc –version

安装完后，要想将书写的 TypeScript 运行在浏览器上，有两种方式：

  1. Webpack 环境
  2. ts-node

// 安装 ts-node

npm install ts-node -g

// 运行

ts-node math.ts

TypeScript 类型定义

变量声明

var /let / const 标识符: 数据类型 = 赋值;

代码

1
let name: string = '世界，你好';

定义完变量类型后，后续赋值别的类型的值。TypeScript 就会报错。

除 String 类型外，还有

  • Number（包括小数、浮点数、整数等）
  • boolean
  • undefined
  • null
  • … 如ES6以后新增的Symbol

数组

1
2
3
const names: string[] = ['lizhien','liuyifei','chenduling']// 数组里的值只能是 String
const ages: number[] = [19,29,29] // 数组里的值只能是 Number 
const arr: ary[] = ['zhien',18,{}] // 数组类型皆可

对象

1
const names:{name:string,age:number} = {name:'zhien',age:18}

函数参数和返回值类型

1
2
3
function sum(num1: number,num2: number) : number {
    return num1+num2
}

匿名函数的参数类型

一般我们不需要给匿名函数进行类型注解。TypeScript 会根据类型推导，推导出函数参数类型和返回值类型。

可选类型

1
2
3
4
5
6
7
function coordinate(point:{x: number, y:number, z?:number}) {
    console.log('x 坐标为', point.x)
    console.log('y 坐标为', point.y)
    if(point.z) {
       console.log('z 坐标为', point.z)  
    }
}

TypeScript 类型 - any类型

某些情况下我们不能确定一个变量的类型，并且它可能发生变化。这是候我们就可以使用 any 类型。

  • 我们可以对 any 类型的变量进行任何操作。包括不存在的方法、属性。
  • 我们可以对 any 类型的变量赋任意类型的值，如数字、对象、数组等。
1
2
3
let a: any = 'why',
a = 123
a = true

TypeScript 类型 - unknown 类型

unknown 是 TypeScript 中特殊的一种类型，它用于描述类型不确定的变量。

  • 和 any 类型类似。但对它做事情都是不合法的。如
1
2
3
4
5
6
7
8
9
10
11
let result: unknown
result = 'nihao',
result = 18

// 直接调用 unknown 类型的属性和方法是不合法的
console.log(result.length)

// 必须通过类型缩小来调用 unknown 类型的属性和方法
if(typeof result === 'string') {
    console.log(result.length)
}
  • 和 any 类型最大区别是在没有类型缩小时，不能对它做任何事情。
  • any 类型存在最大的缺陷就是，可以任意调用属性和方法。

TypeScript - void类型

void通常来指定一个函数是没有返回值，那么它的返回值就是 void 类型

1
2
3
4
5
6
7
function sum(num1: number, num2: number) {
    console.log(num1,num2)
}
// 等于下面函数
function sum(num1: number, num2: number): void {
    console.log(num1,num2)
}
  • 可以返回 undefined 给void类型，但不允许返回其他类型。

TypeScript- never类型

该类型适合开发工具库或开发框架，日常业务是接触不到或很少的时候才使用该类型。具体可以上网搜索该类型。

TypeScript- tuple类型

tuple是元组类型。它和数组类型很想，下面是和数组类型的区别

  • 首先，数组类型通常建议存储相同类型的元素，不同类型的元素则不推荐存储。
  • 其次，元组每个元素都有自己特性的类型，根据索引值可以获得对应的值
1
const info:[name:string,age:number,color:string] = ['zhien',18,'purple']

变量的类型推导（推断）

开发中我们不可能所有变量都添加上类型注解。所以 TypeScript 会根据第一次赋值来推断出变量是什么类型。

1
2
let name = '李知恩' // string
const name = '李知恩' // 类型为字面量类型 '李知恩'

总结

TypeScript 是 JavaScript 的超集，解决了 JavaScript 类型缺失的问题。通过类型定义、类型注解、类型推导等特性，提高了代码的可读性、可维护性和安全性。在实际开发中，我们可以灵活运用 TypeScript 的各种类型，使代码更加健壮和可靠。