nicenote/docs/fea/ts/index.md

nav	group
title path 前端 /fea	title order path TypeScript 3 /ts

TypeScript

简介

为了弥补 JavaScript 的缺点，将 js 从弱类型的语言优化为强类型的语言，让代码类型定义更加严谨，方便后期大型多人项目的维护，减低成本。

基础

类型断言

interface Cat {
  eat: void;
  name: string;
}

interface Dog {
  name: string;
  speak: void;
}

function isDog(animal: Dog | Cat) {
  if (typeof (animal as Dog).speak === 'function') {
    return true;
  }
  return false;
}

声明文件

如果是 ts 文件之间的相互引用，一般是使用三斜线的形式：

/// <reference path="nicecode" /> == import nicecode.xxx

/// <reference types="nicecode" /> == import nicecode from "nicecode"

语法索引

1. declare var 声明全局变量
2. declare function 声明全局方法
3. declare class 声明全局类
4. declare enum 声明全局枚举类型
5. declare namespace 声明（含有子属性的）全局对象
6. interface 和 type 声明全局类型
7. export 导出变量
8. export namespace 导出对象
9. export as namespace UMD 库声明全局变量
10. declare global 扩展全局变量
11. declare module 扩展模块

进阶

泛型

泛型约束

// 案例1
interface LengthWise {
  length: number;
}

function loggingIdentity<T extends LengthWise>(arg: T): T {
  console.log(arg.length);
  return arg;
}

// 案例2
function copyFields<T extends U, U>(target: T, source: U): T {
  for (let id in source) {
    target[id] = (<T>source)[id];
  }
  return target;
}

let x = { a: 1, b: 2, c: 3, d: 4 };

copyFields(x, { b: 10, d: 20 });

泛型接口

interface CreateArrayFunc {
  <T>(length: number, value: T): Array<T>;
}

let createArray: CreateArrayFunc;
createArray = function <T>(length: number, value: T): Array<T> {
  let result: T[] = [];

  for (let i = 0; i < length; i++) {
    result[i] = value;
  }
  return result;
};

createArray<string>(3, 'x'); // -> ['x', 'x', 'x']

泛型类

class GenericNumber<T> {
  ZeroValue: T;
  add: (x: T, y: T) => T;
}

let myGenericNumber = new GenericNumber<number>();
myGenericNumber.zeroValue = 0;
myGenericNumber.add = function (x: number, y: number) {
  return x + y;
};

类与接口

类实现接口

interface Alarm {
  alert(): void;
}

interface Light {
  lightOn(): void;
  lightOff(): void;
}

// 写法一
class Car extends Door implements Alarm {
  alert() {
    console.log('SecurityDoor alert');
  }
}

// 写法二、
// 一个类多个接口
class Car implements Alarm, Light {
  alert() {
    console.log('Car alert');
  }
  lightOn() {
    console.log('Car lightOn');
  }
  lightOff() {
    console.log('Car lightOff');
  }
}

参考资料

1. Type Search
2. quick Type：自动生成 Type
3. ts playground: 线上编写测试代码