TypeScript 类型学习1
//基本类型 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; //类型别名可以简化类型的使用 //以上就是最基本的也是用的最多的