Reactjs 带有React和Ionic的意外Typescript非空断言运算符

编译器（不是IDE）给出了以下错误，例如未识别非空断言运算符

我可以阻止issuestrictNullChecks=false，但这不是我的本意

Line 31:160:  Parsing error: Unexpected token, expected ","

  29 |         <IonItemDivider>Number type input</IonItemDivider>
  30 |           <IonItem>
> 31 |             <IonInput type="number" value={nationalCode} placeholder="Enter medicament national code" onIonChange={e => setNationalCode(parseInt(e.detail.value!, 10))}></IonInput>
     |                                                                                                                                                                ^
  32 |             <IonButton onClick={() => cimaApi.getMedicamentInfo(nationalCode)}></IonButton>
  33 |           </IonItem>
  34 |       </IonContent>

以及packages.json，其中定义了TS版本

{
  "name": "pill-alarm",
  "version": "0.0.1",
  "private": true,
  "dependencies": {
    "@capacitor/android": "^2.4.7",
    "@capacitor/core": "2.4.7",
    "@ionic-native/barcode-scanner": "^5.32.1",
    "@ionic-native/core": "^5.32.1",
    "@ionic/react": "^5.5.0",
    "@ionic/react-router": "^5.5.0",
    "@testing-library/jest-dom": "^5.11.9",
    "@testing-library/react": "^11.2.5",
    "@testing-library/user-event": "^12.6.3",
    "@types/jest": "^26.0.20",
    "@types/node": "^12.19.15",
    "@types/react": "^16.14.3",
    "@types/react-dom": "^16.9.10",
    "@types/react-router": "^5.1.11",
    "@types/react-router-dom": "^5.1.7",
    "axios": "^0.21.1",
    "ionicons": "^5.4.0",
    "phonegap-plugin-barcodescanner": "^8.1.0",
    "react": "^17.0.1",
    "react-dom": "^17.0.1",
    "react-router": "^5.2.0",
    "react-router-dom": "^5.2.0",
    "react-scripts": "4.0.2",
    "typescript": "^4.2.4",
    "web-vitals": "^0.2.4",
    "workbox-background-sync": "^5.1.4",
    "workbox-broadcast-update": "^5.1.4",
    "workbox-cacheable-response": "^5.1.4",
    "workbox-core": "^5.1.4",
    "workbox-expiration": "^5.1.4",
    "workbox-google-analytics": "^5.1.4",
    "workbox-navigation-preload": "^5.1.4",
    "workbox-precaching": "^5.1.4",
    "workbox-range-requests": "^5.1.4",
    "workbox-routing": "^5.1.4",
    "workbox-strategies": "^5.1.4",
    "workbox-streams": "^5.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "@capacitor/cli": "2.4.7"
  },
  "description": "An Ionic project"
}

我正在使用Typescript 4.2.4和React 17

---

提前感谢

知道React的人可能会解释为什么会发生这种情况。但是，我可以问你为什么要使用

首先有吗？我认为
parseInt
不需要非空参数，那么为什么要断言它呢？如果TS配置中的“strictNullChecks”=true（默认值），这是一个typescript要求。
{
  "name": "pill-alarm",
  "version": "0.0.1",
  "private": true,
  "dependencies": {
    "@capacitor/android": "^2.4.7",
    "@capacitor/core": "2.4.7",
    "@ionic-native/barcode-scanner": "^5.32.1",
    "@ionic-native/core": "^5.32.1",
    "@ionic/react": "^5.5.0",
    "@ionic/react-router": "^5.5.0",
    "@testing-library/jest-dom": "^5.11.9",
    "@testing-library/react": "^11.2.5",
    "@testing-library/user-event": "^12.6.3",
    "@types/jest": "^26.0.20",
    "@types/node": "^12.19.15",
    "@types/react": "^16.14.3",
    "@types/react-dom": "^16.9.10",
    "@types/react-router": "^5.1.11",
    "@types/react-router-dom": "^5.1.7",
    "axios": "^0.21.1",
    "ionicons": "^5.4.0",
    "phonegap-plugin-barcodescanner": "^8.1.0",
    "react": "^17.0.1",
    "react-dom": "^17.0.1",
    "react-router": "^5.2.0",
    "react-router-dom": "^5.2.0",
    "react-scripts": "4.0.2",
    "typescript": "^4.2.4",
    "web-vitals": "^0.2.4",
    "workbox-background-sync": "^5.1.4",
    "workbox-broadcast-update": "^5.1.4",
    "workbox-cacheable-response": "^5.1.4",
    "workbox-core": "^5.1.4",
    "workbox-expiration": "^5.1.4",
    "workbox-google-analytics": "^5.1.4",
    "workbox-navigation-preload": "^5.1.4",
    "workbox-precaching": "^5.1.4",
    "workbox-range-requests": "^5.1.4",
    "workbox-routing": "^5.1.4",
    "workbox-strategies": "^5.1.4",
    "workbox-streams": "^5.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "@capacitor/cli": "2.4.7"
  },
  "description": "An Ionic project"
}