初识TypeScript

第七单元 初识TypeScript

一、知识点回顾

1. router依赖使用同学们要掌握
2. vuex的应用非常重要
3. elemnet-ui-plus的应用要掌握
4. axios的使用必须牢记于心

二、本单元知识点概述

（Ⅰ）知识点概述

---

三、本单元教学目标

（Ⅰ）重点知识目标

1. TS特性、安装与编译
2. TS的数据类型

（Ⅱ）能力目标

1. 掌握TS特性、安装与编译
2. 熟悉掌握TS的数据类型

---

四、本单元知识详讲

7.1 TypeScript简介

7.1.1 TypeScript是什么

TypeScript简称TS，是 JavaScript 的超集。

那么，Ts在Js的基础上增加了什么呢？

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

比如声明一个变量时

//TypeScript代码:有明确的类型，即: number(数值类型)
let age1: number = 18;
​
//JavaScript代码:无明确的类型
let age2 = 18

如果我在声明age1是数字类型的基础上，又将它赋值为了其他类型的值，那么就会报错。

即，TypeScript 遵循强类型，如果将不同的类型赋值给变量会编译错误。

7.1.2 为什么要添加类型支持

背景：JS的类型系统存在“先天缺陷”，JS代码中绝大部分错误都是类型错误（UncaughtTypeError)。

问题：增加了找Bug、改Bug的时间，严重影响开发效率。

从编程语言的动静来区分，TypeScript属于静态类型的编程语言，JS属于动态类型的编程语言。

静态类型：编译期做类型检查；动态类型：执行期做类型检查。

代码编译和代码执行的顺序：先编译 再执行。

• 对于JS来说：需要等到代码真正去执行的时候才能发现错误（晚）。

• 对于TS来说：在代码编译的时候（代码执行前）就可以发现错误（早）。

• 并且，配合VSCode等开发工具，TS可以提前到在编写代码的同时就发现代码中的错误，减少找Bug、改Bug 时间。

7.1.3 Ts相比Js的优势

1. 更早（写代码的同时）发现错误，减少找Bug、改Bug时间，提升开发效率。

2. 程序中任何位置的代码都有代码提示，随时随地的安全感，增强了开发体验。

3. 强大的类型系统提升了代码的可维护性，使得重构代码更加容易。

4. 支持最新的ECMAScript语法，优先体验最新的语法，让你走在前端技术的最前沿。

5. TS类型推断机制，不需要在代码中的每个地方都显示标注类型，让你在享受优势的同时，尽量降低了成本。

除此之外，Vue3源码使用TS重写、Angular默认支持TS、React与TS完美配合，TypeScript已成为大中型前端项目的首选编程语言。

7.2 TypeScript安装与运行

7.2.1 安装

首先我们要明白，需要安装的不是TypeScript，而是TypeScript的编译器。

因为不管是在node.js中还是浏览器中，都只认识JS代码，不认识TS代码。所以需要用TS编译器将TS代码转化为JS代码，然后才能运行。

全局安装TypeScript编译器，命令行如下：

cnpm 或 npm install -g typescript

[释义]:

>> 以上命令会在全局环境下安装TS编译工具，这样，所有的typescript项目都可以使用它。

[验证]:

检测是否安装成功命令：

tsc -v  // tsc指的就是ts编译工具

7.2.2 运行

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

TypeScript称为静态的 JavaScript，不能直接引入到 html 中，不能直接被浏览器识别，需要经过 ts 转换器或者是 babel 转化后才能使用；

[步骤]：

1. 创建一个后缀名为.ts的文件hello.ts，写一行简单的打印代码

   let heroname:string='安琪拉';
   console.log(heroname);

   

2. 进入命令行，执行转换hello.ts----->hello.js

   tsc hello.ts //按路径来编译指定的ts文件

   

   编译前hello.ts

   let heroname:string='安琪拉';
   console.log(heroname)

   编译后hello.js

   var heroname = '安琪拉';
   console.log(heroname);

3. 在浏览器或nodejs中执行js代码，正确打印出结果

   

体验到这里，你可能会想：这TS也太麻烦了，还需要写完代码后手动敲命令进行编译。下面我们学习vscode自动编译TS文件。

7.3 Vscode自动编译

自动编译：就是省去程序员敲击命令编译文件，由工具来自动完成。

7.3.1 设置Vscode自动编译

[配置步骤]：

1. 首先在放 ts 的文件夹下打开终端 执行 tsc --init 命令 创建一个 tsconfig.json 文件

2. 点击 vscode 终端-->选择运行任务-->输入 tsc 按下回车-->选择 tsc:监视 xxxx 文件夹下的 tsconfig.json 文件

3. 之后再写的 ts 代码就会自动转化为 js

