TS2322 error on newly generated project

[sora8964]

Description

I am going to create a react+typescript project on Windows machine. After I generate the project and "npm run serve", it show the red color TS2322 error.

Error Message & Stack Trace

C:\Users\sora\Desktop\helloworld>npm run serve

@ serve C:\Users\sora\Desktop\helloworld
gulp serve

[01:58:21] Loading C:\Users\sora\Desktop\helloworld\gulp_tasks\browsersync.js
[01:58:23] Loading C:\Users\sora\Desktop\helloworld\gulp_tasks\karma.js
[01:58:24] Loading C:\Users\sora\Desktop\helloworld\gulp_tasks\misc.js
[01:58:24] Loading C:\Users\sora\Desktop\helloworld\gulp_tasks\webpack.js
[01:58:24] Using gulpfile ~\Desktop\helloworld\gulpfile.js
[01:58:24] Starting 'serve'...
[01:58:24] Starting 'webpack:watch'...
ts-loader: Using [email protected] and C:\Users\sora\Desktop\helloworld\tsconfig.jso
n
[01:58:31] Time: 6709ms
Asset Size Chunks Chunk Names
index.js 1.16 MB 0 main
index.js.map 1.34 MB 0 main

ERROR in ./src/app/title.tsx
(37,12): error TS2322: Type '{ display: string; flexDirection: string; alignItem
s: string; padding: string; backgroundColor: s...' is not assignable to type 'CS
SProperties'.
Types of property 'alignItems' are incompatible.
Type 'string' is not assignable to type '"initial" | "inherit" | "unset" | "
center" | "flex-start" | "flex-end" | "baseline" | "stretch"'.

ERROR in ./src/app/main.tsx
(27,12): error TS2322: Type '{ display: string; flexDirection: string; minHeight
: string; }' is not assignable to type 'CSSProperties'.
Types of property 'flexDirection' are incompatible.
Type 'string' is not assignable to type '"column" | "initial" | "inherit" |
"unset" | "row" | "row-reverse" | "column-reverse"'.

ERROR in ./src/app/main.tsx
(29,15): error TS2322: Type '{ flex: number; display: string; flexDirection: str
ing; }' is not assignable to type 'CSSProperties'.
Types of property 'flexDirection' are incompatible.
Type 'string' is not assignable to type '"column" | "initial" | "inherit" |
"unset" | "row" | "row-reverse" | "column-reverse"'.

ERROR in ./src/app/header.tsx
(29,15): error TS2322: Type '{ display: string; alignItems: string; backgroundCo
lor: string; }' is not assignable to type 'CSSProperties'.
Types of property 'alignItems' are incompatible.
Type 'string' is not assignable to type '"initial" | "inherit" | "unset" | "
center" | "flex-start" | "flex-end" | "baseline" | "stretch"'.

Config

Copy the content from .yo-rc.json:

{
  "generator-fountain-react": {
    "version": "1.0.0",
    "props": {
      "resolved": "C:\\Users\\sora\\AppData\\Roaming\\npm\\node_modules\\generator-fountain-react\\generators\\app\\index.js",
      "namespace": "fountain-react:app",
      "_": [],
      "framework": "react",
      "modules": "webpack",
      "js": "typescript",
      "css": "scss",
      "ci": [],
      "sample": "techs",
      "router": "router"
    }
  }
}

Environment

Node.js v6.9.1
win32 6.1.7601
Yo 1.8.5