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,[])) 报错 因为找不到定义了数组类型的重载

函数重载跟返回值没关系 跟参数顺序 个数 类型不同进行重载

上一篇下一篇

猜你喜欢

热点阅读