tsconfig.json

tsconfig.json 配置文件会有如下结构：

{
  "compilerOptions": {
    "jsx": "react-jsx",//允许react不用在不适用React任何方法的情况下，不主动引入（以前的版本需要createmtnent去转换所以即使不用也得引入）
    "allowJs": true,//允许编译js文件,老项目js迁移可用
  },
  "files": [
    "app.ts",
    "foo.ts",
  ]
}

在老版本React 16及更早版本

// 在文件顶部引入React
import React from 'react';

function MyComponent() {
  return <div>Hello, world!</div>;
}

编译选项配置compilerOptions

"baseUrl": "./", // 解析非相对模块的基地址，默认是当前目录

修改为====>

"baseUrl": "./src"

+ 项目
    + xxx
    + src
        - enrty.tsx
        | 
        - utils
            - model 
                - index.tsx
        |
        - app.tsx
    + tsconfig.json

那么在/utils/model/index.tsx中使用,可以直接如下写法

// 配置了baseurl，就不需要这么繁琐的去写路径
//import {xxx} from '../../entry'
import {xxx} from 'entry'

tsconfig files include、exclude

如果只需要定向编译某些文件，那么亏通过files属性进行配置。

{
  "files":[
    './path/to/file.ts'
  ]
}

files不足以满足复杂的路径匹配诉求，所以ts还提供了include和exclude属性。

{
  "include": [
    "./src/**/*.ts"
  ],
  "exclude": [
    "node_modules"// 排除node_modules
  ]
}

当项目的ts配置具备多层关系，开发人员可通过extends属性来继承上级的ts配置。

{
  "extends": "./tsconfig.base.json"
}