[步骤演示]：

一、首先在放 ts 的文件夹下打开终端 执行 tsc --init 命令 会生成一个 tsconfig.json 文件

tsc --init

效果，如图：

二、点击 vscode 终端-->选择运行任务-->输入 tsc 按下回车-->选择 tsc:监视 xxxx 文件夹下的 tsconfig.json 文件，如图：

三、写的 ts 代码点击保存（Ctrl + s）就会自动转化为 js

function add(num1:number,num2:number){
  return num1+num2
}

运行结果，如图：

# 如果一个目录下存在一个tsconfig.json文件，那么它意味着这个目录是TypeScript项目的根目录。tsconfig.json文件中指定了用来编译这个项目的根文件和编译选项

7.4 TS数据类型

7.4.1 概述

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

• 所有的JS代码都是TS代码。

• JS有类型（比如，number/string等)，但是JS不会检查变量的类型是否发生变化。而TS会检查。

TypeScript 类型系统的主要优势：可以显示标记出代码中的意外行为，从而降低了发生错误的可能性。

示例：

比如我们可以在js文件中代码演示如下：

let price=10;
price='10';
//.toFixed(2)方法是针对数字类型的变量才有的一个方法，如果我们把变量price变为字符串类型，在编写代码时不会有任何提示，但运行代码时就会报错。
console.log(price.toFixed(2))

但是如果在TS文件中编写代码时，类型错误实时就会有红色波浪线提醒开发人员，这里有错，并且指出错误原因。

7.4.2 类型注解

刚刚我们已经都实践过类型注解的写法了：

//语法格式
let 变量名称:数据类型 = 定义相应类型的值
//示例
let price: number = 10

说明：代码中的:number就是类型注解。

作用：为变量添加类型约束。比如，上述代码中，约定变量price的类型为number（数值类型)。

解释：约定了什么类型，就只能给变量赋值该类型的值；否则，就会报错。

7.4.3 常用基础类型

可以将TS中的常用基础类型细分为两类：1、JS已有类型 2、TS新增类型。

• JS已有类型

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

  • 对象类型：object（包括：数组、函数、对象等对象)。

• TS新增类型

  • 联合类型、自定义类型（类型别名)、接口、元组、字面量类型、枚举、void、any等。

7.4.4 原始类型

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

特点：简单。按照js中类型的名称来书写。

代码演示：

let age: number = 18;
let myName: string = '刘老师";
let isLoading: boolean = false;
let a: null = null
let b: undefined = undefined
let s: symbol = Symbo1()

7.4.5 数组类型

数组类型是对象类型的一种，数组类型在TS中的写法如下：

数组类型的两种写法：【推荐使用类型[]的写法】

//语法格式1：（推荐使用）
let 变量名称 : 类型[] = 值内容
//示例1：一个所有项为数值类型的数组
let scoreList: number[] = [80,90,96];

//语法格式2：(了解)
let 变量名称 : Array<类型> = 值内容
//示例2：一个所有项为字符串类型的数组
let colorList: Array<string> = ['red','yellow','blue'];

需求:数组中既有number类型，又有string类型，这个数组的类型应该如何写?

//示例3：代表变量arr是 项可以为数字或字符串类型的数组类型。
let arr: (number | string)[] = [1,'a'，3，'b ']

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

>> 注意：这是TS中联合类型的语法，只有一根竖线，不要与JS中的或||混淆了。

联合类型是TS中新增类型，我们明天再细讲它。

7.4.6 函数类型

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

//1.命名函数
//-----定义函数语法规则
function 函数名(x:约束类型,y:约束类型):返回值约束类型 {
    return x + y
}

//示例
function add(num1: number, num2: number): number {
    return num1 + num2
}
//单独指定函数参数类型 返回值类型可省略
function add(num1:number, num2:number) {
    return num1 + num2
}

说明：需要传参的函数必须要指定其参数类型，否则会有错误警告。

# any类型,意为可以赋予任意值的类型
TS是不鼓励使用any类型（除特殊情况），如果所有的变量，参数等都为any，那TS基本类型检查功能就等于没有使用到

//2.匿名函数
//-----定义函数语法规则
const 函数名 = (x:约束类型,y:约束类型):返回值约束类型 {
    return x + y
}

//示例
const add = (num1: number,num2: number): number => {
    return num1 + num2
}

函数类型具体的使用我们会在后面的课程中学到。

7.4.7 void类型

最后再讲解一个数据类型，是TS新增的——void。

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

function add(num1:number, num2:number): void {
   console.log(num1+num2)
}

五、本单元知识总结

1. TS特性、安装与编译同学们要掌握
2. 掌握TS的数据类型
    原始类型、数组类型、函数类型、void类型