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];
  }