TypeScript其他补充类型

1.unknown类型

ounknown类型代表任何值。这与any类型类似,但更安全,因为对未知unknown值做任何事情都是不合法的。

unknown类型被称作安全的any

1.任何类型都可以赋值给unknown类型

2.不能将unknown类型赋值给其它类型

3.unknow与其它任何类型组成的交叉类型最后都是其它类型

4.unknown除了与any以外,与其它任何类型组成的联合类型最后都是unknown类型

5.never类型是unknown类型的子类型
 

export default{}
 
//unknown类型代表任何值。这与any类型类似,但更安全,因为对未知unknown值做任何事情都是不合法的。
//unknown类型被称作安全的any
//类型断言
// num =val as number;
 
// //类型缩小
// if (typeof val=="number") {
//     num=val;
// }
//3.unknown与其它类型组成的交叉类型最后都是其它类型
type myTypel=number & unknown;
type myType2=unknown & number;
 
let a:myTypel=18;
 
// let b:myType2=false;
 
//4.unknown除了与any以外,与其它类型组成的联合类型最后都是unknown类型
type myType3=unknown | any
type myType4=unknown | string
type myType5=unknown | number | string
 
//5.never类型都是unknown类型的子类型
type myType6=never extends unknown?true:false

2.Map类型

Map对象保存键值对,并且能够记住键的原始插入顺序。

任何值(对象或者原始值)都可以作为一个键或一个值。

Map是 ES6中引入的一种新的数据结构

可以使用for of进行迭代

Map相关的函数与属性:

map.clear()-移除Map对象的所有键/值对。

map.set()-设置键值对,返回该Map 对象。

map.get()-返回键对应的值,如果不存在,则返回undefined,。

map.has()-返回一个布尔值,用于判断Map中是否包含键对应的值。

map.delete()-删除Map中的元素,删除成功返回true,失败返回false。

map.size-返回Map对象键/值对的数量。

map.keys()-返回一个lterator对象,包含了Map对象中每个元素的键。

map.values()-返回一个新的lterator对象,包含了Map对象中每个元素的值。

export default{}
let  nameMap=new Map()
//设置Map对象
nameMap.set("郭旭",1)
nameMap.set("虢胥",2)
nameMap.set("蝈煦",3)
 
//获取键对应的值
 
// console.log(nameMap.get("蝈煦11"))
//判断Map中是否包含键对应的值
console.log(nameMap.has("郭旭"));
console.log(nameMap.has("蝈煦"));
 
//返回Map对象键/值对的数量
console.log(nameMap.size);
 
//删除 Runoob
console.log(nameMap.delete("Runoob"));
console.log(nameMap);
 
//移除Map对象的所有值
nameMap.clear()
console.log(nameMap);
 
//迭代Map中的key
for(let key of nameMap.keys()){
console.log(key);
 
}
//迭代Map中的value
for(let value of nameMap.values()){
    console.log(value);
    
    }
//迭代Map中的key => value
for(let entry of nameMap.entries()){
    console.log(entry[0],entry[1]);
    
    }
    //使用对象解析
    for(let [key,value] of nameMap){
        console.log(key,value);
        
        }
    
 
 
 
 
 

3.条件类型

条件类型的形式看起来有点像JavaScript中的条件表达式.

应用场景:解决函数重载问题

export default {}
 
// 三元运算符
// let f = 60
// let j =""
// j=f>=60?"及格":"不及格"
// console.log(j)
 
 
interface IName{
    name:string
}
interface IAge{
    age:number
}
 
// 条件类型
type Condition<T>=T extends string?IName:IAge
function reload<T extends string|number>(idOrname:T):Condition<T>{
    throw ""
}
reload("赵丽颖")
reload(18)

4.映射类型

当你不想重复定义类型,一个类型可以以另一个类型为基础创建新类型。通俗的说就是,以一个类型为基础,根据它推断出新的类型

export default {}
 
// Record映射类型
// 他会将一个类型的所有属性值都映射到另一个类型上并创造一个新的类型
type Name="person"|"animal"
type Person={
    name:string
    age:number
}
 
type NewType=Record<Name,Person>
let res:NewType={
    person:{
        name:"富兰克林",
        age:18
    },
    animal:{
        name:"小查",
        age:3
    }
}
console.log(res)
 
 
// Pick映射类型
// 将原有类型中的部分内容映射到新类型中
interface IPerson{
    name:string
    age:number
}
type MyType=Pick<IPerson,"name">
let res2:MyType={
    name:"崔弗"
}
console.log(res2)

5.装饰器

装饰器的定义

装饰器是一种特殊类型的声明,它能够被附加到类,方法,访问器,属性或参数上。用@添加

