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