前端进阶--TS

ts的安装

npm install -g typescript
tsc hello1.ts hello2.ts hello3.ts 
//z在当前文件夹下生成hello1.js hello2.js hello3.js
node hello1.js
//即可运行

1、数据类型

TypeScript课程内容介绍.md · jiuyueqi/Class - Gitee.com

基本类型

null undefined bool string number array object symbol bigint

新增类型

2、类型限制

变量限制

readonly与const的区别: 做为变量使用的话用 const，若做为属性则使用readonly

let money:number;// 数值类型 number
let flag:boolean;// 布尔类型 boolean
let beauty:string;// 字符串类型 string

// 方式一：字符串类型
//表示定义了一个名称叫做 beautyList 的数组, 这个数组中将来只能够存储字符串类型的数据
let beautyList:string[];
// 方式二：数值类型
//表示定义了一个名称叫做 moneyList 的数组, 这个数组中将来只能够存储数值类型的数据
let moneyList:Array<number>;  
// 方式三 联合类型
// 表示定义了一个名称叫做 dream 的数组, 这个数组中将来既可以存储数值类型的数据, 也可以存储字符串类型的数据
let dream:(number | string)[];
// 方式四 任意类型
表示定义了一个名称叫做 arbitrarily 的数组, 这个数组中将来可以存储任意类型的数据
let arbitrarily:any[]; 

// 元祖类型 Tuple，TS中的元祖类型其实就是数组类型的扩展
// 元组类型用来表示已知元素数量和类型的数组，各元素的类型不必相同，对应位置的类型需要相同，数组长度相同
// 表示定义了一个名称叫做 tup1 的元祖, 这个元祖中将来可以存储3个元素, 
// 第一个元素必须是字符串类型, 第二个元素必须是数字类型, 第三个元素必须是布尔类型
let tup1:[string, number, boolean]; 
tup1 = ['宋祖儿', 100, false];

//any表示任意类型, 当我们不清楚某个值的具体类型的时候我们就可以使用any
// 改写现有代码时，任意值允许在编译时可选择地包含或移除类型检查,跳过类型检查
// 定义存储各种类型数据的数组时
let beautyList: any[] = [1, false, 'fine'];

// void类型 当一个函数没有返回值时，你通常会见到其返回值类型是 void
function makeMoney(): void {
  console.log("I want to make much money and marry a wife!!!");
  // return "100K beauty" // 报错
}
let value:void; // 定义了一个不可以保存任意类型数据的变量, 只能保存null和undefined

// 枚举用于表示固定的几个取值
// 例如: 人的性别只能是男或者女
enum Gender{ 
  Male,
  Femal
}
// 定义了一个名称叫做val的变量, 这个变量中只能保存Male或者Femal
let val:Gender; 
val = Gender.Male;
val = Gender.Femal;
// 注意点: TS中的枚举底层实现的本质其实就是数值类型, 所以赋值一个数值不会报错
val = 666; // 不会报错
console.log(Gender.Male); // 0
console.log(Gender.Femal);// 1

//type别名  类型别名就是给一个类型起个新名字, 但是它们都代表同一个类型
// 第一种
type beautys = "邱淑贞" | "赵雅芝" | "王祖贤" | "朱茵"
let one:beautys;
one = "邱淑贞";

// 第二种
type myfun = (a:number, b:number) => number;
let fun:myfun = (a:number, b:number) => a + b;
fun(10, 20);

// 第三种
type myGoddass = {
  name: string,
  age: number,
  sex: string,
  actor?: boolean
}
// 1.type可以声明基本数据类型，联合类型，数组等
//   interface只能声明变量
type age = number;
type info = string | number | boolean;

let shuzhen:myGoddass = {
  name: "邱淑贞",
  age: 18,
  sex: "女"
}

接口是一系列抽象方法的声明，是一些方法特征的集合，这些方法都应该是抽象的，需要由具体的类去实现，

变量名：类型

函数返回值与参数类型限制

interface 定义大型的结构体类型

type 定义变量类型和联合类型

class

变量声明与解构

类型限制

interface Request {
  (param: Param): Promise<responseType>;
}