typescript 数据类型、函数返回值、类型断言、联合类型、类型兼容

╰半夏微凉° 2021-07-24 16:55 659阅读 0赞 
  1. null和undefined类型:
  2.     是所有类型的子类型,即可以将任意类型赋值为二者
  4. any类型:
  5.     可以赋值任何类型
  7. unknown类型:
  8.     引入的顶级类型unknown,对照于any,unknown是类型安全的,任何值都可以赋给unknown
  9.         (1)赋值给其他类型:当没有类型断言或基于控制流的类型细化时unknown不可以赋值给其它类型,除了它自己和any外。
  10.             let v:unknown;
  11.             let s:string=v;    报错
  12.         (2)操作unknown类型:在unknown没有被断言或细化到一个确切类型之前，是不允许在其上进行任何操作的。
  13.             除了:==/===/!==操作
  14.         (3)unknown与其他类型的交叉类型都是其他类型
  15.             除了any
  16.         (4)unknown与其他类型的联合类型都是unknown
  17.             除了any
  18.         (5)never是unkonw的子类型
  19.             keyof unkonw的结果是never
  20.         (6)类型映射中keyof的是unknown类型,则不会映射任何类型
  21.             type aaa<T> = {
  22.               [P in keyof T]:T[P]
  23.             }
  24.             type g=aaa<unknown>    结果:type g = {}
  26. object类型:
  27.     除了number等基础类型以外的类型(String等也属于object类型),Object类型才包括所有类型
  29. 基本变量类型
  30.     let 变量名:类型
  32. HTMLElement:
  33.     单个dom元素类型
  35. NodeList:
  36.     dom列表类型,如document.querySelectorAll返回的dom集合
  38. event事件类型:
  39.     event:MouseEvent
  41. 文档碎片类型:
  42.     const fragment: DocumentFragment = document.createDocumentFragment()
  46. never类型
  47.     用作返回值:
  48.         function xx():never{
  49.             never表示函数无法执行完成
  50.             如:
  51.                 throw new Error();
  52.                 或while(true){...}
  53.         }
  54.     用作参数:
  55.         传入约定之外(不可得到的类型)的类型
  56.             function xx(x:never):never{throw new Error()};
  57.             function yy(p:string){
  58.                 xx(p);
  59.             }
  60.             yy([1,2,3])
  61. 枚举类型(定义后不能修改)
  62.     enum x {XX1,XX2=num,...}
  63.     (1)未设置值,x.XX1=0,后面值增序排列,若值是表达式,则后面的枚举成员必须设置初始值
  64.     (2)若设置值,则设置了值的后面未设置值的数据按照设置值增序排列
  65.     (3)反向映射:x[num]为对应的XX,若设置了值,x[值]为对应的XX
  66.     (4)枚举类型可以数字和字符串组合,字符串枚举之后必须赋值
  67.         enum x {
  68.             a:1,        编译阶段运行
  69.             b:'aa',
  70.             c:'cc'.length,    执行阶段运行
  71.         }
  72.     (5)当枚举成员未赋初值或初值为字符串或数值,则枚举成员成为一种类型约束,即约束变量只能为其枚举类型
  73.         枚举成员为number类型,可以赋值number类型,不同枚举成员不能赋值即使是相同类型
  74.         枚举成员为字符串类型,只能赋值枚举成员,不能赋值字符串
  75.         enum ShapeKind {
  76.             Circle,
  77.             Square,
  78.         }
  80.         interface Circle {
  81.             kind: ShapeKind.Circle;
  82.             radius: number;
  83.         }
  85.         interface Square {
  86.             kind: ShapeKind.Square;
  87.             sideLength: number;
  88.         }
  90.         let c: Circle = {
  91.             kind: ShapeKind.Square,    错误,类型为ShapeKind.Circle
  92.         }
  93.     (6)常量枚举,编译阶段被删除(直接替换成对应的值,删除生成的对象),避免在额外生成的代码上的开销和额外的非直接的对枚举成员的访问
  94.         const enum x{...}
  95.     (7)枚举联合类型
  96.         enum x{...}
  97.         let y:x=只能是枚举成员
  100. 联合类型
  101.     let 变量名:类型1|类型2
  102.         使用的方法/属性必须是两种类型共有的
  104. 类型断言(绕过类型检查,如可添加约束类型外的参数等,类似强制转换,但只在编译时期)
  105.     用来指定一个值的类型,使得一个多种类型的变量能使用各自类型的特有方法/属性
  106.     方式一:
  107.         （<类型>变量名）
  108.         （<类型1|类型2>变量名）
  110.     方式二:
  111.         (xx as 类型)        每个相同变量前都需要添加
  112.         当as之后的类型为对象时,前面的类型必须包含有后面类型的属性,或者as any
  113.     方式三:
  114.         if( 'xx属性' in 对象/类){...}
  116.     方式四:
  117.         if(typeof 变量==='类型'){...}    只能判断string、number、boolean、symbol类型
  119.     方式五:
  120.         if(变量  instanceof 类){...}
  122.     方式六(类型谓词):
  123.      创建一个函数,使用类型谓词 parameterName is Type这种形式,parameterName必须是来自于当前函数签名里的一个参数名。
  124.         function isJava(lang: Java | JavaScript): lang is Java { 必须是类型谓语,不能是boolean返回值,因为类型谓语发生在编译时,会有类型断言效果,返回boolean发生在运行时,无类型断言效果,分支语句会报错
  125.           return (<Java>lang).helloJava !== undefined;
  126.           ...
  127.           返回的只要是能判断类型的布尔值
  128.           如:return typeof lang==='string'
  129.         }
  130.      代码示例:
  131.         enum Type { Strong,Week }
  132.         class Java {
  133.           helloJava(){
  134.             console.log(" Hello Java ")
  135.           }
  137.           java: any 
  138.         }
  139.         class JavaScript {
  140.           helloJavaScript() {
  141.             console.log('Hello Javascript')
  142.           }
  143.           javascript: any
  144.         }
  145.         function isJava(lang: Java | JavaScript): lang is Java { 
  146.           return (<Java>lang).helloJava !== undefined;
  147.         }
  149.         function getLanguage(type: Type, x: string | number){
  150.           let lang = type === Type.Strong ? new Java() : new JavaScript()
  152.           if (isJava(lang)) {
  153.               lang.helloJava()
  154.           } else {
  155.             lang.helloJavaScript()
  156.           }
  157.         }
  160.     方式七:赋值类型断言("strictNullChecks": false未开启的情况下)
  161.         假定不会出现null和undefined,则变量!的方式使用
  162.             变量!从变量的类型里去除了 null和 undefined
  164.     方式八:可辨识联合类型
  165.         满足两个条件:
  166.             (1)每个类型具有唯一的单例属性,如字符串字面量、数字或symbol值
  167.             (2)使用类型别名将这些类型联合起来
  168.             (3)若要使用完整性检查,即每个类型对应的分支都要写出来
  169.                 方式一:开启strict或strictNullChecks,为函数指定返回值
  170.                 方式二:定义捕捉函数,放到分支最后
  171.                     function  error(params:never):never {    当进入到最后一个分支,会因为参数类型和never不匹配报错
  172.                       throw new Error('缺少分支');
  173.                     }
  174.             例子:
  175.                 interface a{
  176.                   king: 1,
  177.                   size:number
  178.                 }
  179.                 interface b{
  180.                   king: 2,
  181.                   height: number,
  182.                   width: number;
  183.                 }
  184.                 interface c{
  185.                   king: 'c';
  186.                   radius: number;
  187.                 }
  189.                 type d = a | b | c;
  191.                 function t(s: d):number {
  192.                   if (s.king == 1) {    也可以换成switch
  193.                     return s.size;
  194.                   } else if (s.king == 2) {
  195.                     return s.height
  196.                   } else {
  197.                     return s.radius
  198.                   }
  199.                 }
  200. 类型兼容
  201.     对象:
  202.         当检查类型时,只会检查是否满足必要属性,多余属性不检查
  203.         interface Named {
  204.             name: string;
  205.         }
  206.         let x: Named;
  207.         let y = { name: 'Alice', location: 'Seattle' };
  208.         x = y;    可以赋值,函数参数同理
  210.     函数:
  211.       参数列表不同:
  212.             要查看x是否能赋值给y,首先看它们的参数列表.x的每个参数必须能在y里找到对应类型的参数.注意的是参数的名字相同与否无所谓,只看它们的类型.这里,x的每个参数在y中都能找到对应的参数，所以允许赋值。
  213.             let x = (a: number) => 0;
  214.             let y = (b: number, s: string) => 0;
  216.             y = x; // OK
  217.             x = y; // Error
  219.       返回值不同:
  220.               类型系统强制源函数的返回值类型必须是目标函数返回值类型的子类型。
  221.               let x = () => ({name: 'Alice'});
  222.             let y = () => ({name: 'Alice', location: 'Seattle'});
  224.             x = y; // OK
  225.             y = x; // Error, because x() lacks a location property
  227.       可选参数、固定参数和不定参数两两兼容(在参数类型和返回结果相同情况下)
  229.       函数重载:
  230.              function a(num:string):string   1
  231.              function a(num:number):number 2
  232.              function a(num:any):any{
  233.                  return num;
  234.              }
  236.              let x=a; x的类型为{1,2},再次赋值的函数重载函数必须也具有1、2类型
  238.       枚举:
  239.         枚举类型与数字类型兼容,并且数字类型与枚举类型兼容。不同枚举类型之间是不兼容的。比如
  240.         enum Status { Ready, Waiting };
  241.         enum Color { Red, Blue, Green };
  243.         let status = Status.Ready;
  244.         status = Color.Green;  // Error
  246.       类
  247.         类有静态部分和实例部分的类型,比较两个类类型的对象时,只有实例的成员(属性和方法)会被比较(比较类型而非结果)。
  248.         如果目标类型包含一个private/protected成员, 这允许子类赋值给父类,但是不能赋值给其它有同样类型的类。
  249.         class Animal {
  250.             feet: number;
  251.             constructor(name: string, numFeet: number) { }
  252.         }
  254.         class Size {
  255.           feet: number;
  256.           constructor(numFeet: number, s: number) { }    构造器参数写成private x:类型,则不兼容
  257.           static num:any;
  258.         }
  260.         let a: Animal;
  261.         let s: Size;
  262.         a = s;  // OK
  263.         s = a;  // OK
  265.     泛型:
  266.         泛型类型对结果无影响时兼容
  267.         interface Empty<T> {
  268.         }
  269.         let x: Empty<number>;
  270.         let y: Empty<string>;
  272.         x = y;  // OK, because y matches structure of x
  274.         interface NotEmpty<T> {
  275.             data: T;
  276.         }
  277.         let x: NotEmpty<number>;
  278.         let y: NotEmpty<string>;
  280.         x = y;  // Error, because x and y are not compatible
  281.         没指定泛型类型时兼容
  282.         let identity = function<T>(x: T): T {
  283.             // ...
  284.         }
  286.         let reverse = function<U>(y: U): U {
  287.             // ...
  288.         }
  290.         identity = reverse;  // OK, because (x: any) => any matches (y: any) => any
  292. 内置对象
  293.     let b:Boolean=new Boolean(1)
  295. Bom和Dom类型
  296.     HTMLElement
  297.     NodeList
  298.     父类型:event  子类型MouseEvent
  300. 函数返回值
  301.     function xx():类型{
  302.         void无返回值
  303.         ...
  304.     }
  306. 类型推论:
  307.     未声明类型变量且未赋值可以变成任意类型,相当于any
  308.         let me;
  310.     未声明类型变量赋了值,只能使用值的类型
  311.         let me='123'
  313. 数组类型:
  315.     let arr=[1,2,3];  任意类型值
  317.     let arr2:类型[]=[...];         let arr2:类型1[]|类型2[]=[...];  let arr2:(类型1|类型2)[]=[...];
  319.     let arr3:Array<类型>=[...];   let arr3:Array<类型1|类型2>=[...];
  321.     let arr4:ReadonlyArray<类型>=[...];    只读数组
  323. 元组:
  324.     多种类型元素的数组
  325.     let arr:[类型1,类型2]=[元素,...]    值和类型以及类型的数量必须对应
  327. 接口定义数组
  328.     interface arr4{
  329.         [index:number]:类型;   索引为数值,值为指定数值的数组
  330.     }
  331.     let arr5:arr4=[1,2,3];
  333. 解构赋值
  334.     const b={id:1,name2:true};
  336.     const {id:number,name2:string}=b;    
  337.     const {id:i,name2:n}:typeof b=b;        i、n对结果无影响

