typescript入门知识总结

基于JavaScript的语言，对其的扩展，最大变化就如其名字一般，为变量引入了type。ts不能被js解析器直接执行，通过编译成js来执行。
官方文档

types

// 声明一个变量，其类型为number
// 使用|来连接多个类型（联合类型）
let a: number | string
a = 10

let b: string = '123'

// ts可以对变量类型进行自动检测
let helloWorld = "Hello World";
// helloWorld = 123 报错

// 指定a,b为number类型，返回值类型为number
function sum(a: number, b: number): number {
    return a + b
}

sum(123, 456)
// sum(123,'456') /error

ts中的类型：

any可以分配给任何类型的变量，但是unknown除了any之外的变量都不可以直接分配，除非使用断言（as和<>两种写法）。

let someValue: any = "this is a string";
let strLength: number = (<string>someValue).length;

let someValue: any = "this is a string";
let strLength: number = (someValue as string).length;

在属性名后加上？，表示可选属性。

interface PaintOptions {
  shape: Shape;
  xPos?: number;
  yPos?: number;
}

function paintShape(opts: PaintOptions) {
  // ...
}

const shape = getShape();
paintShape({ shape });
paintShape({ shape, xPos: 100 });
paintShape({ shape, yPos: 100 });
paintShape({ shape, xPos: 100, yPos: 100 });

对象类型中的Index Signatures，比如如下例子：

interface StringArray {
  [index: number]: string;
}

const myArray: StringArray = {1: '123', 2:'234'}
const secondItem = myArray[1];

可以表示有任意个属性index(number)，其值为string

箭头函数，如下例子中fn参数就用箭头函数表明

function greeter(fn: (a: string) => void) {
  fn("Hello, World");
}

function printToConsole(s: string) {
  console.log(s);
}

greeter(printToConsole);

数组声明（string[] , Array两种方式）

function doSomething(value: Array<string>) {
  // ...
}

let myArray: string[] = ["hello", "world"];

// either of these work!
doSomething(myArray);
doSomething(new Array("hello", "world"));

tuple元组

type StringNumberPair = [string, number];

此处，type表示类型的别名，表示StringNumberPair类型是一个元组（第一个为字符串，第二个为数字）。

enum枚举，表示一组命名常量的集合。

enum Direction {
  Up = 1,
  Down,
  Left,
  Right,
}

编译选项

添加了tsconfig.json后，通过在目录下直接使用tsc命令编译所有文件，tsc -w监视文件。
配置选项，详细参考官网文档：

1. include，编译的内容

"include": ["src/**/*", "tests/**/*"]
**表示任意目录，*表示任意文件

2. exclude，不需要编译的内容
3. extends，定义被继承的配置文件
4. compileOptions，编译的配置，详情参考初始化后的注释或者官网文档

webpack打包

附上配置文件，该例子中主要用到了ts-loader和babel-loader：

const path = require('path');
const HTMLWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: './src/index.ts',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
    clean: true
  },

  module: {
    rules: [
      {
        test: /\.tsx?$/,
        use: [{
          loader: 'babel-loader',
          options: {
            presets: [['@babel/preset-env', {
              targets: {
                "chrome": "58",
                "ie": "11"
              },
              corejs: "3",
              useBuiltIns: "usage"
            }]],
          }
        }, 'ts-loader'],
        exclude: /node_modules/,
      },
    ],
  },

  plugins: [
    new HTMLWebpackPlugin(),
  ],

  devServer: {
    port: 9000,
  },
  resolve: {
    extensions: ['.tsx', '.ts', '.js'],
  },
}

class

基本用法同JavaScript，部分记录下新增的用法：
readonly只读属性，readonlyname: string = "world";

abstract

抽象类，抽象变量，抽象方法。抽象变量、方法指的是没有实现（由继承的子类来实现），只能存在于抽象类中。
抽象类不能实例化。

abstract class Base {
  abstract getName(): string;

  printName() {
    console.log("Hello, " + this.getName());
  }
}

private, protected, public
get , set函数
更详细参考官方文档

interface

接口是定义对象的另一种方式。

type Point1 = {
  x: number;
  y: number;
}

// 其实与上述声明是等效的
interface Point {
  x: number;
  y: number;
}

function printCoord(pt: Point) {
  console.log("The coordinate's x value is " + pt.x);
  console.log("The coordinate's y value is " + pt.y);
}

printCoord({ x: 100, y: 100 });

同名接口可以重复声明。

一个类可以实现多个接口，比如class C implements A, B

抽象类 vs 接口
抽象类中可以有抽象方法也可以有普通方法，而接口中只能有抽象方法。

泛型（Generics）

当我们需要一个函数，其传入什么，就返回什么（就像echo），可以这样：

function identity(arg: any): any {
  return arg;
}

然而使用any就缺失了返回值的类型，因此可以使用泛型，<>定义了一个泛型Type，其传入参数和返回的类型皆为Type，在参数传入时确定。

function identity<Type>(arg: Type): Type {
  return arg;
}

let output = identity<string>("myString");
let output = identity("myString");

interface Lengthwise {
  length: number;
}

// 注意这里使用extends表示一个泛型实现了一个接口
function loggingIdentity<Type extends Lengthwise>(arg: Type): Type {
  console.log(arg.length); // Now we know it has a .length property, so no more error
  return arg;
}

两种方式调用该函数，可以手动指定泛型，也可以自动推断。
<>内可以指定多个泛型
泛型类（其实作用就是在类型不明确时来表示一个类型）

class GenericNumber<NumType> {
  zeroValue: NumType;
  add: (x: NumType, y: NumType) => NumType;
}

Utility Types

Record<Keys, type>

构造了一个对象，其键值为Keys，对应的属性值为type。

interface CatInfo {
  age: number;
  breed: string;
}

type CatName = "miffy" | "boris" | "mordred";

const cats: Record<CatName, CatInfo> = {
  miffy: { age: 10, breed: "Persian" },
  boris: { age: 5, breed: "Maine Coon" },
  mordred: { age: 16, breed: "British Shorthair" },
};