TypeScript入门教程(一)

1.TypeScript介绍

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

2. 在 JS 基础之上，为 JS 添加了类型支持。TypeScript = Type + JavaScript

// TypeScript  代码有明确的数据类型
let age1: number = 18
// JavaScript  代码没有明确的类型
let age2 = 18

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

4. TypeScript 与 JavaScript 本质并无区别，我们可以将 TypeScipt 理解为是一个添加了类型注解的 JavaScript，为JavaScript代码提供了编译时的类型安全。

实际上，TypeScript 是一门“中间语言”，因为它最终会转化为JavaScript，再交给浏览器解释、执行。不过 TypeScript 并不会破坏 JavaScript 原有的体系，只是在 JavaScript 的基础上进行了扩展,如图:

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

1.先来看看JS的缺陷

• JS 的类型系统是弱类型的，没有类型的概念,当我们的代码过多,就可能在中途执行到某段代码的时候我们的初始数据类型被改变了,没有类型校验，导致了在使用 JS 进行项目开发时，会经常遇到类型错误的问题，增加了找 Bug、改 Bug 的时间，严重影响开发效率 如下代码:

let arr = 11  // 初始值为number类型

arr = []  // 偷偷的改成了数组类型

arr.toFixed(2) // 这里会报类型错误

• JavaScript 属于动态类型的编程语言边解释边执行，错误只能在运行阶段才能发现。

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

• 它要先编译，再执行。不能直接执行，需要编译成js才能执行
• 它会在编译期间做类型检查，从而提前发现错误。配合 VSCode 等开发工具，TS 可以提前到在编写代码的同时就发现代码中的类型错误，减少找 Bug、改 Bug 时间

3.体验TypeScript

1.全局安装编译 TS 的工具包

安装包：npm i -g typescript

typescript 包：用来编译 TS 代码的包，提供了 tsc 命令，实现了 TS -> JS 的转化
验证是否安装成功：tsc –v (查看 typescript 的版本)

2.安装ts-node

安装包： npm i -g ts-node
使用 ts-node 包，直接在 Node.js 中执行 TS 代码(不需要使用tsc编译成js文件再执行)。它提供了 ts-node 命令:

ts-node 文件.ts

3.创建一个 tsconfig.json 文件

tsc --init生成配置文件 tsconfig.json 执行之后，项目根目录会出现一个 tsconfig.json 文件，里面包含ts的配置项（可能因为版本不同而配置略有不同）。

{
  "compilerOptions": {
    "target": "es5",                        // 指定 ECMAScript 目标版本: 'ES5'
    "module": "commonjs",                   // 指定使用模块: 'commonjs', 'amd', 'system', 'umd' or 'es2015'
    "moduleResolution": "node",             // 选择模块解析策略
    "experimentalDecorators": true,         // 启用实验性的ES装饰器
    "allowSyntheticDefaultImports": true,   // 允许从没有设置默认导出的模块中默认导入。
    "sourceMap": true,                      // 把 ts 文件编译成 js 文件的时候，同时生成对应的 map 文件
    "strict": true,                         // 启用所有严格类型检查选项
    "noImplicitAny": true,                  // 在表达式和声明上有隐含的 any类型时报错
    "alwaysStrict": true,                   // 以严格模式检查模块，并在每个文件里加入 'use strict'
    "declaration": true,                    // 生成相应的.d.ts文件
    "removeComments": true,                 // 删除编译后的所有的注释
    "noImplicitReturns": true,              // 不是函数的所有返回路径都有返回值时报错
    "importHelpers": true,                  // 从 tslib 导入辅助工具函数
    "lib": ["es6", "dom"],                  // 指定要包含在编译中的库文件
    "typeRoots": ["node_modules/@types"],
    "outDir": "./dist",
    "rootDir": "./src"
  },
  "include": [                              // 需要编译的ts文件 *表示文件匹配 **表示忽略文件的深度问题
    "./src/**/*.ts"
  ],		
  "exclude": [				    // 不需要编译的ts文件
    "node_modules",
    "dist",
    "**/*.test.ts"
  ]
}

3.TS类型注解

背景

TypeScript 是 JS 的超集，TS 提供了 JS 的所有功能，并且额外的增加了：类型系统

