【进阶】TypeScript 中的 Type

一 、什么是 TypeScript

TypeScript 是静态编程语言 , 是 JavaScript 的超集

• 简而言之：JavaScript 有的 TypeScript 都有。JavaScript 写的代码在 TypeScript 的环境下都能跑。
• TypeScript 中添加了类型支持。TypeScript =Type+ JavaScript
• TypeScript 解决了 JavaScript 语言本身的局限性，使用 TypeScript 其能够更好胜任开发大型项目

二 、JavaScript 和 TypeScript 区别

1 . 动态编程语言和静态编程语言

• JavaScript 属于动态编程语言

  • 动态编程语言 : 边解析边执行的语言, 错误只能在运行阶段发现

• TypeScript 属于静态编程语言

  • 静态编程语言 : 先编译(编译成js),再执行(不能直接执行, TSC工具将ts转换为js)

2 . 兼容性

TypeScript 包含 JavaScript ( JavaScript 所有语法 JavaScript 都支持 )

3 . TypeScript 有类型约束

TypeScript 有类型的约束 ( type ), 有强大的代码提示 ( 高度集成 vsCode 在写代码的时候就能发现问题 )

三 、TypeScript 的前端生态

• vue : vue3 源码使用 TS重写
• React : TS + Hooks
• Angular : 默认支持 TS

四 、TypeScript 运行环境

全局安装编译 TS 的工具包

安装全局包：npm i -g typescript

• 用来编译 TS 代码的包，使用内置命令 tsc，实现了 ts -> js 的转化

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

五 、如何运行 TypeScript

1 . 转换为 JS 文件再运行 (业务中推荐使用)

1.1 编译 TS 文件

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

1.2 执行 JS 代码

• 在终端中输入使用 node 命令，node XXX.js
• 浏览器中直接运行

2 . 在线运行 TypeScript

测试代码时可以在线运行 : https://www.typescriptlang.org/play

3 . ts-node 直接运行 TS 文件

使用 ts-node 包，直接在 Node.js 中执行 TS 代码。它提供了 ts-node 命令，可以简化执行命令。

安装全局包: npm i -g ts-node

使用方式： 终端中直接运行 ts-node XXX.ts

注意： ts-node 不会生成 js 文件

• ts-node 命令在内部偷偷的将 TS -> JS，然后，再运行 JS 代码

六 、什么是 Type

type : 直意为 类型 ( 数据类型 )

1 . TypeScript 中的 Type

• 在 TypeScript 定义变量需要指定 Type
  • 用 类型注解 给变量定义 TypeScript 中的类型
• TypeScript 中的 type 关键字

七 、什么是 类型注解

约定了变量的类型 , 给变量添加类型约束

语法: let 变量 : 类型 = 值

实例 : let age: number = 18

• : number 就是 类型注解

注意 : 约定变量的类型, 就只能给变量赋值该类型的值，否则，就会报错

• 错误实例 : let age: number = '18'
• 错误原因 ： 类型不一致, 将 string 类型的值赋值给了 number 类型的变量

八 、TypeScript 中有哪些类型

TypeScript 的类型分为 ，JavaScript 中的已有类型 和 TypeScript 新增的类型

1 . JavaScript 中的已有类型

• 原始类型 : number/string/boolean/null/undefined/symbol
  • 定义原始类型的语法: let 变量 : 类型 = 值

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

// 字符串类型
let name: string = '张三'

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

// undefined
let un: undefined = undefined

// null
let timer:null = null

// symbol
let uniKey:symbol = Symbol()

• 对象类型 : object（包括，数组、对象、函数等对象）

2 . TypeScript 新增的类型

• 联合类型
• 自定义类型 ( 类型别名 )
• 接口
• 元组
• 字面量类型
• 枚举
• void
• any
• unkown

九 、联合类型

语法 : let 变量: 类型1 | 类型2 | 类型3 .... = 初始值

|（竖线）: 在 TypeScript 中叫做 联合类型，

• 由两个或多个其他类型组成的类型，表示可以是这些类型中的任意一种

实例 :

let var: string | number = 1
var = '1'

应用场景 setTimeout

// | 联合类型  变量可以是两种类型之一
let timer:number|null = null
timer = setTimeout()

十 、type 关键字的作用

