TypeScript 类型学习1

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

//基本类型 string boolean number 字面量
 
//js文件是由ts文件编译完成的 把js变成静态的
 
//number 指定a的类型且为字符串类型 后面的赋值只能是指定类型
let a: number; //《方法1》
a = 19;
//a = "2121å";
//即使ts写的错误也会编译成功 为了便于推广 后续可以通过配置文件进行配置来防止这种错误来阻止编译
 
let b: string;
b = "王佳慧";
//可以编译成任意版本  tsc --target 'es2020'   1_type.ts --outFile 'index.es2020.js' tsc命令编译 好处就是确保兼容性不同浏览器 可以指定版本
//但是以上两种写法在项目中不经常用
 
//如果变量的声明和赋值是同时进行的，ts可以自动对变量进行类型检测的
let c: boolean = true; //所以这个写法有点多余了；
let d = true; //直接写成这种写法 《方法2》
 
//声明变量时，如果是先声明后赋值可以用 《方法1》
//如果是变量的声明和赋值是同时进行的 用《方法2》 ts还是比较贴心的
 
//js函数是不考虑的类型和个数的
//在js中写函数很方便，不考虑类型和个数，且不会报错，但是这样会给我们造成安全的隐患，如果在不经意见调用或者没有人告诉你穿什么类型，不小心就算错一个结果用到别的地方，可能会导致一连串错误，也不方便排错。这就是js给我们带来的问题。
//所以有了ts后，这个就是小问题。我们可以在函数直接定义参数的类型声明。
// function sum(a, b) {
//   return a + b;
// }
function sum(a: number, b: number) {
  return a + b;
}
sum(123, 324);
 
console.log(sum(123, 324), sum(123, "323232")); //不添加类型 即使编译他也不会报错  //加上类型后，编译代码还是会编译成功， 但是我们可以根据ts给的提示去排错。
 
//除了可以给参数给类型声明，还可以给函数返回值加类型声明
 
function sum1(a: number, b: number): number {
  return a + b;
}
let result = sum1(19, 10);
 
//字面量类型声明 //赋值一次就不能在修改了 一般不使用 使用情况
let e: 10;
e = 10;
 
let f: "hello" | "sayHello"; //可以使用来连接多个类型 （联合类型）
 
let g: boolean | string; //给他限制住类型
g = true;
g = "dakldsal";
 
//any 表示任意类型,一个变量设置类型为any后相当于对该变量关闭了ts的类型检测
//使用ts时不建议使用any
//这是显式的any
//let l: any;
let l; //隐式的any  声明变量如果不指定类型，则ts解析器会自动判断变量的类型为any
l = 121;
l = "heool";
l = true;
 
//unknown 表示未知类型的值
let m: unknown;
m = 10;
m = "323";
m = true;
 
//any和unknown的区别
let s: string;
//s = l;
 
//unknown是一个类型安全的any
//unknown类型的变量，不能直接赋值给其他变量
m = "heoooo";
// m = s;
s = <string>m;
s = m as string; //类型断言 可以用来告诉解析器变量的实际类型
if (typeof m === "string") {
  s = m;
}
 
//void用来表示为空，以函数为例，就表示没有返回值的函数
function fn(): void {
  //return 123; //会报错
}
 
//never表示永远不会返回结果 了解一下 用的比较少
function fn2(): never {
  throw new Error("报错了！");
}
 
//object表示一个js对象
 
let x: object; //一般不会这么写
x = {};
x = function () {};
 
//{}用来指定对象中可以包括哪些属性 ?表示可选属性
let z: { name: string; age?: number }; //指向一个对象
 
z = { name: "王佳慧", age: 12 };
 
//当对象中想要添加不做要求的属性 [propName: string]:string | number 表示任意类型的属性
let o: { name: string; [propName: string]: string | number };
o = { name: "王佳慧", age: 20, sex: "女", aa: "3232" };
 
//设置函数结构的类型声明
let h: (a: number, b: number) => number;
h = function (n1, n2): number {
  return n1 + n2;
};
 
//array数组 一般在开发中来存相同类型的值
//let arr: string[];
//数组的类型声明 1.2 两种
let arr: Array<string>;
arr = ["wangjiahui"];
 
//元祖和数组的区别，效率可能会好一点
//元祖是固定的. 一般不会特别多
 
let Tuple: [string, string];
Tuple = ["wang", "wang"];
 
//enum枚举
 
let i: { name: string; gender: number };
i = {
  name: "王佳慧",
  gender: 0,
};
console.log(i.gender === 0); //这样的写法不好 为了让别人去判断 他可能不知道0是男还是女
 
//这样写就可以方便处理了
enum Gender {
  nan,
  nv,
}
let nn: { name: string; gender: Gender };
nn = {
  name: "王佳慧",
  gender: Gender.nv,
};
console.log(nn.gender === Gender.nv);
 
let j: string & number; //表示同时 但是这样写没有意义
 
//一般用来连接两个对象
let J: { name: string } & { age: number };
J = { name: "王佳慧", age: 123 };
 
//类型别名
type myType = 1 | 2 | 3 | 4 | 5;
let k: 1 | 2 | 3 | 4 | 5;
let kk: 1 | 2 | 3 | 4 | 5; //这样比较麻烦 可以给类型起别名
 
let kkk: myType;
kkk = 1;
 
//类型别名可以简化类型的使用
 
//以上就是最基本的也是用的最多的