typescript笔记--类型篇
2022-03-16 本文已影响0人
子绎
动态监听ts文件变动,自动编译js
//后面加上-w即可。 代表watch的意思
tsc index.ts -w
//若已经有配置文件存在,无需手动指定ts文件。可同时监听所有ts
tsc -w
生成ts配置文件
tsc --init
类型约束的基本语法
函数括号后的string 代表此函数的返回值必须是string类型
function add(test:number,test2:number):string{
if(test==test2){
return '我是字符串';
}
}
ts的类型:
1.number类型:数字类型统一为number类型,跟原生js一样,不区分float double int等。
2.boolean类型:跟原生js一样,true或者false
3.string类型:跟原生js一样 字符串类型。支持ES6模板字符串
4.array类型::
声明数组
代表这个数组只能装string类型的数据
let arr:string[]=[];
arr.push("123") √
arr.push(123) ×
泛型的方式
let arr:Array<string>= [];
5.null类型与undefined类型:null类型代表一个对象不存在的值,空指针。undefined代表初始化未指定值。
声明为空后,后续也只能是unll和undefined
const a:null=null;
const b:undefined=undefined
6.any类型:代表任意类型,使用any类型间接性代表不让ts对此变量进行任何变量约束检测。 不建议使用。
const a:any;
a=100;
a="30"
a=true;
以上行为都可以通过编译。
const a; 如果声明变量不指定类型,那么ts解释器会自动隐式的追加此变量为any类型。
7.unknown:代表未知的类型,跟any类似。不同的是,它是安全的未知类型, 一个被声明unknown类型的变量,不能再次被赋值给其他变量
const b:unknown;
b=30;√
b=true;√
const a:string;
a=b × 不能将unknown类型赋值给其他变量,即使上面已经初始化为30或true
const c:unknown;
c = b; √ 可以将unknown类型的变量再次赋值给unknown类型
const d:any;
d= b; √ 可以将unknown类型赋值给any类型;
有一种情况,由于unknown可以初始化为任何变量类型,所以一旦类型确定后,我们可以通过typeof判断,来将类型赋值给新的同种类型。例如
const b:unknown;
b=30;
const c:number;
if(typeof b==number){ 因为有了判断 所以只有为number的时候才会赋值,编译是可以通过的。
c =30; √
}
或者使用类型断言
c = b as string; √
或者使用泛型
c = <string> b; √
总结:unknown类型理论上不能赋值给任何类型,
但是它可以赋值给any类型和赋值给自己本身的unknown类型。
还有一种方法就是使用typeof判断或者类型断言,也可以实现将unnown类型赋值给其他类型。
8.void类型: 一般用于函数中,定义函数的返回值为空。如果不加,函数隐式返回值就是void
function test():viod(){}
9:never类型:表示函数永远不会有返回值。(不常用)
function test():never{
whlie(true){
}或者
throw new Error '' 抛出异常。
有返回值代表此程序正常,无返回值 通常是程序异常中止,或者无限循环。
}
10:对象的声明与使用
普通对象
let user = {name:"张三"}
增加类型约束的方式
let user:{name:string} //先声明这个对象的结构
user = {name:"张三"}// 根据结构赋对应的值
设置可选的值
let user:{name:string,age?:number}//携带问号表示此参数可选,实例化传参的时候age是可选的
user = {name:"张三"} √
设置可选值的情况下,同时设定可选值的类型也是可选的
let user:{name:string,age?:any} //any表示任意类型
user={name:"张三"} √
user ={name:"李四",age:30} √
除了限定好的参数外,允许传入其他未知属性(通过[propName:string]来声明的项的数据类型必须包含接口的其他项的内容)
let user:{name:string,age:number,[propName:string]:any}// 数组表示可以传N个未知属性,propName:string表示任意属性名称,并且是string类型, 最后any表示可以传入的值,any表示可以传入任意类型的值。
user = {name:"张三",age:30,fat:555} √
11.函数的声明规范
跟对象类似,要先定义一个函数的格式模板
let testFn:(name:number,age:number)=>number;
利用上面的函数模板 新建一个函数
testFn = (name:number,age:number)=>name+age;
或者普通函数
testFN = function(name:number,age:number){
return name+age;
}
使用
testFn(1,2);
都需要按照testFn的类型约束定义函数
上面的写法等价于
testFn:(name:string)=>string = function(test:string){ return name+'你好' };
这个函数意思就是 声明了一个函数的模板必须包含一个参数 并且类型为string。 返回值为string。
接着直接用这个模板声明了一个匿名函数function(test:string),也是一个实例化的过程。
12:联合类型声明: 就是除了可以声明一个类型外,可以额外指定N个其他类型
代表除了string之外 还可以是number类型 逻辑或语法
let name:string|number
也可以给数组约束多个类型的值
let arr:(string|number)[] = ["123",123]
12.1. 用字面量的方式声明一个变量
let sex:0;
sex = 0; √
sex=1; ×
以上只能分配为1,相当于一个常量,除了0以外 其他都不能赋值。
可以用于变量只有预期的1-2种情况,例如
let sex: '0' | '1' = '1';
sex = '0';
代表sex声明了一个类型 类型可以是0或者1. 将来赋值更改 也只可以从0和1之间选择
13.元组类型: 限制数组长度的数组,就叫元组。
普通数组声明 不限制个数,只需要符合string就可以。
const arr1:string[] = ["你好","啊啊"];
声明元组数组。 后面的数组个数和类型 必须受前面类型的限制。
const arr2:[string,number] = [' 啊啊啊',3132]
声明一个二维的元组数组,后面的数组个数不受约束。 这里约束的是子数组的元素个数
const arr3:[string,number][] = [ ['啊啊',12],[' 啊啊',222] ]
13.enum 枚举类型:类似于对象,但不支持后期设置值,在初始化就需要确定好值,内部赋值使用的是等于号。
enum test{
a,
b
}
使用 如果没有指定具体的值,那么会自动从0开始。如果手动赋值第一个a为3,那么第二个b自动为4.
console.log(test.a)
也可以手动指定为其他类型
enum test{
a="嗯",
b="啊"
}
类型别名:
概念:可以将一组类型约束 用类型别名包装,此类型约束就可以公用了。
在对象中 类型别名可以这么用
type strTest = {name:string,age:number}
let user = strTest;
在数组中 类型别名可以这么使用
type arrType = string;
let a: arrType[] = ["你好"];
在函数中 类型别名可以这么使用
type arrType = string;
function arr(a: arrType) {
console.log(a)
}
arr("你好")
类型断言: 一种强制类型转换
function testDemo(a: string | number): void {
a.length //会报错,因为a有可能是string 也有可能是Number。string可以调用length,但是number不行。ts就会报错
可以使用类型断言解决
第一步
a.length;
第二步 <string>a.length
第三步 将类型和a括号包起来 就完成了类型断言 强制转换成string
let len = (<string>a).length
也可以使用as语法 代替以上的语法 也是类型断言
第一步 a.length
第二步
(a as string).length
用以上as语法 就完成了类型断言
}
as const 的应用 :就是将某种变量转为只读
数组:
var arr:string[] as const; //此时不能push 只能获取
对象
const a{
name:"123"
} as const;
非空断言 通过符号!进行断言
let obj = document.querySelector(".box")!;
代表ts不进行非空的判断
-----分割线-----------
函数重载 如果有相同功能的方法名,利用重载声明,重载可以自动决定使用哪个类型约束
function add(a: number, b: number): number;
function add(a: string, b: string): number;
function add(a: any, b: any): any {
return a + b
}
console.log(add(1,2)) 会自动调用第二个函数。
console.log(add(1,[])) 报错 因为找不到定义了数组类型的重载
函数重载跟返回值没关系 跟参数顺序 个数 类型不同进行重载