作用 : 给已有类型取别名 和 定义一个新的类型 ( 搭配联合类型使用 )

类型别名

• 语法 : type 别名 = 类型
• 实例 :

type St = string // 定义

let str1:St = 'abc'
let str2:string = 'abc'

自定义类型

• 语法 : type 别名 = 类型 | 类型1 | 类型2
• 实例 :

 type NewType = string | number // 定义类型

 let a: NewType = 1
 let b: NewType = '1'

十 一、数组类型

两种定义格式

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

• 示例 ： `let arr: number[] = [1, 3, 5]
• 解析 : 元素都是 number 类型的数组

语法2 : let 变量 : Array<类型> = [ 值...]

• 实例 : let arrStr: Array<string> = ['a', 'b', 'c']
• 解析 : 元素都是 strings 类型的数组

混合类型数组实例 :

• let arr: (number | string) [] = []
  • 这里有个有优先级的问题，使用（）包一下
• let arr: Array<number | string> = []
• 解析 : 元素是 number 或者 string 类型的数组

十二 、元组类型

1 . 什么是元组

是一个特殊的 数组

特点

• 约定了数组子元素的个数
• 约定了每个子元素所对应的类型

语法 : let arr : [类型,类型] = [数据,数据]

实例 : let arr: [number, string] = [1, '1']

• 数组中只有两个元素,第一个是 number 类型 ,第二个是 string 类型

2 . 元组的实际应用

React 中 useState() 的返回值类型就是一个元组

十三 、对象类型

1 . 单个定对象类型

语法 :

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

实例 :

const goodItem:{name: string, age: number, hoppy: ()=>string }  = {
    name: '张三', 
    age: 20, 
    hoppy:function(){ return '敲代码' }
}

2 . 类型别名实现类型复用

实例 :

• 定义别名

type Obj = {name: string, age: number, hoppy: ()=>string }

• 使用

const goodItem:Obj  = {
    name: '张三', 
    age: 20, 
    hoppy:function(){ return '敲代码' }
}

3 . 可选属性

const 对象名: {属性名1？：类型1，属性名2：类型2 } = { 属性名2：值2 }

十四 、接口类型

当一个对象类型需要被复用, 两种方法可以实现

• type : 类型别名
• interface : 接口

1 . interface 使用

语法 :

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

注意 : 接口名 要 I(大写I)开头

2 . 接口和类型的区别

interface（接口）和 type（类型别名）的对比：

• 相同点： 都可以给对象指定类型

• 不同点:

  • interface（接口）: 只能为对象指定类型。可以继承。
  • type（类型别名）: 不仅仅可以为对象指定类型，可以为任意类型指定别名

注意：能使用 type 就用 type

3 . 接口的继承

两个接口之间有相同的属性或者方法, 可以通过继承实现

4 . 继承的实现 extends 关键字

语法 : interface 接口2 extends 接口1 {属性： 类型}

继承后 , 接口2 ,会拥有 接口1 的所有属性

式例 :

   // 案例 interface 继承的实现
    interface Istu  {
        name: string
        gender: string
        grade?: string | number
        height?: string | number
        study:(arr:string[])=>string[]
        play?:()=>void
    }
    interface Istud extends Istu {
        work:string
        hobby:[string,string,string]//元组
    }
    let study3: Istud = {
        name: '王五',
        gender: '男',
        work:'敲代码',
        study: (arr) => arr.map(it =>study3.work ),
        hobby:['抽烟','喝酒','烫头']
    }
    const newHobby = study3.study(study3.hobby)
    console.log(newHobby) // [ '敲代码','敲代码','敲代码' ]
 

十五 、函数类型

定义函数类型除了定义函数本身之外, 还需要定义 函数参数 和 返回值 的类型

1 . 单个定义函数类型

语法 :

• 普通函数
  • function 函数名( 形参1: 类型，形参2：类型 ): 返回值类型 { }
• 箭头函数
  • const 函数名（ 形参1：类型，形参2：类型 ): 返回值类型 => { }

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

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

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

2 . type 自定义类型 ( 统一定义函数类型 )

语法 :

• type Fn = (参数:类型,参数2:类型)=>类型
  实例 :

type Fn = (n1:number,n2:number) => number // 定义类型
const add1 : Fn = (a,b)=>{return a+b }

3 . 函数的默认参数

和 js 语法一样, 函数不传参数时可取的默认值

语法 :

• function 函数名(形参1：类型=默认值，形参2：类型=默认值): 返回值类型 { }
• const 函数名（形参1：类型=默认值，形参2：类型=默认值):返回值类型 => { }
= 参数 : 等号后面的参数就是默认值

4 . 函数的可选参数

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

例如 ： 数组的 slice 方法，

• 可以不传参数 slice() 可是实现浅拷贝数组
• 也可以传递一个参数 slice(1)
• 还可以 slice(1, 3)
  语法 :
• function 函数名(形参1?：类型，形参2?：类型): 返回值类型 { }
  注意 ：可选参数只能出现在参数列表的最后

5 . 可选和默认值的区别

相同点： 调用函数时，可以不传对应的参数

区别 ：

• 设置了默认值之后，就是可选的了，不传就会使用默认值；
• 可选的参数, 不传就没有值

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

十六 、void 类型

函数的返回值类型

如果一个函数没有返回值 在js中是 undefined , 在ts中需要约定void

约定 void 类型 的三种情况

• 函数没有返回值 （没有return 没有值）
  • 试例: const add = () => {console.log('Hello')}
• 返回 undefined
  • 试例: const add = () => undefind
• 只有 return 没有值
  • 试例: const add = () => {return}

十七 、字面量类型

• 任意的字面量都可以作为数据类型。
• 字面量一般和联合类型一起使用，表示只能取某些个特定的值。

1 . 字面量的作用

单个字面量没有什么用处，它一般和联合类型 一起使用， 用来表示一组明确的可选值列表。

例如：约定 Gender 类型只能取girl和boy这两个字符串其中之一。

type Gender = 'girl' | 'boy'
let g1: Gender = 'girl' // 正确
let g2: Gender = 'boy' // 正确
let g3: Gender = 'man' // 错误

2 . 应用场景 redux 中的 actionType

    // 字面量类型
    type ActionType = 'GET_BOOKS' | 'ADD_BOOK' | 'DELET_BOOK'
    const reduser= (key:ActionType): string=> {
        switch (key) {
            case 'ADD_BOOK':
                return '添加成功'
            case 'DELET_BOOK':
                return '删除成功'
            case 'GET_BOOKS':
                return '获取成功'
            default:
                return '失败'
        }
    }
    console.log(reduser('GET_BOOKS')) // 获取成功

十八 、枚举类型

什么是枚举

字面意思就是将数据一枚一枚的列举出来

关键字 enum

语法 :

• 定义 : enum 枚举名 {数据1 , 数据2, 数据3}
• 使用 : let 变量 : 枚举名 = 枚举名.数据1

枚举的值

枚举的类型和其他类型不同,除了是枚举类型还是一个值

实例:

// type定义的类型是没有值的 - 不能console.log
type NewType = number | string
console.log(NewType)  // 输出类型是没有意义的

// 创建枚举
enum Direction { Up, Down, Left, Right }

// 枚举是有值的 - 可以console.log
console.log(Direction.Up)

数字类型枚举

默认情况下，枚举的值是数值。默认为：从 0 开始自增的数值

当然，也可以给枚举中的成员初始化值

enum num {up , dow, left}

转换为 js

(function (num) {
    num[num['up']=0]='up'
    ...
})

字符串类型枚举

enum str{up='up' , dow='dpw', left='left'}

十九 、any 类型

any类型的情况

1. 函数的参数不调类型 例如:console.log()
2. 不知道要接收的数据类型,先用any定义 例如: 发送请求时先用any定义 再换成其他类型

any 隐式转换的两种情况

1. 不给类型 , 的变量
2. 不给类型的函数参数

二十 、类型推论

在 TypeScript 中，某些没有明确指定类型的情况下，TS 的类型推论机制会自动提供类型。

优点 ： 由于类型推论的存在，有些情况下的类型注解可以省略不写

类型推论的应用场景:

• 声明变量并初始化时( 类型推论会自动识别值的类型)
• 决定函数返回值时 ( 类型推论会根据运算自动识别类型)

示例 :

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

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

代码地址：
https://github.com/jiang-zi/TS-study