快速入门TypeScript

了解TypeScript

 TypeScript 简称：TS，是 JavaScript 的超集。简单来说就是：JS 有的 TS 都有。JS写的代码在TS的环境下都能跑。

   它与JS最大的不同就是，在 JS 的基础之上，为 JS 添加了类型支持。TypeScript = Type + JavaScript

   TypeScript 是微软开发的开源编程语言，可以在任何运行 JavaScript 的地方运行。

为什么要为 JS 添加类型支持?

JS的缺陷

1. JS 的类型系统是弱类型的，没有类型的概念

   let ar = 11  // 这里是数值
   ar = []  // 偷偷的改成了数组类型
   arr.toFixed(2) // 这里会报类型错误

   没有类型校验，导致了在使用 JS 进行项目开发时，会经常遇到类型错误的问题，增加了找 Bug、改 Bug 的时间，严重影响开发效率。

2. JavaScript 属于动态类型的编程语言

   边解释边执行，错误只能在运行阶段才能发现。

TS属于静态类型的编程语言

1. 它要先编译，再执行。不能直接执行，需要编译成js才能执行

2. 它会在编译期间做类型检查，从而提前发现错误。配合 VSCode 等开发工具，TS 可以提前到在编写代码的同时就发现代码中的类型错误，减少找 Bug、改 Bug 时间

TypeScript的使用

安装包：npm i -g typescript

• typescript 包：用来编译 TS 代码的包，提供了 tsc 命令，实现了 TS -> JS 的转化

• 验证是否安装成功：tsc –v (查看 typescript 的版本)

注意：Mac 电脑安装全局包时，需要添加 sudo 获取权限：sudo npm i -g typescript

编译并运行 TS 代码

步骤

1. 创建js文件。例如 hello.ts 文件（注意：TS 文件的后缀名为 .ts）

2. 编译。将 TS 编译为 JS

   在终端中输入命令，tsc hello.ts（此时，在同级目录中会出现一个同名的 JS 文件）

3. 执行 JS 代码。

   1. 在node中运行。在终端中输入命令，node hello.js

   2. 在浏览器中运行。

类型推论机制

在 TS 中，某些没有明确指定类型的情况下，TS 的类型推论机制会自动提供类型。好处：由于类型推论的存在，有些情况下的类型注解可以省略不写

发生类型推论的 2 种常见场景

1. 声明变量并初始化时

2. 决定函数返回值时

// 变量 age 的类型被自动推断为：number
let age = 18

// 函数返回值的类型被自动推断为：number
function add(num1: number, num2: number) {
  return num1 + num2
}

常用基础类型

将 TS 中的常用基础类型分为两类

1. JS 已有类型

   1. 原始类型：number/string/boolean/null/undefined/symbol

   2. 对象类型：object（包括，数组、对象、函数等对象）

2. TS 新增类型

   1. 联合类型

   2. 自定义类型(类型别名)

   3. 接口

   4. 元组

   5. 字面量类型

   6. 枚举

   7. void

   8. any 等

• 注意：

  1. 原始类型在 TS 和 JS 中写法一致

  2. 对象类型在 TS 中更加细化，每个具体的对象（比如，数组、对象、函数）都有自己的类型语法

原始类型

• 原始类型：number/string/boolean/null/undefined/symbol

• 特点：简单，这些类型，完全按照 JS 中类型的名称来书写

// 数值类型
let age: number = 18

// 字符串类型
let myName: string = '小花'

// 布尔类型
let isLoading: boolean = false

// undefined
let un: undefined = undefined

// null
let timer:null = null

联合类型

格式如下：

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

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

数组类型

有两种写法格式：

let 变量: 类型[] = [值1，...]

let 变量: Array<类型> = [值1，...]

let arr : number[] = [1,2,3] //  arr 必须是数组且每个元素都必须是数字

let arr1 : Array<string> = ['1','2','3'] //  arr1 必须是数组且每个元素都必须是字符串

拓展示例

问题：如何定义一个数组，它的元素可能是字符串类型，也可能是数值类型。

分析：结合联合类型来使用。

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

 这里会有个有优先级的问题，所以拿小括号包起来。

类型别名

作用

1. 给类型起别名

2. 定义新类型

  代码演示：

type s = string // 定义

const str1:s = 'abc'
const str2:string = 'abc'

函数的类型

函数的类型实际上指的是：函数参数和返回值的类型

格式

// 普通函数
function 函数名(形参1： 类型=默认值， 形参2：类型=默认值): 返回值类型 { }

// 箭头函数
const 函数名（形参1： 类型=默认值， 形参2：类型=默认值):返回值类型 => { }

示例