装饰器本质上还是一个函数,在别的语言中已广泛使用,如: python,但在TS中依旧为一个测试中的版本,若要启用实验性的装饰器特性,你必须在命令行或tsconfig.json 里启用experimenta1Decorators编译器选项:;

  • 添加到类上,类装饰器
  • 添加到方法上,方法装饰器
  • 添加到访问器上,访问器装饰器
  • 添加到属性上,属性装饰器
  • 添加到参数上,参数装饰器

先定义一个函数,然后这个函教有一个参数,就是要装饰的目标,装饰的作用不同,这个target代表的东西也不同。定义了这个函数之后,它就可以作为装饰器,使用@函数名的形式,写在要装饰的内容前面。

  • 类装饰器就在类声明之前被声明
  • 类装饰器被应用于类的构造函数,可以用来观察、修改或替换类定义
  • 类装饰器不能用在声明文件中( .d.ts),也不能用在任何外部上下文中(比如declare的类)·类装饰器表达式会在运行时当作函数被调用,类的构造函数作为其唯一的参数
  • 如果类装饰返回一个值,它会使用提供的构造函数来替换类的声明。
    export default{}
    //定义装饰器
    // function testDecorator(constructor:any) {
    //     constructor.prototype.unme="郭旭"
    //     constructor.prototype.show=()=>{
    //         console.log(`我是${ constructor.prototype.unme}`);
            
    //     }
    // }
    
    function testDecorator(flag:boolean) {
            if (flag) {
                return function (constructor:any){
                    constructor.prototype.unme="扎克拉文"
                         constructor.prototype.show=():void=>{
                             console.log(`我是${ constructor.prototype.unme}`);
                            
                         }
                }
            } else {
                return function(constructor:any){
                    constructor.prototype.show=():void=>{
                        console.log("Zach LaVine");
                       
                   }
                }
            
                     
            }
         }
    @testDecorator(false)
    class Person{
    
    }
    
    let p = new Person();
    (p as any).show();
    

    7.混入Mixins

介绍:除了传统的面向对象继承方式,还流行一种通过可重用组件创建类的方式,就是联合另一个简单类的代码。你可能在Scala等语言里对mixins及其特性已经很熟悉了,但它在JavaScript中也是很流行的。

作用:解决TS中继承一次只能继承-个类的问题

注意点:类的混入不能混入属性名

import Test = require('./muduleTest');
​
class Person implements Test.IPerson{
    name="刘亦菲"
    age=19
    sex = "女"
    show(){
        console.log(`我是${this.name},年龄${this.age}`);
        
    }
}
let p = new Person();
console.log(p);
p.show()
​
import{obj} from './muduleTest'
console.log(obj);
​
 
​
​

8.TS模块

TypeScript 模块的设计理念是可以更换的组织代码。

模块是在其自身的作用域里执行,并不是在全局作用域,这意味着定义在模块里面的变量、函数和类等在模块外部是不可见的,除非明确地使用 export 导出它们。类似地,我们必须通过 import 导入其他模块导出的变量、函数、类等。

两个模块之间的关系是通过在文件级别上使用 import 和 export 建立的。

模块使用模块加载器去导入其它的模块。 在运行时,模块加载器的作用是在执行此模块代码前去查找并执行这个模块的所有依赖。 大家最熟知的JavaScript模块加载器是服务于 Node.js 的 CommonJS 和服务于 Web 应用的 Require.js。

此外还有有 SystemJs 和 Webpack。
引入的

export interface Iperson{
    name:string;
    age:number;
    sex:string;
    show():void;
}

export const obj = {
    name:"虢胥"
}
import Test=require('./moduleTest');

class Person implements Test.Iperson{
    name= "郭旭";
    age=22
    sex="🚹"
    show(){
        console.log(`我是${this.name},年龄:${this.age}`)
    }
}
let p =new Person();
console.log(p);
p.show();

import {obj} from './moduleTest';
console.log(obj);

9.命名空间


项目开发过程中,我们会发现我们的命名是有严格规范的,我们不能随意的去起名字,但若是都采用尽量标准化的方式去命名,我们又无法避免的会造成污染,Typescript提供了namespace 避免这个问题出现

在TS1.5之前被叫做内部模块,主要用于组织代码。避免命名冲突

本质就是定义一个大对象,把变量/方法/类/接口...的都放里面

通过 export导出

通过namespace定义

引入的

export namespace D{
    export const d =1000;
}
namespace A {
    export const a=100
}

console.log(A.a);
//嵌套命名空间
namespace B{
    export const b=1000
    export namespace C{
        export const c=2000
    }
}

console.log(B.b);
console.log(B.C.c);

//简化命名空间
import c =B.C.c
console.log(c);

//从其他文件引入命名空间
import {D} from "./namespaceTest";
console.log(D.d);




 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值