TypeScript-Note

博主： ahxin
发布时间：2024 年 01 月 23 日
1344 次浏览
4376字数
分类：前端 TypeScript

# TypeScript-Note

[TypeScript官网：typescriptlang.org](https://www.typescriptlang.org/play?#code/MYGwhgzhAEAOCmB7WJ4G8BQ04CcCWAbmAC7zQB2YAtvAFzQTH7kDm0AvAOSda6ElkwLOhQCuVAEbwcHaAAYMvAPRLogEPNABAmBfxUAOpr2CJyjHKODFEOABSUa9Y3lYAaaEJHlxUnAEpM2bMQALPAgAOhsydgpqeF5-INDXWVdeAF9lVUAEI0ANFUBO00BVm15YUQkQPGBoYWIAWQgWSy87JgcWXz8ceGJRHHJoTkADeUBfTUAsf85oAGpoQOCw6PHe11pRiamE4VSMNIwVaEAs7UBJOUAAOUAqOUAuuQxQSBgAKzBgAGsABSRoeAAPUnIAExgEZFRWgxGJimcxWcKNZgsZwLMSSaQ+WIMUQIMHRaHCLzrQrFUrlSo1OoNBhNVjQVrYdqdbq9QDnfoB-I0A3j6AELdABG2gHsDEZzFYzGhzUYwpaTeIhVwAbnWmwwqGI0Bu91k5HgAHdZbdHkhLJwAFJqziOABMAFZMYCIIhUCEQIg6nK7iF8bV6l4gA)

## 一、变量声明

- TypeScript在JavaScript的基础上加入了静态类型检查功能，因此每一个变量都有固定的数据类型。

![][1]

### 1.1、string:字符串
可以用单引号或双引号

```typescript
let msg: String = 'hello World'
```

### 1.2、number:数值
整数、浮点数都可以

```ts
let age: number = 21
```

### 1.3、boolean:布尔

只有true、false两种

```ts
let a:boolean = true
let b:boolean = false
```

### 1.4、any:不确定类型
可以是任意类型

```ts
let a:any = 'jack'
let a:age = 18
```

### 1.5、union:联合类型
可以是多个指定类型中的一种

### 1.6、Object:对象

```ts
let p = {
  name: 'jack',
  age: 21
}

调用：
console.log(p.name)
console.log(p.['name'])
```

### 1.7、Array: 数组
元素可以是任意其它类型

```ts
let names: Array<string> = ['jack','rose']
let ages: number[] = [21,25,18]

调用
console.log(name[0])
```

## 二、条件控制

- TypeScript与大多数开发语言类似，支持基于if-else和switch的条件控制。
- `在TypeScript中，空字符串、数字0 null、undefined都被认为是false 其ウ值则为true`

### 2.1、if...else

```ts
let num:number =18

// 判断奇偶
if(num%2 === 0){
  console.log(num + '是偶数')
}else{
  console.log(num + '是奇数')
}
```

### 2.2、if...else if

```ts
let age: number = 17

if(age >= 18){
  console.log('成年')
}else if(age >=0 && age < 18){
  console.log('未成年')
}else{
  console.log('错误')
}
```

### 2.3、switch...case...default

```ts
let grade: string = 'A'

switch(grade){
  case 'A':{
    console.log('优秀')
    break
  }
  case 'B':{
    console.log('良好')
    break
  }
  case 'C':{
    console.log('及格')
    break
  }
  case 'D':{
    console.log('及格')
    break
  }
  default:{
    console.log('非法输入！')
    break
  }
}
```

## 三、循环迭代

### 3.1、for循环

```ts
for(let i = 1; i<=10; i++){
  console.log('运行了'+ i + '次')
}
```

### 3.2、while循环

```ts
let i: number = 1;
while( i<10 ){
  console.log('运行')
}
```

### 3.3、for in

`通过角标获取`

```ts
let names: string[] = ['jack','rose']

for(const i in names){
  console.log(i + ':' + name[i])
}
```

### 3.4、for of

`直接得到元素`

```ts
let names: string[] = ['jack','rose']

for(const name of names){
  console.log(name)
}
```

## 四、函数

- TypeScript通常利用functi on关键字声明函数，并且支持可选参数、默认参数、箭头函数等特殊语法。

### 4.1、无返回值函数
`返回值void，可以省略`

```ts
function sayHello(name: string):void{
  console.log('你好呀' + name)
}

// 用法
sayHello('jsck')
```

### 4.2、有返回值函数

```ts
function sum(x: number, y: number): number{
  return x + y
}
let a = sum(20,20)
console.log(a)
```

### 4.3、箭头函数

==默认参数：==

```ts
let sayHi = (name: string)=>{
  console.log('你好：' + name)
}
sayHi('jsck')
```

==可选参数：==

```ts
let sayHi = (name?:sting)=>{  // 这里的“ ？ ”加上了调用函数可以不加参数
  name = name ? name:'陌生人'
  console.log('你好：' + name)
}
sayHi()
```

## 五、类和接口

- TypeScript具备面向对象编程的基本语法，例如interface、class、 enum等。也具备封装、 继承、多态等面向对象基本特征。

### 5.1、类、接口、枚举

类：`class`

枚举：`enum`

接口实现：`interface`

```ts
enum Msg{
  Hi = 'Hi',
  Hello = 'Hello'
}

interface A{
  say(msg: Msg):void
}

// 实现A接口
class B implements A{
  say(msg: Msg):void{
    console.log(msg + '这里B实现了A接口')
  }
}

let a:A = new B()
a.say(Msg.Hi)
```

### 5.2、继承

私有的：`private`

公开的：`public`

继 承：`extends`

```ts
class people{
  private name: string =''
  private age: number = 0

// 构造函数
  constructor(name: string, age: number){
    this.name = name
    this.age = age
  }
  // 成员方法
  public getMsg(): string{
    return '你好：' + this.name + 'age:' + this.age
  }
}

// 定义一个人
class jackPeo extends people{
  constructor(name: string, age: number){
    super(name, age)
  }

public getMsg(): string {
    return '继承类的消息：' + this.name + ' age: ' + this.age;
  }
}

let jack = new jackPeo('Jack',25)
console.log(jack.getMsg())
```

## 六、模块开发

- 应用复杂时，我们可以把通用功能抽取到单独的ts文件中，每个文件都是一个模块（module）。模块可以相互加载，提高代码复用性。

目录结构：

==**rectangle.ts:**==

```ts
// 定义矩形类并导出
export class Rectangle {
  public width: number;
  public length: number;

// 构造函数
  constructor(width: number, length: number) {
    this.width = width;
    this.length = length;
  }
}

// 定义工具方法求矩形面积并导出
export function area(rec: Rectangle): number {
  return rec.width * rec.length;
}
```

==**index.ts:**==

```ts
// 导入Rectangle类和area方法
import { Rectangle, area } from '../rectangle';

// 创建Rectangle对象
let r = new Rectangle(10, 20);

// 调用area方法
console.log('面积为：' + area(r));
```

[1]: https://a-hxin.cn/usr/uploads/2024/01/2736409157.png

最后修改：2024 年 01 月 24 日

咱们谁跟谁，用不着～

TypeScript-Note

ahxin • 2024 年 01 月 23 日

# TypeScript-Note

## 一、变量声明

- TypeScript在JavaScript的基础上加入了静态类型检查功能，因此每一个变量都有固定的数据类型。

![][1]

### 1.1、string:字符串
可以用单引号或双引号

```typescript
let msg: String = 'hello World'
```

### 1.2、number:数值
整数、浮点数都可以

```ts
let age: number = 21
```

### 1.3、boolean:布尔

只有true、false两种

```ts
let a:boolean = true
let b:boolean = false
```

### 1.4、any:不确定类型
可以是任意类型

```ts
let a:any = 'jack'
let a:age = 18
```

### 1.5、union:联合类型
可以是多个指定类型中的一种

### 1.6、Object:对象

```ts
let p = {
  name: 'jack',
  age: 21
}

调用：
console.log(p.name)
console.log(p.['name'])
```

### 1.7、Array: 数组
元素可以是任意其它类型

```ts
let names: Array<string> = ['jack','rose']
let ages: number[] = [21,25,18]

调用
console.log(name[0])
```

## 二、条件控制

- TypeScript与大多数开发语言类似，支持基于if-else和switch的条件控制。
- `在TypeScript中，空字符串、数字0 null、undefined都被认为是false 其ウ值则为true`

### 2.1、if...else

```ts
let num:number =18

// 判断奇偶
if(num%2 === 0){
  console.log(num + '是偶数')
}else{
  console.log(num + '是奇数')
}
```

### 2.2、if...else if

```ts
let age: number = 17

if(age >= 18){
  console.log('成年')
}else if(age >=0 && age < 18){
  console.log('未成年')
}else{
  console.log('错误')
}
```

### 2.3、switch...case...default

```ts
let grade: string = 'A'

## 三、循环迭代

### 3.1、for循环

```ts
for(let i = 1; i<=10; i++){
  console.log('运行了'+ i + '次')
}
```

### 3.2、while循环

```ts
let i: number = 1;
while( i<10 ){
  console.log('运行')
}
```

### 3.3、for in

`通过角标获取`

```ts
let names: string[] = ['jack','rose']

for(const i in names){
  console.log(i + ':' + name[i])
}
```

### 3.4、for of

`直接得到元素`

```ts
let names: string[] = ['jack','rose']

for(const name of names){
  console.log(name)
}
```

## 四、函数

- TypeScript通常利用functi on关键字声明函数，并且支持可选参数、默认参数、箭头函数等特殊语法。

### 4.1、无返回值函数
`返回值void，可以省略`

```ts
function sayHello(name: string):void{
  console.log('你好呀' + name)
}

// 用法
sayHello('jsck')
```

### 4.2、有返回值函数

```ts
function sum(x: number, y: number): number{
  return x + y
}
let a = sum(20,20)
console.log(a)
```

### 4.3、箭头函数

==默认参数：==

```ts
let sayHi = (name: string)=>{
  console.log('你好：' + name)
}
sayHi('jsck')
```

==可选参数：==

```ts
let sayHi = (name?:sting)=>{  // 这里的“ ？ ”加上了调用函数可以不加参数
  name = name ? name:'陌生人'
  console.log('你好：' + name)
}
sayHi()
```

## 五、类和接口

- TypeScript具备面向对象编程的基本语法，例如interface、class、 enum等。也具备封装、 继承、多态等面向对象基本特征。

### 5.1、类、接口、枚举

类：`class`

枚举：`enum`

接口实现：`interface`

```ts
enum Msg{
  Hi = 'Hi',
  Hello = 'Hello'
}

interface A{
  say(msg: Msg):void
}

// 实现A接口
class B implements A{
  say(msg: Msg):void{
    console.log(msg + '这里B实现了A接口')
  }
}

let a:A = new B()
a.say(Msg.Hi)
```

### 5.2、继承

私有的：`private`

公开的：`public`

继 承：`extends`

```ts
class people{
  private name: string =''
  private age: number = 0

// 定义一个人
class jackPeo extends people{
  constructor(name: string, age: number){
    super(name, age)
  }

public getMsg(): string {
    return '继承类的消息：' + this.name + ' age: ' + this.age;
  }
}

let jack = new jackPeo('Jack',25)
console.log(jack.getMsg())
```

## 六、模块开发

- 应用复杂时，我们可以把通用功能抽取到单独的ts文件中，每个文件都是一个模块（module）。模块可以相互加载，提高代码复用性。

目录结构：

==**rectangle.ts:**==

```ts
// 定义矩形类并导出
export class Rectangle {
  public width: number;
  public length: number;

// 构造函数
  constructor(width: number, length: number) {
    this.width = width;
    this.length = length;
  }
}

// 定义工具方法求矩形面积并导出
export function area(rec: Rectangle): number {
  return rec.width * rec.length;
}
```

==**index.ts:**==

```ts
// 导入Rectangle类和area方法
import { Rectangle, area } from '../rectangle';

// 创建Rectangle对象
let r = new Rectangle(10, 20);

// 调用area方法
console.log('面积为：' + area(r));
```

[1]: https://a-hxin.cn/usr/uploads/2024/01/2736409157.png

TypeScript-Note

中国移动GM220-S光猫配置信息备份及修改为桥接模式并启用IPV6

UltraISO 软碟通注册（亲测！！！）

解决网易云Web页面只显示20首音乐

VMware 17.0 安装Windows11时出现out time 怎么解决

Win11 | Xbox Game Bar离线安装包 | 游戏录制、性能监控、FPS监控工具

欧卡高配电脑欧卡配置优化

Node.js 报错ReferenceError: path is not defined

DML MySQL笔记

Nginx 实现 Vue 路由代理

TypeScript-Note