typescript 编译问题，还是哪个地方断层了？

Question

问题内容

使用create-react-app创建ts项目，然后修改app.tsx代码如下，使用node起一个服务，然后设置返回数据为

{
success: true,
message: '',
code:0，
data: {
    a: 1, 
    b: '2'
}}

相关代码

import React from 'react';
import logo from './logo.svg';
import './App.css';

interface IContent {
  a: number;
  b: number;
}

interface IData {
  success: boolean,
  message: string,
  code: number,
  data: IContent
}

const App: React.FC = () => {
  let data: IData = {
    success: true,
    message: '',
    code: 2,
    data: {
      a: 1,
      b: 2
    }
  };

  fetch('http://localhost:3002/app/login').then((res) => {
    return res.json()
  }).then((myJson) => {
    data = myJson;

  });

  return (
    <div>{data.data.a}</div>
  );
};

export default App;

期望结果

后台返回数据 与前端定义的接口data下面的b类型不同，webstorm不提示，编译也未报错，是啥原因呀

Answer 1

1: typescript的类型是编译时检查，编译器【不可能】知道一个运行时出现的东西是什么类型
2: tsconfig里没开严格模式且没有引入lib.dom。所以当你的形参myJson没有声明类型的时候其类型隐式any。any当然可以适合你的任何类型声明了
3: 若你开启了严格模式且引入了lib.dom。fetch的函数签名告诉编译器其返回应该是Promise<any>。所以myJson还是any

综上所述，你应该给myJson标记一个类型。且放弃你直接利用ts做运行时校验的念头