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 typescript@2.2.2 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