TypeScript基础语法

👨 作者简介：大家好，我是Taro，前端领域创作者
✒️ 个人主页：唐璜Taro
🚀 支持我：点赞👍+📝 评论 + ⭐️收藏

---

---

前言

本博客将深入介绍TypeScript语法，探讨其在现代Web应用程序开发中的重要性和应用。

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、TS是什么？

TS 是一种带有 类型语法 的 JavaScript 语言，在任何使用 JavaScript 的开发场景中都可以使用。

二、使用步骤

vue3源码使用TS重写，React与TS完美配合，Angular默认支持TS

1.安装TS

代码如下（示例）：

npm i -g typescript
1

检查是否安装成功

tsc -v
1

2.编译

• 新建 hello.ts 文件
• 当前目录打开命令行，执行 tsc hello.ts 命令，同级生成hello.js 文件
• 执行 node hello.js 查看执行结果

后期可借助 webpack ，vite 实现自动编译

---

三、数据类型变化

JS 已有类型：
基本数据类型：string , number , null , undefined , boolean
引用数据类型：Array , Object , Function , Symbol
TS 新增类型：
自定义数据类型（类型别名）、接口、元组、字面量类型、void、any、泛型、枚举

四、TS核心

1. 类型注解

let age:number = 18
1

这里的 :number 就是类型注解，它为变量提供了类型约束

2. 原始类型

原始类型使用简单，完全按照 JS 的类型书写即可

let age:number = 18;
let name:string = "Taro";
let isLoading:boolean = false;
let nullValue = null;
let undefinedValue = undefined;
1
2
3
4
5

3. 数组类型

数组类型有两种写法

• 写法1

let arr:number[] = [1,2,3,4,]
1

• 写法2

let arr:Array<string> = ['a','b','c']
1

如果数组中要存储多种数据呢？既 number 又存在 string 类型

4. 联合类型

let arr:(number|string)[] = [1,'a',2,'b',3,'c']

1
2
3

类型与类型之间使用 | 连接，代表类型是它们其中的一种，这种类型叫 联合类型

5. 类型别名

当同一类型（复杂）被多次使用时，可以通过类型别名，进行简化（类型别遵循大驼峰命名规范）

type CustomArr = (number | string)[]

let arr:CustomArr = [1,'a',2,'b',3,'c']

let arr2:CustomArr = [1,'a',2,'b',3,'c']

1
2
3
4
5
6

5. 函数类型

给函数指定类型，其实就是给 参数 和 返回值 指定类型

• 两种写法
  在函数基础上 分别指定 参数和返回类型
  使用类型别名 同时指定 参数和返回类型

// 函数声明

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

// 箭头函数

const add = (num1:number,num2:number):number => {
  return num1 + num2
}
1
2
3
4
5
6
7
8
9
10
11

同时指定

type AddFn = (num1:number , num2:number) => number;

const add:AddFn = (num1,num2) => {
  return num1 + num2
}
1
2
3
4
5

6. void类型

如果函数没有返回值，且没有返回类型时，默认是 void

const say = ():void =>{
  console.log('Hello')
}
1
2
3

7. 可选参数

使用 ? 将参数标记为可选，此时函数的参数，可传可不传；【但是必传参数必须在可选参数前面】

function fn(num1:number, num2?: number) {
  console.log(num1)
  console.log(num2)
}

fn(10)

fn(10,20)
1
2
3
4
5
6
7
8

8. 类型推断

在 TS 中存在类型推断机制，在没有指定类型的情况下，TS也会给变量提供类型

let age = 18

function add(num1:number,num2:number){
  return num1 + num2
}
1
2
3
4
5

8. 对象类型

js中定义对象类型是这样的

let person = {
  name:'jack',
  sayHi(){}
}
1
2
3
4

TS中是这样的

// 有属性和方法，一行书写多个属性 ; 分隔
let person: { name: string; sayHi(): void } = {
  name: 'jack',
  sayHi() {},
};
1
2
3
4
5

9. any类型

any类型的作用是逃避 TS 的类型检查

let obj:any = {age:18}
1

当变量的类型指定为any时，不会有任何错误，也不会有任何代码提示，TS会忽略类型检查

10. 类型断言

当我们比 TS 更加明确一个值的类型，此时，可以使用类型断言来指定更具体的类型

// 这个类型太宽泛，没包含 a 元素特有的属性或方法，如 href
const aLink = document.getElementById('Link')
1
2

但是我们明确知道获取的是一个 A 元素，可以通过 类型断言 给它指定一个更具体的类型。

const aLink = document.getElementById('link') as HTMLAnchorElement
1

11. interface 接口

interface Person {
  name:string;
  age:number;
  sayHi:()=> void
}
1
2
3
4
5

• 继承

两个接口相同的属性可以抽离出来，通过 extends 实现继承复用

interface Point2D {
  x: number;
  y: number;
}

// 继承 Point2D

interface Point3D extends Point2D {
  z: number;
}

// 继承后 Point3D 的结构：{ x: number; y: number; z: number }
1
2
3
4
5
6
7
8
9
10
11
12

let person:Person = {
  name:'jack',
  age:19,
  sayHi(){}
}
1
2
3
4
5

12. type 交叉类型

// 使用 type 来定义 Point2D 和 Point3D
type Point2D = {
  x: number;
  y: number;
};

// 使用 交叉类型 来实现接口继承的功能：

type Point3D = Point2D & {
  z: number;
};

// 使用 交叉类型 后，Point3D === { x: number; y: number; z: number }

let o: Point3D = {
  x: 1,
  y: 2,
  z: 3,
};

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

13. interface VS type

• type 不支持重复定义

type Person = {
  name: string;
};
// 标识符“Person”重复  Error
type Person = {
  age: number;
};

1
2
3
4
5
6
7
8

• interface 重复定义会进行合并

interface Person {
  name: string;
}
interface Person {
  age: number;
}
// 类型会合并，注意：属性类型和方法类型不能重复定义
const p: Person = {
  name: 'jack',
  age: 18,
};

1
2
3
4
5
6
7
8
9
10
11
12

14. 泛型

泛型是一种创建可复用代码组件的工具。这种组件不只能被一种类型使用，而是能被多种类型复用。类似于参数的作用

• 泛型别名

type User = {
  name: string;
  age: number;
}

type Data<T> = {
  msg: string;
  code: number;
  data: T
}

// 使用类型
type UserData = Data<User>
1
2
3
4
5
6
7
8
9
10
11
12
13

• 泛型接口

// 对象，获取单个ID函数，获取所有ID函数，ID的类型肯定是一致的，但是可能是数字可能是字符串
interface IdFn<T> {
  id: () => T;
  ids: () => T[];
}

const idObj: IdFn<number> = {
  id() { return 1 },
  ids() { return [1, 2] },
};

1
2
3
4
5
6
7
8
9
10
11

• 泛型函数

// 函数的参数是什么类型，返回值就是什么类型
function getId<T>(id: T): T {
  return id
}

let id1 = getId<number>(1)
let id2 = getId('2')

// TS会进行类型推断，参数的类型作为泛型的类型 getId<string>('2')

1
2
3
4
5
6
7
8
9
10

---

总结

例如：以上就是今天要讲的内容，TypeScript语法是现代Web应用程序开发中不可或缺的一部分，通过静态类型检查和其他优秀的特性，可以提高代码质量和开发效率。