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:

1. 在VSCode里面写代码
2. 在浏览器中运行代码 --> 运行时，才会发现错误

• 使用TS

1. 在VSCode里面写代码 --> 写代码时就会发现错误
2. 在浏览器中运行代码

三、TypeScript类型

常用基础类型

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

• js已有类型

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

• ts新增类型

1. 联合类型
2. 自定义类型(类型别名)
3. 接口
4. 元组
5. 字面量类型
6. 枚举
7. void
8. 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']

应用场景

1. 定时器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'

作用

1. 给类型起别名
2. 定义了新类型

场景

给复杂类型起别名

// 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 '打电话'}
}

说明:

1. 使用 {} 来描述对象结构
2. 属性采用属性名: 类型的形式，如果是多行，可以省略,
3. 方法采用方法名(): 返回值类型的形式
4. 可选使用 ?

对象类型-接口

格式

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 '打电话'}
}

解释：

1. 使用 interface 关键字来声明接口
2. 接口名称(比如，此处的 IPerson)，可以是任意合法的变量名称，推荐以 I 开头
3. 声明接口后，直接使用接口名称作为变量的类型

 接口和类型的区别

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
}

 解释：

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

泛型

 

 

四、VSCode中的编码技巧

• 如果不知道类型，可以通过鼠标放在变量名称上，利用 VSCode 的提示来查看类型

• 写代码的时候，多看方法、属性的类型，养成写代码看类型的习惯