// 函数声明
function add(num1: number, num2: number): number {
  return num1 + num2
}

// 箭头函数
const add = (num1: number=10, num2: number=20): number => {
  return num1 + num2
}

add（1,'1') // 报错

函数-统一定义函数格式

把拥有相同形参和实参的函数当做一个整体，来定义

提炼自定义类型

type Fn = (n1:number,n2:number) =>number 
const add1 : Fn = (a,b)=>{return a+b }

函数返回值是void

void 类型

如果函数没有返回值，那么，函数返回值类型为：void

function greet(name: string): void {
  console.log('Hello', name)
  //
}

如果一个函数没有返回值，此时，在 TS 的类型中，应该使用 void 类型，有如下三种情况会满足

• 不写return

• 写return ，但是后面不接内容

• 写return undefined

// 如果什么都不写，此时，add 函数的返回值类型为： void
const add = () => {}
// 这种写法是明确指定函数返回值类型为 void，与上面不指定返回值类型相同
const add = (): void => {}

// 但，如果指定 返回值类型为 undefined，此时，函数体中必须显示的 return undefined 才可以
const add = (): undefined => {
  // 此处，返回的 undefined 是 JS 中的一个值
  return undefined
}

void和undefined的区别

1. 如果函数没有指定返回值，调用结束之后，值是undefined的

2. 当不能直接声明返回值是undefined

function add(a:number, b:number): undefined { // 这里的会报错
  console.log(a,b)
}

函数-可选参数

场景

使用函数实现某个功能时，参数可以传也可以不传。

例如：数组的 slice 方法，可以 slice() 也可以 slice(1) 还可以 slice(1, 3)]

这种情况下，在给函数参数指定类型时，就用到可选参数了

格式

可选参数：在可选参数名的后面添加 ?（问号）

function mySlice(start?: number, end?: number): void {
  console.log('起始索引：', start, '结束索引：', end)
}

注意：可选参数只能出现在参数列表的最后，也就是说可选参数后面不能再出现必选参数

可选和默认值的区别

相同点： 调用函数时，可以少传参数

区别：设置了默认值之后，就是可选的了，不写就会使用默认值； 可选的并一定有值。

注意：它们不能一起使用。优先使用默认值

对象类型

格式

const 对象名: {
    属性名1：类型1，
  属性名2：类型2，
  方法名1(形参1: 类型1，形参2: 类型2)： 返回值类型,
  方法名2:(形参1: 类型1，形参2: 类型2)=>返回值类型
} = { 属性名1: 值1，属性名2：值2  }

 可选属性用 ?

示例

const goodItem:{name: string, price: number, func: ()=>string }  = {
    name: '手机', 
    price: 2000, 
    func:function(){ return '打电话' }
}

说明:

1. 使用 {} 来描述对象结构

2. 属性采用属性名: 类型的形式，如果是多行，可以省略,

3. 方法采用方法名(): 返回值类型的形式

4. 可选使用 ?

对象类型-类型别名

把类型注解封装一下，定义类型

示例

// 创建类型别名
type Person = {
  name: string，
  age: number
  sayHi(): void
}

// 使用类型别名作为对象的类型：
let person: Person = {
  name: '小花',
  age: 18
  sayHi() {}
}

function f1 (p: Persion) :void {
  
}

对象类型-接口

场景

当一个对象类型被多次使用时，可以有两种方式来来描述对象的类型，达到复用的目的。

1. 类型别名， Type

2. 接口, interface

格式

x interface 接口名  {    属性1: 类型1, 属性2: 类型2,}

示例

interface IGoodItem  {
    name: string, price: number, func: ()=>string
}


const good1: IGoodItem = {
    name: '手表',
    price: 200,
    func: function() {
        return '看时间'
    }
}

const good2: IGoodItem = {
    name: '手机',
    price: 2000,
    func: function() {
        return '打电话'
    }
}

解释：

1. 使用 interface 关键字来声明接口

2. 接口名称(比如，此处的 IPerson)，可以是任意合法的变量名称，推荐以 I 开头

3. 声明接口后，直接使用接口名称作为变量的类型

接口继承

分析

如果两个接口之间有相同的属性或方法，可以将公共的属性或方法抽离出来，通过继承来实现复用

继承格式

interface 接口2 extends 接口1 {
    属性1： 类型1， // 接口2中特有的类型
    ... 

接口继承的示例

interface Point2D { x: number; y: number }
// 继承 Point2D
interface Point3D extends Point2D {
  z: number
}

解释：

1. 使用 extends(继承)关键字实现了接口 Point3D 继承 Point2D

2. 继承后，Point3D 就有了 Point2D 的所有属性和方法(此时，Point3D 同时有 x、y、z 三个属性)