• TS中定义变量(常量)可以指定类型了。
• A类型的变量不能保存B类型的数据 这样可以显示标记出代码中的意外行为，从而降低了发生错误的可能性 格式:

let 变量名 : 类型 = 初始值 示例: let name : string = '给我一个div' 上述代码中，约定变量 name 的类型为 string 类型，就只能给变量赋值该类型的值，否则，就会报错,其中的:string就是类型注解,为变量添加了类型约束

错误代码：

// 错误原因：将 number 类型的值赋值给了 string 类型的变量，类型不一致
let name: string = 8023

4.类型推论

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

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

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

1. 声明变量并初始化时
2. 决定函数返回值时

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

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

5.TS的类型

1.常用基础类型

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

JS 已有类型

1.  原始类型：`number/string/boolean/null/undefined/symbol`
0.  对象类型：`object`（包括，数组、对象、函数等对象）

TS 新增类型

1.  联合类型
2.  自定义类型(类型别名)
3.  接口
4.  元组
5.  字面量类型
6.  枚举
7.  void
8.  any 等

• 注意：

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

2.原始类型

• 原始类型：number / string / boolean /null / undefined / symbol
• 特点：简单，这些类型，完全按照 JS 中类型的名称来书写

// 数值类型
let age: number = 10
// 字符串类型
let myName: string = '给我一个div'
// 布尔类型
let isLoading: boolean = false
// undefined
let un: undefined = undefined
// null
let timer:null = null

3.联合类型

1.联合类型的格式:

let 变量: 类型1 | 类型2 | 类型3 .... = 初始值 解释：|（竖线）在 TS 中叫做联合类型，即：由两个或多个其他类型组成的类型，表示可以是这些类型中的任意一种

// 联合类型： 数组元素可以是两种类型之一
let arr: (number|string|boolean)[] = [1,2,3]

arr[0] = '1'
arr[2] = true

4.数组类型

1.数组类型的两种写法:

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

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

2.基本示例

// 写法一：
let numbers: number[] = [1, 3, 5] //  numbers必须是数组，每个元素都必须是数字

// 写法二：
let strings: Array<string> = ['a', 'b', 'c'] //  strings必须是数组，每个元素都必须是字符串

3.进阶用法

如何定义一个数组，它的元素可能是字符串类型，也可能是数值类型。(结合联合类型定义数组)

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

5.类型别名

格式:

别名可以是任意的合法字符串，一般首字母大写

type 别名 = 类型

使用:

type s = string | number // 定义类型别名s 可以是number和string中任意一种

const str :s = '给我一个div'
const age :s = 10

// 定义类型别名MyArr为数组类型 并且数组里的元素可以是 数字,字符, 布尔值
type MyArr = (number | string) []
const arr:MyArr = [1, '1' , true]

6.函数类型

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

1.格式:

普通函数

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

箭头函数

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

2.示例

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

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

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

3.简化示例

以上代码 具有相同参数类型和返回值类型,代码看起来臃肿累赘,简化如下:

// 利用类型别名提炼自定义类型
type Fn = (n1:number,n2:number) =>number 
const add1 : Fn = (a , b) => {return a + b }
const sub : Fn = (a , b) => {return a - b }

7.函数返回值 : void

1.void 类型

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

function getName(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
}

8.函数-可选参数和默认参数

函数中的参数有些事可传可不传的,那么如何定义这些可选参数的类型?

1.格式

在可选参数名的后面添加 ?

这里start 和 end 参数都定义为了可选参数类型 如果传值的话必须是数字,也可以不传
function mySlice(start?: number, end?: number): void {
  console.log('起始索引：', start, '结束索引：', end)
}

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

2.默认参数:

end参数为默认参数 默认值为10 , 类型是number 添加了默认值后 end也成为了可选的参数

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

3.默认参数和可选参数区别

相同点： 调用函数时，都可以实现少传参数 区别：设置了默认值之后，就是可选的了，不写就会使用默认值； 可选的并一定有值。

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

注意点: 可选参数和默认参数不能一起使用 ! ! !

9.对象类型

1.object

