TS类型定义示例


普通类型

联合类型

let myFavoriteNumber: string | number;
myFavoriteNumber = 'seven';
myFavoriteNumber = 7;

接口(Interfaces)定义类型

interface Person {
  name:string;
  age:number;
};
let tom:Person={
  name:'Tom',
  age:25
};

可选属性

  • 可选属性的含义是该属性可以不存在,但是仍然不允许添加未定义的属性
    interface Person {
        name: string;
        age?: number;
    };
    let tom: Person = {
        name: 'Tom'
    };

任意属性

  • 使用 [propName: string] 定义了任意属性取 string 类型的值。
  • 一旦定义了任意属性,那么确定属性和可选属性的类型都必须是它的类型的子集
    interface Person {
      name:string;
      age?:number;
      [proppName:string]:any;
    };
    
    let tom:Person ={
      name:'Tom',
      gender:'male'
    };

只读属性

interface Person {
  readonly id: number;
  name: string;
  age?: number;
  [propName: string]: any;
};

let tom: Person = {
  id: 89757,
  name: 'Tom',
  gender: 'male'
};

DOM类型

document.getElementById()

  • document.getElementById 方法的返回类型为 HTMLElement | null 。 如果 DOM 中不存在具有提供的 id 的元素,则该方法返回 null 值。
    const input = document.getElementById('message') as HTMLInputElement | null;
    if (input != null) {
      console.log(input.value);
    }
    
    const box = document.getElementById('box') as HTMLDivElement | null;
    console.log(box?.innerHTML);
    
    const button = document.getElementById('btn') as HTMLButtonElement | null;
    if (button != null) {
      console.log(button.innerText);
    }
    

函数类型

函数表达式

  • 定义入参类型、返回结果类型
    function sum(x: number,y: number): number {
      return x+y;
    }
    
    function reverse(x: number | string): number | string {
      return x;
    }
    

函数表达式

  • 定义入参类型、返回结果类型
    let mySum = function (x: number, y: number): number {
      return x + y;
    };
    
    // 上面的代码只对等号右侧的匿名函数进行了类型定义
    // 等号左边的 mySum,是通过赋值操作进行类型推论而推断出来的
    // 如果需要我们手动给 mySum 添加类型,则应该是这样:
    let mySum: (x: number,y: number) => number=function (x: number, y:number): number{
      return x+y;
    };
    
    // 注意不要混淆了 TypeScript 中的 => 和 ES6 中的 =>
    // 在 TypeScript 的类型定义中,=> 用来表示函数的定义,左边是输入类型,需要用括号括起来,右边是输出类型。

返回类型区别

  • 注意返回结果 number[] 与 [number, number]的区别,number[]:[1,2,3…],[number, number]:[1,2]
    // 自动推断类型为number[]
    function getTuple() {
      return [10, 100];
    }
    // 类型为[number, number]
    function getTuple(): [number, number] {
      return [10, 100];
    }

用接口定义函数

  • 定义入参类型、返回结果类型
    interface SearchFunc {
      (source:string, subString: string): boolean;
    }
    
    let mySearch:SearchFunc;
    mySearch = function (source: string,subString: string) {
      return source.search(subString) !==-1;
    }

剩余参数

  • ES6 中,可以使用 …rest 的方式获取函数中的剩余参数(rest 参数)
    function push(array,...items) {
        items.forEach(function(item) {
            array.push(item);
        });
    }
    
    let a=[];
    push(a,1,2,3);
    // 事实上,items 是一个数组。所以我们可以用数组的类型来定义它。
    // 注意,rest 参数只能是最后一个参数。

函数返回类型为元组(Tuple)类型

  • 数组合并了相同类型的对象,而元组(Tuple)合并了不同类型的对象
    // 命名函数返回元组
    function getTuple(): [number, number] {
      return [5, 10];
    }
    
    // 使用箭头函数返回元组
    const getTuple2 = (): [string, string] => {
      return ['hello', 'world'];
    };
    
    const getTuple3 = (): [string, number] => {
      return ['hello world', 12];
    };
    
    // 使用 type 关键字
    type Numbers = [number, number];
    function getTuple4(): Numbers {
      return [10, 10];
    }

文章作者: Damao
版权声明: 本博客所有文章除特別声明外,均采用 CC BY 4.0 许可协议。转载请注明来源 Damao !
  目录