# typescript_demo1

**Repository Path**: li_2433/typescript_demo1

## Basic Information

- **Project Name**: typescript_demo1
- **Description**: typescript复习，js知识点复习过程
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-05-16
- **Last Updated**: 2025-06-05

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# typescript_demo1

#### 一、介绍
1. 介绍
TypeScript是由微软开发的开源、跨平台的编程语言，简称TS
TypeScript是JavaScript的超集，是在JavaScript基础上进行的功能性扩展，语法更严格、更简洁
TypeScript无法直接运行，需要转换为JavaScript才能运行
TypeScript代码是定义在以 .ts 结尾的文件中，最终需要编译为 .js 结尾的文件
参考：https://www.tslang.cn
2. 优点
提供类型系统：增强了代码的可读性和可维护性，在编译阶段就能发现大部分错误
支持ES6：ES6规范是客户端脚本语言的发展方向
强大的IDE支持：类型检测、语法提示



#### 二、环境配置
1. 安装环境
将.ts文件转换为.js文件，需要使用TypeScript编译器
使用npm全局安装TypeScript编译器工具
执行： `npm install typescript ­-g` ，安装TypeScript编译器
安装后提供一个全局命令工具： `tsc`

```
tsc -­v // 查看版本
tsc -­h // 查看帮助
tsc 选项 ts文件路径 // 编译ts文件，默认会在相同位置生成一个同名的js文件
tsc 01.first.js
tsc ­--­outDir ./js 01.first.js
```

注：VSCode内置了TypeScript插件，提供了TypeScript语法校验功能，会对所有.ts文件进行语法校验

2. TypeScript项目
如果一个目录下存在一个 `tsconfig.json` 文件，那么它意味着这个目录是TypeScript项目的根目录
- 这里是列表文本包含tsconfig.json文件的目录为一个独立的TypeScript项目
- 这里是列表文本可以在tsconfig.json文件中设置编译器选项，如转换规则、输出目录等
- 这里是列表文本在项目根目录下执行： `tsc --­­init` ，可以进行TypeScript项目的初始化，会自动生成tsconfig.json文件
自动监视编译项目：
- 这里是列表文本在TypeScript项目根目录下执行： `tsc ­-w -­p tsconfig.json` ，对项目开启自动监视编译
- 这里是列表文本在VSCode中执行：终端——>运行任务——>tsc:监视­tsconfig.json
tsconfig.json配置项可参考 https://www.tslang.cn/docs/handbook/compiler­options.html

#### 三、TypeScript语法

1.  TS对JS扩展的相关语法功能
变量
JS中定义变量： `var/let/const 变量名 = 变量值;`
TS中定义变量： `var/let/const 变量名:数据类型 = 变量值;`
- 增加了数据类型的限制
- 该功能主要为开发者在开发阶段，提供了限定变量类型限制的功能

语言类型：
- 弱类型语言
  在定义变量时无需指定数据类型，且变量的类型可以修改，如 js、php

- 强类型语言
  在定义变量时需要指定数据类型，且变量的类型不能改变，如 java、ts

2.  数据类型
TS除了支持JS中的数据类型外，还扩展了一些数据类型：
- JS中的类型：string、number、boolean、Array、null和undefined
- TS新增类型：元组、枚举enum、any、void、never
- 联合类型：表示一个值可以是几种类型之一，使用|定义
- 类型断言：用来断定变量类型，目的是使编译器通过，只在编译阶段起作用
写法有：(<string>strs).length  或者  (strs as string).length

3.  函数，语法：
```
function 函数名(参数名:数据类型,参数名?:数据类型,参数名:数据类型＝默认值):返回值类型{
// 函数体
}
```

#### 四、回顾js对象

- js创建对象的三种方式以及
    1.对象字面量：优点（快速简单），缺点（没有原型，不能使用prototype添加共享功能，只能描述对象结构）
    2.构造器/构造函数：优点（基于同一个结构，有共同的原型，可以添加共享原型属性、方法），缺点（无法为构造函数提供独立作用域）
    3.自执行函数构造器（闭包函数）：使用自执行函数(function (){})(),将构造函数包裹，制造一个独立作用域
- js对象实现继承的三种方式
    1.对象冒充：利用call，在子类的构造器使用call指向父类构造器，从而实现继承构造函数方法、属性，缺点（无法继承父类原型链的方法、属性）
    2.原型链继承：使用子类构造函数的原型，指向父类的实例化对象（或者父类的原型），缺点（无法拿到构造器的方法、属性）
    3.使用组合继承：对象冒充+原型链继承，注意：如果子类原型指向父类实例化对象，则会导致父类被实例化两次，有性能损耗，直接子类原型指向父类原型则较为完美


#### 五、类

- 类的使用
    一个类就是一个数据类型，定义一个类其实就是创建了一种数据类型
    构造函数会自动调用、用于初始化等操作
    语法：
    
```
class 类名 {
        成员属性
        成员方法
        构造函数 constructor
    }
```

- 待更新...


#### 参与贡献

1.  Fork 本仓库
2.  新建 Feat_xxx 分支
3.  提交代码
4.  新建 Pull Request


#### 特技

1.  使用 Readme\_XXX.md 来支持不同的语言，例如 Readme\_en.md, Readme\_zh.md
2.  Gitee 官方博客 [blog.gitee.com](https://blog.gitee.com)
3.  你可以 [https://gitee.com/explore](https://gitee.com/explore) 这个地址来了解 Gitee 上的优秀开源项目
4.  [GVP](https://gitee.com/gvp) 全称是 Gitee 最有价值开源项目，是综合评定出的优秀开源项目
5.  Gitee 官方提供的使用手册 [https://gitee.com/help](https://gitee.com/help)
6.  Gitee 封面人物是一档用来展示 Gitee 会员风采的栏目 [https://gitee.com/gitee-stars/](https://gitee.com/gitee-stars/)