在JavaScript中，object是引用类型，它存储的是值的引用。在TypeScript中，当想让一个变量或者函数的参数的类型是一个对象的形式时，可以使用这个类型：

let obj: object
obj = { name: 'TypeScript' }
obj = 123             // error 不能将类型“123”分配给类型“object”
console.log(obj.name) // error 类型“object”上不存在属性“name”
复制代码

可以看到，当给一个对象类型的变量赋值一个对象时，就会报错。对象类型更适合以下场景:

function getKeys (obj: object) {
  return Object.keys(obj) // 会以列表的形式返回obj中的值
}
getKeys({ a: 'a' }) // ['a']
getKeys(123)        // error 类型“123”的参数不能赋给类型“object”的参数

2.对象类型-单独使用

1. 使用 {} 来描述对象结构
2. 属性采用属性名: 类型的形式
3. 方法采用方法名(): 返回值类型的形式
4. 可选属性使用 ?

// 创建类型别名
type Person = {
  name: string，
  age: number,
  hobby? :string []    // hobby为可选属性
  sayHi(): void
}

// 使用类型别名作为对象的类型： 可选属性hobby不声明页不会报错
let person: Person = {
  name: '给我一个div',
  age: 18
  sayHi() {}
}

3.对象类型-接口 interface

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

1. 类型别名: Type
2. 接口: interface 格式

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（接口）和 type（类型别名）的对比：

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

• 不同点:

  • 接口，只能为对象指定类型。它可以继承。
  • 类型别名，不仅可以为对象指定类型，实际上可以为任意类型指定别名

4.接口继承

背景:

interface Point2D { x: number; y: number }
interface Point3D { x: number; y: number; z: number } 如果两个接口之间有相同的属性或方法，可以将公共的属性或方法抽离出来，通过继承来实现复用

interface继承:

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

1. 使用 extends(继承)关键字实现了接口 Point3D 继承 Point2D
2. 继承后，Point3D 就有了 Point2D 的所有属性和方法(此时，Point3D 同时有 x、y、z 三个属性)

10.元祖 Tuple

在 JavaScript 中并没有元组的概念，作为一门动态类型语言，它的优势是支持多类型元素数组。
但是出于较好的扩展性、可读性和稳定性考虑，我们通常会把不同类型的值通过键值对的形式塞到一个对象中，再返回这个对象，
而不是使用没有任何限制的数组。TypeScript 的元组类型正好弥补了这个不足，
使得定义包含固定个数元素、每个元素类型未必相同的数组成为可能

元组可以看做是数组的扩展，它表示已知元素数量和类型的数组，它特别适合用来实现多值返回。确切的说，就是已知数组中每一个位置上的元素的类型，可以通过元组的索引为元素赋值:

let arr: [string, number, boolean];
arr = ["a", 2, false]; // 没有错误
arr = [2, "a", false]; // error 不能将类型“number”分配给类型“string”。 不能将类型“string”分配给类型“number”。
arr = ["a", 2];        // error Property '2' is missing in type '[string, number]' but required in type '[string, number, boolean]'
arr[1] = 123

说明: 元组类型可以确切地标记出有多少个元素，以及每个元素的类型

11.字面量类型

先看如下代码:

let str1 = 'hello 给我一个div' // 类型为 : string

const str2 = 'hello 给我一个div'  // 类型为:hello 给我一个div

解释

1. str1 是一个变量(let)，它的值可以是任意字符串，所以类型为:string
2. str2 是一个常量(const)，它的值不能变化只能是 'hello 给我一个div'，所以，它的类型为:'hello 给我一个div' 任意的 JS 字面量（比如，对象、数字等）都可以作为类型使用 , 此处的 'hello 给我一个div'，就是一个字面量类型，也就是说某个特定的字符串也可以作为 TS 中的类型

所以型如下这两种写法是等价的:
let str: 'hello' = 'hello' 等价于 : const str = 'hello'

字面量的作用:

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

// 使用自定义类型:
type Dir = 'up' | 'down' | 'left' | 'right'

function changeDirection(direction: Dir) {
  console.log(direction)
}

// 调用函数时，写上''，就会有类型提示： 传入的参数必须是以上可选值中的一个
changeDirection('up')

优势
相比于 string 类型，使用字面量类型更加精确、严谨