使用方式

.mpx中编写ts

.mpx文件中script标签声明lang为ts，在编译时会自动这部分script中的内容进行ts类型检查

<script lang="ts">
// 内联编写ts代码
</script>

由于大部分IDE对ts的语法提示支持都只对.ts和.d.ts文件生效，上述在.mpx文件中编写ts代码虽然能在编译时进行ts类型检查，但是无法享受IDE中编写ts时的代码提示和实时报错等优秀体验，所以，我们更建议大家创建一个.ts文件进行ts代码编写，通过src的方式引入到.mpx当中

<script lang="ts" src="./index.ts"></script>

为.ts文件添加loader

在webpack配置中添加如下rules以配置ts-loader

{
  test: /\.ts$/,
  use: [
    'babel-loader',
    'ts-loader'
  ]
}

编写tsconfig.json文件

对相关配置不熟悉的同学可以直接采用下面配置，能够最大限度发挥mpx中强大的ts类型推导能力

{
  "compilerOptions": {
    "target": "es6",
    "allowJs": true,
    "noImplicitThis": true,
    "noImplicitAny": true,
    "strictNullChecks": true,
    "moduleResolution": "node",
    "lib": [
      "dom",
      "es6",
      "dom.iterable"
    ]
  }
}

增强类型

如果需要增加 Mpx 的属性和选项，可以自定义声明 TypeScript 补充现有的类型。

例如，首先创建一个 types.d.ts 文件

// types.d.ts
import { Mpx } from '@mpxjs/core'
declare module '@mpxjs/core' {
  // 声明为 Mpx 补充的属性
  interface Mpx {
    $myProperty: string
  }
}

之后在任意文件只需引用一次 types.d.ts 声明文件即可，例如在 app.mpx 中引用

// app.mpx
/// <reference path="./types.d.ts" />
import mpx from '@mpxjs/core'
mpx.$myProperty = 'my-property'