TypeScript 介绍

TypeScript 是 JavaScript 的一个超集，主要提供了类型系统和对 ES6 的支持，它由 Microsoft 开发

介绍

• TypeScript 推荐教程 xcatliu/typescript-tutorial

语法

for

let someArray = [1, "string", false];
for (let entry of someArray) {
    console.log(entry);  // 1, "string", false
}

let list = [0, 1, 2];
for (let i in list) {
   console.log(i);  // "0", "1", "2",
}

var numbers = [1, 2, 3];
for (var i = 0; i < numbers.length; i++) {
    console.log(numbers[_i]);  // "1", "2", "3"
}

let list = [0, 1, 2];
// list.every((val, idx, array) => {
list.forEach((val, idx, array) => {  // val: 当前值；idx：当前index；array: Array
    ...
});

tsconfig.json

• tsconfig.json 文件指定编译项目所需的根目录下的文件以及编译选项
  • 位于项目的根目录
  • 示例如下，参考

{
  "compilerOptions": {
    "module": "commonjs",
    "noImplicitAny": true,
    "removeComments": true,
    "preserveConstEnums": true,
    "sourceMap": true
  },
  "files": [
    "core.ts",
    "sys.ts",
    ...
  ],
  "include": ["src/**/*"],
  "exclude": ["node_modules", "**/*.spec.ts"],
}

开发

代码检查

• 安装 ESLint

npm install --save-dev eslint typescript @typescript-eslint/parser @typescript-eslint/eslint-plugin

• 配置 .eslintrc.js

module.exports = {
  parser: '@typescript-eslint/parser',
  plugins: ['@typescript-eslint'],
  rules: {
    // 禁止使用 var
    'no-var': "error",
    // 优先使用 interface 而不是 type
    '@typescript-eslint/consistent-type-definitions': [
        "error",
        "interface"
    ]
  }
}

• 配置 package.json

{
  "scripts": {
    // "eslint": "eslint index.ts"
    "eslint": "eslint src --ext .ts"
  }
}

• VSCode 集成 ESLint 检查
  • 安装 ESLint 插件
  • 开启保存时自动修复的功能，修改 vscode settings.json/.vscode/settings.json

{
  "editor.tabSize": 4,

  "editor.codeActionsOnSave": {
    "source.fixAll": "explicit"
  },

  "eslint.validate": [
    "javascript",
    "javascriptreact",
  ],
}

• 使用 Prettier 修复格式错误

npm install --save-dev prettier

配置

// prettier.config.js or .prettierrc.js, .prettierrc 时 json 配置文件，配置项可参考
module.exports = {
    // 一行最多 100 字符
    printWidth: 100,
    // 使用 4 个空格缩进
    tabWidth: 4,
    // 不使用缩进符，而使用空格
    useTabs: false,
    // 行尾需要有分号
    semi: true,
    // 使用单引号
    singleQuote: true,
    // 对象的 key 仅在必要时用引号
    quoteProps: 'as-needed',
    // jsx 不使用单引号，而使用双引号
    jsxSingleQuote: false,
    // 末尾不需要逗号
    trailingComma: 'none',
    // 大括号内的首尾需要空格
    bracketSpacing: true,
    // jsx 标签的反尖括号需要换行
    jsxBracketSameLine: false,
    // 箭头函数，只有一个参数的时候，也需要括号
    arrowParens: 'always',
    // 每个文件格式化的范围是文件的全部内容
    rangeStart: 0,
    rangeEnd: Infinity,
    // 不需要写文件开头的 @prettier
    requirePragma: false,
    // 不需要自动在文件开头插入 @prettier
    insertPragma: false,
    // 使用默认的折行标准
    proseWrap: 'preserve',
    // 根据显示样式决定 html 要不要折行
    htmlWhitespaceSensitivity: 'css',
    // 换行符使用 lf
    endOfLine: 'lf'
};

• 安装 VSCode 中的 Prettier 插件，然后修改 .vscode/settings.json，参考

{
    "editor.defaultFormatter": "esbenp.prettier-vscode",
}

忽略错误

// @ts-ignore
<报错的代码行>

Record 类型

TypeScript 的 Record 类型可以用它来创建具有固定键数的字典

• 遍历
  • Object.keys()
  • Object.values()
  • Object.entries()