tsc --init

// 定义 Person 类
class Person {
  // 类属性
  type: string;
  // 类私有属性
  protected name: string;
  private age: number;

  // getter
  get personName() {
    return "person" + this.name;
  }

  // setter
  set personName(v: string) {
    this.name = "set person" + v;
  }

  get personAge() {
    return this.age;
  }

  // 类构建方法
  constructor(n: string, a: number) {
    this.type = "人类";
    this.name = n;
    this.age = a;
  }

  // 类方法
  greet() {
    console.log("你好");
  }
}

// 使用关键词 extends 定义 Fronter 类继承 Person 类
class Fronter extends Person {
  constructor(n: string, a: number) {
    super(n, a); // 继承类需要调用父类构建方法
    this.type = "前端人类";
  }

  greetWithInfo() {
    // private 与 protected 关键字同样是将属性设置为私有属性
    const age = this.age; // 无法访问，private 修饰的属性只有 Person 类本身可以访问，
    const name = this.name; // 可以访问，protected 设置的属性除了类本身外，继承类中也能访问
    console.log(`你好，我叫${name}，我的年龄是${age}。`);
  }
}

const person = new Fronter("前端人类", 99);

console.log("person.type: ", person.type); // 人类
console.log("person.name: ", person.name); // 私有属性，class 外部无法直接访问
console.log("person.personName: ", person.personName); // 通过 getter 获取想要的私有属性
person.personName = "前端人类plus"; // 通过 setter 设置属性

// 通过 <> 符号进行转换
const input = <HTMLInputElement>document.querySelector('#input');
// 第二种方法，通过 as 关键字进行转换
const canvas = document.querySelector('#canvas') as HTMLCanvasElement;

const mockRes: {data: {name: string} | null} = {
  data: {
    name: '前端人'
  }
}

// TS 代码
const data = mockRes.data?.name

// 编译后的 JS
// const data = (_a = mockRes.data) === null || _a === void 0 ? void 0 : _a.name;

// 函数使用泛型
function cosplay<T>(x: T) {
  return x;
}

cosplay("你好").trim(); // 正常
cosplay(3).trim(); // 报错，number 类型没有 .trim() 方法

// 如果不使用泛型，只能使用联合类型
function cosplay1(x: string | number) {
  return x;
}

// 联合类型使用时不免不够灵活
cosplay1("你好").trim(); // 报错，虽然我们知道可以这样使用，但是编译器不知道
(cosplay1("你好") as string).trim(); // 需要强制类型转换才能调用
cosplay1(3).trim(); // 依然报错

// 或者干脆使用 any，放弃类型检查
function cosplay2(x: any) {
  return x;
}

cosplay2("你好").trim(); // 正常使用
cosplay2(3).trim(); // 可以通过编译，但是运行时报错，更不好。

// 在上面的例子中，通过 extends 关键字，将 T 的类型限制为 string
function cosplay<T extends string>(x: T) {
  return x;
}

cosplay("你好").trim(); // 正常
cosplay(3); // 错误，不需要调用 .trim() 方法，cosplay 函数传入非 string 类型参数时直接可以检查出错误。

{
    "compilerOptions": {
        "experimentalDecorators": true
    }
}

function Logger(constructor: Function) {
  console.log("Logger ");
//   console.log(constructor);
}

@Logger
class ExampleClass {

}

Logger 

function LoggerFactory(logDesc: string) {
  console.log("LoggerFactory");
  return function Logger(constructor: Function) {
    console.log(logDesc);
    // console.log(constructor);
  };
}

@LoggerFactory("mm")
class ExampleClass {}

LoggerFactory
mm

function a(constructor: Function) {
  console.log("a ");
}

function b(constructor: Function) {
  console.log("b ");
}

function c(constructor: Function) {
  console.log("c ");
}

@c
@b
@a
class ExampleClass {}

a 
b 
c 

// module.export.ts
export const name = "mm";

export const profession = "front-end-human";

export default {
  name,
  profession,
};


// module.import.ts
// ES 模块有三种导入方法
import * as person from "./module.export.js";
import { profession as pf } from "./module.export.js";
import info from "./module.export.js";	// 需要配合 export default 使用

console.log(person.name);
console.log(pf);
console.log(info.name);

mm
front-end-human
mm

const path = require("path");

module.exports = {
  mode: "development",
  // 使得本地可以断点调试
  devtool: "inline-source-map",
  // webpack-dev-server 配置
  devServer: {
    static: "./dist",
  },
  // 项目的入口文件
  entry: "./src/index.ts",
  // 打包出的文件配置
  output: {
    filename: "[name].bundle.js",
    path: path.resolve(__dirname, "dist"),
  },
  resolve: {
    // 使得 import 语句中可以省略配置的后缀名
    extensions: [".ts", ".tsx", ".js"],
  },
  // module 每一条规则，可以理解为一种文件类型
  module: {
    rules: [
      // `.ts` 或 `.tsx` 后缀文件使用 ts-loader 进行处理
      { test: /\.tsx?$/, loader: "ts-loader" },
    ],
  },
};

npm install --save @types/lodash