一、介绍
TypeScript 是什么
-
TypeScript 简称：TS，是 JavaScript 的超集。简单来说就是：JS 有的 TS 都有。JS写的代码在TS的环境下都能跑。
-
在 JS 基础之上，为 JS 添加了类型支持。TypeScript = Type + JavaScript
-
TypeScript 是微软开发的开源编程语言，可以在任何运行 JavaScript 的地方运行
// TypeScript 代码有明确的数据类型 let age1: number = 18 // JavaScript 代码没有明确的类型 let age2 = 18
为什么要为 JS 添加类型支持?
JS的缺陷
JS 的类型系统是弱类型的，没有类型的概念
let ar = 11 // 这里是数值
ar = [] // 偷偷的改成了数组类型
arr.toFixed(2) // 这里会报类型错误
没有类型校验，导致了在使用 JS 进行项目开发时，会经常遇到类型错误的问题，增加了找 Bug、改 Bug 的时间，严重影响开发效率
JavaScript 属于动态类型的编程语言
边解释边执行，错误只能在运行阶段才能发现。
TS属于静态类型的编程语言
它要先编译，再执行。不能直接执行，需要编译成js才能执行
它会在编译期间做类型检查，从而提前发现错误。配合 VSCode 等开发工具，TS 可以提前到在编写代码的同时就发现代码中的类型错误，减少找 Bug、改 Bug 时间
二、typescript的体验
1.全局安装编译ts的工具包
安装包 npm i -g typescript
- typescript 包：用来编译 TS 代码的包，提供了 `tsc` 命令，实现了 TS -> JS 的转化
- 验证是否安装成功：`tsc –v` (查看 typescript 的版本)
当我们在终端上执行完 tsc 文件名 后,会自动生成一个编译好的js文件
三、TS学习
1.类型注解
TypeScript 是 JS 的超集，TS 提供了 JS 的所有功能，并且额外的增加了：类型系统
- TS中定义变量(常量)可以指定类型了。
- A类型的变量不能保存B类型的数据
格式
let 变量名:类型=初始值
示例
let age: number = 10
这里的:number就是类型注解
上述代码中，约定变量 age 的类型为 number 类型，就只能给变量赋值该类型的值，否则，就会报错
2.类型推论
在 TS 中，某些没有明确指定类型的情况下，TS 的类型推论机制会自动提供类型。好处：由于类型推论的存在，有些情况下的类型注解可以省略不写
发生类型推论的 2 种常见场景
-
声明变量并初始化时
-
决定函数返回值时
// 变量 age 的类型被自动推断为：number let age = 18 // 函数返回值的类型被自动推断为：number function add(num1: number, num2: number) { return num1 + num2 }
3.常用基础类型
将 TS 中的常用基础类型分为两类
1.js已有的数据类型
基本数据类型 : number , string , null , undefined , boolean , symbol
复杂数据类型:Object（包括，数组、对象、函数等对象）
2.TS 新增类型
- 联合类型
- 自定义类型(类型别名)
- 接口
- 元组
- 字面量类型
- 枚举
- void
- any 等
注意：
- 原始类型在 TS 和 JS 中写法一致
- 对象类型在 TS 中更加细化，每个具体的对象（比如，数组、对象、函数）都有自己的类型语法
4.原始类型
-
原始类型：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
5.TS新增类型
- 联合类型
格式
let 变量: 类型1 | 类型2 | 类型3 .... = 初始值
解释：|（竖线）在 TS 中叫做联合类型，即：由两个或多个其他类型组成的类型，表示可以是这些类型中的任意一种
应用场景:
// | 联合类型
// 可以用于定时器,定时器的初始值为null,返回值为1
// 联合类型1： 变量可以是两种类型之一
let timer:number|null = null
timer = 2
// 联合类型2： 数组元素可以是两种类型之一
let arr: (number|string|boolean)[] = [1,2,3]
arr[0] = '1'
arr[2] = true
2. 数组类型
数组类型主要有两种写法
let 变量: 类型[] = [值1，...]
let 变量: Array<类型> = [值1，...]
示例
// 写法一：
let numbers: number[] = [1, 3, 5] // numbers必须是数组，每个元素都必须是数字
// 写法二：
let strings: Array<string> = ['a', 'b', 'c'] // strings必须是数组，每个元素都必须是字符串
那么问题来了,如果数组中有多个类型怎么办?
let arr: (number | string) [] = ['1', 1] //注意这里类型需要使用()包起来
6.类型别名
格式:
type 别名 = 类型
type s = string // 定义
const str1:s = 'abc'
const str2:string = 'abc'
其实在使用这些单个的基本数据类型时,不需要使用类型别名,因为这样写的话,很大程度的降低了我们代码的可阅读性
推荐: 给复杂的类型起别名
代码如下:
{
type Student = {
name: string;
age: number;
gender: string;
report: number;
skill: () => string;
};
let ChenGong: Student = {
name: '小花',
age: 40,
gender: '女',
report: 40,
skill() {
console.log(this.name + '爱唱歌');
return '111';
}
}
}
这样可以提高我们代码的复用能力,在我们需要同样的类型时,可以直接调用
7.单个定义函数
函数的类型实际上指的是：函数参数和返回值的类型
格式:
// 普通函数
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') // 报错
8.统一定义函数格式
当我们定义多个具有相同参数类型和返回值类型的函数时，代码比较累赘时该怎么办?
const add = (a:number,b:number):number =>{
return a + b
}
const sub = (a:number,b:number):number =>{
return a - b
}
这里我们可以看到定义了多个相同的代码,我们可以把相同的代码都提取出来,组成一个新的整体,也就是自定义类型
type Fn = (a:number,b:number) =>number
const add : Fn = ( a , b ) => {
return a + b
}
const sub : Fn = ( a , b ) => {
return a - b
}
这样看起来代码是不是简单一些了呢
9.函数返回值是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的区别
-
如果函数没有指定返回值，调用结束之后，值是undefined的
-
当不能直接声明返回值是undefined
function add(a:number, b:number): undefined { // 这里的会报错 console.log(a,b) }
10.函数-可选参数
使用函数实现某个功能时，参数可以传也可以不传。
例如：数组的 slice 方法，可以 slice() 也可以 slice(1) 还可以 slice(1, 3)
这种情况下，在给函数参数指定类型时，就用到可选参数了
格式:可选参数：在可选参数名的后面添加 ?（问号）
function mySlice(start?: number, end?: number): void {
console.log('起始索引：', start, '结束索引：', end)
}
注意：可选参数只能出现在参数列表的最后，也就是说可选参数后面不能再出现必选参数
- 可选参数和默认值的区别
-
相同点： 调用函数时，可以少传参数
-
区别：设置了默认值之后，就是可选的了，不写就会使用默认值； 可选的并一定有值。
-
注意：它们不能一起使用。优先使用默认值
11.对象类型-单独使用
格式:
const 对象名: {
属性名1：类型1，
属性名2：类型2，
方法名1(形参1: 类型1，形参2: 类型2)： 返回值类型,
方法名2:(形参1: 类型1，形参2: 类型2)=>返回值类型
} = { 属性名1: 值1，属性名2：值2 }
可选属性用 ?
const 对象名: {属性名1？：类型1，属性名2：类型2 } = { 属性名2：值2 }
示例:
const goodItem:{name: string, price: number, func: ()=>string } = {
name: '手机',
price: 2000,
func:function(){ return '打电话' }
}
总结:
- 使用
{}来描述对象结构 - 属性采用
属性名: 类型的形式，如果是多行，可以省略, - 方法采用
方法名(): 返回值类型的形式 - 可选使用
?
12.对象类型-类型别名
把类型注解封装一下，定义类型
{
type Student = { //类型注解
name: string;
age: number;
gender: string;
report: number;
skill: () => string;
};
let ChenGong: Student = {
name: '小花',
age: 40,
gender: '女',
report: 40,
skill() {
console.log(this.name + '爱唱歌');
return '111';
}
};
}
创建类型别名后，直接使用该类型别名作为变量的类型注解即可
13.对象类型-接口
当一个对象类型被多次使用时，可以有两种方式来来描述对象的类型，达到复用的目的。
- 类型别名， Type
- 接口, 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 '打电话'
}
}
- 使用
interface关键字来声明接口 - 接口名称(比如，此处的 IPerson)，可以是任意合法的变量名称，推荐以
I开头 - 声明接口后，直接使用接口名称作为变量的类型
interface（接口）和 type（类型别名）的对比：
-
相同点：都可以给对象指定类型
-
不同点:
- 接口，只能为对象指定类型。它可以继承。
- 类型别名，不仅可以为对象指定类型，实际上可以为任意类型指定别名
推荐：能使用 type 就是用 type
// 接口的写法-------------
interface IPerson {
name: string,
age: number
}
const user1：IPerson = {
name: 'a',
age: 20
}
// type的写法-------------
type Person = {
name: string,
age: number
}
const user2：Person = {
name: 'b',
age: 20
}
14.对象类型-接口的继承
比如，这两个接口都有 x、y 两个属性，重复写两次，可以，但很繁琐
interface Point2D { x: number; y: number }
interface Point3D { x: number; y: number; z: number }
如果两个接口之间有相同的属性或方法，可以将公共的属性或方法抽离出来，通过继承来实现复用
格式:
interface 接口2 extends 接口1 {
属性1： 类型1， // 接口2中特有的类型
...
}
示例:
interface Point2D { x: number; y: number }
// 继承 Point2D
interface Point3D extends Point2D {
z: number
}
- 使用
extends(继承)关键字实现了接口 Point3D 继承 Point2D - 继承后，Point3D 就有了 Point2D 的所有属性和方法(此时，Point3D 同时有 x、y、z 三个属性)
15.元组
固定结构的数据， 例如
-
使用经纬度坐标来标记位置信息
-
使用x,y来记录鼠标的位置
let position: number[] = [116.2317, 39.5427] // 数组的元素都是数值类型
使用 number[] 的缺点：不严谨，因为该类型的数组中可以出现任意多个数字，而类似于经纬度只能有两个数字。
元组是另一种特殊的数组：
- 它确切地包含多少个元素
- 特定索引对应的类型
示例:
let position: [number, number] = [39.5427, 116.2317]
- 元组类型可以确切地标记出有多少个元素，以及每个元素的类型
- 该示例中，元素有两个元素，每个元素的类型都是 number
接下来我们模拟定义react中的useState
useState的返回值是一个数组，第一个元素是number，第二个是修改number的函数
function useState(n: number): [number, (number)=>void] {
const setN = (n1) => {
n = n1
}
return [n, setN]
}
const [num ,setNum] = useState(10)
16.字面量类型
let str1 = 'hello 武汉'
const str2 = 'hello 武汉'
看到这里小伙伴可以大胆的猜测一下,上面两个str分别是什么类型
通过 TS 类型推论机制，可以得到答案：
- 变量 str1 的类型为：string
- 变量 str2 的类型为：'hello 武汉'
看到这里是不是特别奇怪
为什么str2的类型这么奇怪
原因呢,主要是以下3点
-
str1 是一个变量(let)，它的值可以是任意字符串，所以类型为:string
-
str2 是一个常量(const)，它的值不能变化只能是 'hello 武汉'，所以，它的类型为:'hello 武汉'
-
注意：此处的 'hello 武汉'，就是一个字面量类型，也就是说某个特定的字符串也可以作为 TS 中的类型
任意的 JS 字面量（比如，对象、数字等）都可以作为类型使用
- 上面的let a等价于const
- 简写为 const a = 'abc'
字面量：{ name: 'jack' } [] 18 20 'abc' false function() {}
字面量类型的作用
单个字面量没有什么用处，它一般和联合类型一起使用 ， 用来表示一组明确的可选值列表
示例: 比如，在贪吃蛇游戏中，游戏的方向的可选值只能是上、下、左、右中的任意一个
// 使用自定义类型:
type Direction = 'up' | 'down' | 'left' | 'right'
function changeDirection(direction: Direction) {
console.log(direction)
}
// 调用函数时，写上''，就会有类型提示：
changeDirection('up')
-
解释：参数 direction 的值只能是 up/down/left/right 中的任意一个
-
优势：相比于 string 类型，使用字面量类型更加精确、严谨
字面量类型约定：只能取某些个特定的值。一般和联合类型一起使用
