TypeScript初学
文章转载：https://blog.csdn.net/weixin_46185369/article/details/121512287
写的很详细，适合初学者看看。
一、TypeScript是什么？
1.TypeScript简称：TS，是JavaScript的超集。简单来说就是：JS有的TS都有。JS写的代码在T的环境下都能跑。
2.在JS基础之上，为JS添加了类型支持。TypeScript = Type + JavaScript
3.TypeScript是微软开发的开源编程语言，可以在任何运行JavaScript的地方运行
// TypeScript 代码有明确的数据类型
let age1: number = 18
// JavaScript 代码没有明确的类型
let age2 = 18
二、为什么要为JS添加类型支持？
JS的缺陷
1.JS的类型系统是弱类型的，没有类型的概念
let ar = 11 // 这里是数值
ar = [] // 偷偷的改成了数组类型
arr.toFixed(2) // 这里会报类型错误
没有类型检验，导致了在使用JS进行项目开发时，会经常遇到类型错误的问题。
2.JavaScript属于动态类型的编程语言
边解释边执行，错误只能在运行阶段才能发现
TS属于静态类型都编程语言
1.它要先编译，再执行。不能直接执行，需要编译成js才能执行
2.它会在编译期间做类型检查，从而提前发现错误。配合VSCode等开发工具，TS可以提前到编写代码的同时就发现代码中的类型错误，减少找bug、改bug时间
对比：
- 使用JS:
- 在VSCode里面写代码
- 在浏览器中运行代码 --> 运行时，才会发现错误
- 使用TS
- 在VSCode里面写代码 --> 写代码时就会发现错误
- 在浏览器中运行代码
三、TypeScript类型
常用基础类型
将ts中的常用基础类型分为两类
- js已有类型
- 原始类型：
number/string/boolean/null/undefined/symbol - 对象类型：
object（包括，数组、对象、函数等对象）
- ts新增类型
- 联合类型
- 自定义类型(类型别名)
- 接口
- 元组
- 字面量类型
- 枚举
- void
- 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 变量: 类型1 | 类型2 | 类型3 .... = 初始值
解释：|（竖线）在 TS 中叫做联合类型，即：由两个或多个其他类型组成的类型，表示可以是这些类型中的任意一种
let arr: (number | string)[] = [1, 'a', 3, 'b']
应用场景
- 定时器id
// | 联合类型// 联合类型1： 变量可以是两种类型之一
let timer:number|null = null
timer = 2// 联合类型2： 数组元素可以是两种类型之一
let arr: (number|string|boolean)[] = [1,2,3]arr[0] = '1'
arr[2] = true
数组类型
数组类型的格式
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]类型别名
type 别名 = 类型
type s = string //定义const str1:s = 'abc'
const str2:string = 'abc'作用
- 给类型起别名
- 定义了新类型
场景
给复杂类型起别名
// type NewType = string | number// let a: NewType = 1
// let b: NewType = '1'// let arr: NewType[] = [1, '1']type MyArr = (number | string) []
const arr:MyArr = [1, '1']函数-单个定义
函数的类型
函数的类型实际上指的是：函数参数和返回值的类型
格式:
//普通函数
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') // 报错
对象类型-单独使用
格式
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 '打电话'}
}说明:
- 使用
{}来描述对象结构 - 属性采用
属性名: 类型的形式，如果是多行，可以省略, - 方法采用
方法名(): 返回值类型的形式 - 可选使用 ?
对象类型-接口
格式
interface 接口名 {
属性1: 类型1,属性2: 类型2,
}
示例
interface IGoodItem {name:string,price:number,func:()=>string
}const good1:IGoodItem = {name:'手表',price:2000,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 user:IPerson = {name:'a',age:20
}//type的写法
type Person = {name:string,age:number
}const user:Person = {name:'a',age:20
}接口继承
继承格式
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 三个属性)
泛型
四、VSCode中的编码技巧
-
如果不知道类型，可以通过鼠标放在变量名称上，利用 VSCode 的提示来查看类型
-
写代码的时候，多看方法、属性的类型，养成写代码看类型的习惯