typescript实战练习 typescript怎么学

转载

mob6454cc6c40c9 2024-04-10 14:39:56

文章标签 typescript实战练习 typescript 大前端值类型变量类型 文章分类 TypeScript 前端开发

TypeScript -- 基础语法篇

欢迎学习TypeScript

1. 环境安装与运行

1.1 环境配置
1.2 自动编译TS文件

2. 常见类型
3. 函数

3.1 返回值和参数

未完待续

总结

欢迎学习TypeScript

TypeScript（简称TS），是Javascript的一个超集，通过编译器编译成javascript后运行。你问为什么学习TS？同作为初学者，我目前的理解是，TS加强了类型声明变量类型的书写(静态类型)，可以有效的减少开发bug，加强可读性。作为微软开源的一门语言。。。磕就完事了！别问，问就是直觉：就是大橘观。

1. 环境安装与运行

1.1 环境配置

先介绍两个工具:

node: 独立于运行浏览器运行的工具
npm: 包管理工具

首先：node官网下载与本机匹配的node版本，并安装。打开cmd命令行

node -v （查看安装对用的node版本）
npm -v (查看包管理工具版本)

接下来配置TS环境：

npm install -g typescript (全局安装TS环境)
tsc -v (查看安装的ts编译器版本号)
tsc:编译器指令，负责将ts代码装换成浏览器认识的js代码。

Ok,当这叁版本号都正常显示时，you know, you success。

1.2 自动编译TS文件

为什么要自动编译TS文件？因为截至目前，浏览器是不支持解析TS代码的，而手动编译，即tsc ./×××.js文件，较为繁琐，VSCode支持自动编译，省去敲击命令编译，由工具来自动完成。

打开VSCode设置自动编译：

VSCode打开终端，运行 tsc --init ，创建tsconfig.json文件
打开json文件，修改"outDir",设置输出路径文件夹。

"outDir": "./js/",   /* Redirect output structure to the directory. */

打开菜单栏终端–运行任务–tsc:监视，开启监视任务。
此时看到更目录下有了个叫js的文件夹，我们写的ts会自动解析为文件夹下的同名js文件。

OK，接下来正式开始上正菜：

2. 常见类型

问：TS的常见类型和JS中有什么不同？

TS中共有12种类型：
JS原有类型：String、Number、Boolean、Null、Undefined、Object、Symbol
TS在原有的基础上新增：Tumple(元组)、Enum(枚举)、Any(任意类型)、Never、Void

类型的具体使用详见：

// 变量的声明
let aName:string = '大头儿子';
// aName = 520;
// 声明报错，为变量指定了类型，就只能给这个变量设置相同类型的值

// 1.字符串类型a
let bName:string = '小头爸爸';

// 2.数值类型
let cAge:number = 18;
cAge = 18.18  //支持浮点数
cAge = -18.18  //支持小数

// 3.布尔类型 true / false
let isMan:boolean = true;
isMan = false; 
// 注意，在TS中，不再支持将true用1代表，false用0代表。


// 4.undefined 和 null
let undef: undefined = undefined;
let nul: null = null;

// 6.数组(Array--常用的Object对象) 注意！！TS数组不同于JS数组，需指定类型；
// 因此一个数组不能再存储不同的数据类型了！
// 语法方式一：let 数组名：类型[] = [值1,值2,值3]
let arrPeople:string[] = ['大头儿子','围裙妈妈','小头爸爸'];
// 语法方式二：let 数组名：Array<string> = [值1,值2,值3]
let arrPeople1: Array<string> = ['大头儿子','围裙妈妈','小头爸爸'];


// 7.元组(tuple)：规定了元素数量和每个元素类型的"数组"，每个元素的类型，可以不同。
// 弥补数组中不能存储不同类型的问题
// 语法方式： let 元组名：[类型1,类型2,类型3] = [值1,值2,值3]
// 声明时,指定元素个数;并为每个元素规定类型
let tup1:[string,number,boolean] = ['大头儿子',12,true];
tup1 = ['大头儿子',13,false]  // 可以重新赋值，只需要对应类型保持一致

