规范相关

题外话，今天突然意识到文章英文标题好像有点怪…ts-study，当时为啥不写成ts-learning呢，明显感觉后者读起来更爽口啊😂️

资料

• 入坑篇 1（前置操作）
• 自定义 tslint & eslint 详细规则
• 官方语法基础
• Typescript Guidelines
• TypeScript Handbook（中文版）
• 深入理解 TypeScript
• awesome-typescript

编码相关

由于官方及其他资料在这方面非常详细了，本文不作基础内容的赘述。这里假定读者已经学习了基础的语法，如基础类型、变量声明等……

1. 新建ts文件

可以选择在项目的根目录建立src目录，然后新建index.ts文件

type CallBack = (value?: string) => void;

interface Config {
  name: string;
  age: number;
  todo?: CallBack;
}

export default class Person {
  init: Config;

  constructor(init?: Config) {
    if (init) {
      this.init = init;
      this.init.todo =
        init.todo ||
        ((value?: string) => {
          console.log(value || "This person have been created...But nothing todo");
        });
    }
  }

  public todoSomething() {
    // this.init.todo();
    this.init.todo("Hello World. Welcome to learn TypeScript");
  }
}

2. 配置编译选项tsc、文档生成、头文件等

"scripts": {
    "tsc": "tsc",
    "dev": "npm run tsc -w",
    "types": "tsc -d --emitDeclarationOnly --allowJs false --declarationDir ./@types",
    "build": "build options...",
    "prepush": "npm run tsc && npm run types",
    "prepublish": "npm run prepush && npm run build",
    "typingsdoc": "npx typedoc --out ./typings/doc  ./src/**/*.ts  --module umd"
}

其中这块的配置，在part1提到过，包括同时生成头文件并允许 js 文件输入

这里把新增加的，简要说明下：

• dev: 监听.ts 文件改动，实时编译。即增加-w参数可避免手动编译
• prepush: 合并了两个命令，并且git push时，会被触发。以此可强制推送前编译最新代码
• prepublish: 同样合并两个命令，在即将发布上线时使用
• typingsdoc: 生成 Api 文档。关于这个，不清楚的读者请看这篇文章：Typedoc 使用笔记

3. tslint 及 tsconfig

// tslint.json
{
  "defaultSeverity": "error",
  "extends": [
    "tslint:recommended",
    "tslint-config-prettier"
  ],
  "rules": {
    "encoding": true,
    "no-console": false,
    "object-literal-sort-keys": false,
    "interface-name": [true, "never-prefix"],
    "no-unused-expression": [true, "allow-fast-null-checks"],
    "only-arrow-functions": false,
    "no-duplicate-imports": true,
    "no-mergeable-namespace": true,
    "import-spacing": true,
    "interface-over-type-literal": true,
    "new-parens": true,
    "no-shadowed-variable": [
      true,
      {
        "class": true,
        "enum": true,
        "function": true,
        "interface": false,
        "namespace": true,
        "typeAlias": false,
        "typeParameter": false
      }
    ],
    "variable-name": false
  }
}

// tsconfig.json
{
  "compilerOptions": {
    "charset": "utf8",
    "sourceMap": true,
    "allowSyntheticDefaultImports": true,
    "target": "es5",
    "moduleResolution": "node",
    "module": "umd",
    "outDir": "./built",
    "experimentalDecorators": true,
    "removeComments": true,
    "preserveConstEnums": true,
    "allowJs": true
  },
  "include": [
    "src/**/*"
  ],
  "exclude": [
    "node_modules",
    "built",
  ]
}

4. 测试编译

执行npm run prepush和npm run typingsdoc后。根目录下，应该多了俩目录：

Api 文档目录

如果遵照第一篇的配置，加过prettier大法。会发现src下的源文件也被美美的调整了代码风格

目前，暂时就这些。后边在整理，总结！！！