在这里插入图片描述在这里插入图片描述在这里插入图片描述

  1. ![在这里插入图片描述](https://img-blog.csdnimg.cn/20210225153043707.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NDU2MA==,size_16,color_FFFFFF,t_70)

在这里插入图片描述

代码示例:

  1. let flag:boolean=true;
  2. let bool:boolean=Boolean(1); //也会创建布尔变量,如果使用new Boolean()将会报错,此时为布尔对象
  4. let num:number=1;
  5. let nnum:number=NaN; //NaN也是number数值类型
  6. let nnnnum:number=Infinity;  //无限大数值类型
  8. let uname:string='jeff';
  10. //函数返回值
  11. function hello():void{ 
  12.     console.log('hello')
  13. }
  15. let kong:void=undefined; //undefined和null为空值
  16. let kong2:void=null;
  18. let un:undefined=undefined; //undefined和null可以互相切换，他们是一切类型的子类型
  19. let nn:null=null;
  21. //任意值类型
  22. let me:any='abc';
  23. me=123;
  25. //未声明类型且未赋值,会被默认为任意值类型
  26. let mm;
  27. mm=12;
  28. mm='哈哈';
  30. //未声明类型但赋了值,会被认为是值的类型,不能改变成其他类型
  31. let aa='123';
  33. //联合类型
  34. let cat:string|number;
  35. cat='me';
  36. cat=1;
  38. //断言
  39. function f(x:number|string){ 
  40.     if((<string>x).length)
  41.     { 
  42.        return (<string>x).length 
  43.     }
  44. }
  45. //数组
  46. let arr=[1,2,3];
  48. let arr2:number[]=[1,2,3];
  50. let arr3:Array<number>=[1,2,3];
  52. interface arr4{ 
  53.     [index:number]:number;  //索引为数值,值为数值的数组
  54. }
  55. let arr5:arr4=[1,2,3];

发表评论

表情：
评论列表 （有 0 条评论，659人围观）

还没有评论，来说两句吧...

相关阅读

    相关 typescript类型断言

    作用： 通过类型断言这种方式可以告诉编译器，“相信我，我知道自己在干什么”，你会比 TypeScript 更了解某个值的详细信息，你清楚的知道一个实体具有比它现有类型更确

    女爷i女爷i/ 0 赞/ 361 阅读