// 8.枚举(enum) --> 用一组标识来代替一组数值
// 枚举项: 一般用英文和数字     枚举值:用整型数字 (枚举值可以省略)
// 语法方式: enum 枚举名 {
//     枚举项1 = 枚举值1,
//     枚举项1 = 枚举值1,
// }

// 创建性别上的枚举
enum Gender {
    Boy = 1,
    Girl = 2,
    Threepeople = 3
}

console.log(Gender.Boy); //1
console.log(Gender.Girl); //2
console.log(Gender.Threepeople); //3

enum Gender_2 {
    Boy,
    Girl,
    Threepeople
}

console.log(Gender_2.Boy); //0
console.log(Gender_2.Girl); //1
console.log(Gender_2.Threepeople); //2

// 使用性别枚举
let peopleSex:Gender = Gender.Boy;
    console.log(peopleSex); //1
console.log(peopleSex === Gender.Boy); //true

// 9.任意类型(any):一般在dom,或在我们接收用户输入或第三方代码库时
//   还不确定会返回什么类型的值时使用。
let txtName:any = document.getElementById('txt')

// 10.空类型(void):代表没有类型,一般用在无返回值的函数中
function sayHi(): void {
    console.log('你好TypeScript');   // 内部不用return关键字
}

// 11其他类型(never):代表不存在的值的类型,常作为抛出异常的函数返回类型
// 语法方式一: 无限循环 
function test(): never {
    while(true) {
    }
}
// 语法方式二: 抛出异常
function tese_1():never {
    throw new Error('学TS者,得天下');
}
// 注意:所有类型都是never类型的父类,never类型值可以赋给任意类型的变量

TS中的类型推断和联合类型如下：

// 类型推断:如果变量声明和初始化在同一行,可以省略变量类型的声明.

// 联合类型:表示取值可以为多种类型中的一种
// 语法方式: let 变量名: 变量类型1 | 变量类型2 = 值;
// 用户点击确认,返回string类型,点击取消,会返回null,怎么办呢?
let dName: string | null = prompt('请输入年龄:');
console.log('hello' + dName);

3. 函数

3.1 返回值和参数

// ts中必须要设置返回值类型
/**
 * 函数返回值的类型-->如果函数没有返回值,则定义为void
 * function 函数名():返回值类型 {
 * 
 * }
 * let 变量名:变量类型 = 函数名();
 */

function sayHi1():string {
  return '天明，是你吗';
}
let res1:string = sayHi1()
console.log(res1);

/**
 * 函数形参类型 --->实参和形参的类型和数量都要一致
 * function 函数名(形参1:类型, 形参2:类型):返回值类型 {
 * 
 * }
 * let 变量名:变量类型 = 函数名(实参1, 实参2)
 * 编译器帮我们将形参对应的实参作编译检查，保证形参的类型和实参的类型一致
 */

function jumpSan(episode: string): void {
  console.log('天明是你吗？');
  console.log(`不是我，我已经【${episode}】没有出现了`);
}
jumpSan('两季')

/**
 * 可选参数
 * function 函数名(形参 ? :类型):返回值类型 {
 * 
 * }
 * 
 * 形参一旦设置了默认值，就不再加？设置为可选参数了 -->不再需要形参和实参数量一致性了
 * function 函数名(形参1:类型=默认1, 形参2:类型 = 默认值2):返回值类型 {
 * 
 * }
 */
function qingShi(people: string = '天明', count: number = 2) {
  console.log(`那个肯定不是【${people}】,他已经【${count}】季没有上线了！`);
}
// 两个都是默认值
qingShi(); //qingShi('天明',2)

// 前面的传，后面的参数不传
qingShi('少羽'); //qingShi('少羽',2)

// 两个都是实参
qingShi('月儿', 3)

// 前面的不传，后面的传
qingShi(undefined, 3) //qingShi('天明', 3)

/** 剩余参数-->只能写在形参列表的最后
 * function add(形参1:类型, 形参2:类型, ...形参3:类型[]):void {
 * 
 * }
 * 
 */
function add(x: number, y: number, ...resofNum: number[]) {
  let resNum: number = x + y;
  for (let ele of resofNum) {
    resNum += ele;
  }
  console.log('打印结果：' + resNum );
}

add(1,2) //打印结果：3
add(1,2,3,4,5,6,7) //打印结果28

小结：