typescript 环境搭建

.babelrc

@@ -0,0 +1,27 @@
+
+{
+  "presets": [
+    [
+      "env",
+      {
+        "targets": {
+          "browsers": [
+            ">1%",
+            "last 3 versions"
+          ]
+        }
+      }
+    ],
+    "stage-2",
+    "latest",
+    "react"
+  ],
+  "plugins": [
+    "syntax-dynamic-import",
+    "transform-class-properties", ["import", {
+      "libraryName": "antd",
+      "libraryDirectory": "es",
+      "style": true
+    }]
+  ]
+}

README.md

@@ -1 +1,15 @@
-# webpack4-es6-react-typescript
+##### webpack4-es6-react-typescript
+
+##### 前言
+typescript 逐渐出现在大家的项目中，作为前端的一员,typescript还是需要学习的
+jest 一个好的项目应该是存在大量测试代码
+
+##### 学习目的
+- typescript
+- jest
+
+
+##### 目前阶段
+- typescript 环境搭建
+- 搭建jest环境
+- 在typescript中使用jest测试

package.json

@@ -18,15 +18,40 @@
   },
   "homepage": "https://github.com/NewPrototype/webpack4-es6-react-typescript#readme",
   "dependencies": {
-    "@types/react": "^16.4.9",
+    "@types/react": "^16.4.11",
     "@types/react-dom": "^16.0.7",
+    "@types/react-loadable": "^5.4.1",
+    "@types/react-router-dom": "^4.3.0",
+    "antd": "^3.8.2",
     "react": "^16.4.2",
-    "react-dom": "^16.4.2"
+    "react-dom": "^16.4.2",
+    "react-loadable": "^5.5.0",
+    "react-router-dom": "^4.3.1"
   },
   "devDependencies": {
+    "autoprefixer": "^9.1.2",
     "awesome-typescript-loader": "^5.2.0",
+    "babel-core": "^6.26.3",
+    "babel-loader": "^7.1.5",
+    "babel-plugin-import": "^1.7.0",
+    "babel-plugin-syntax-dynamic-import": "^6.18.0",
+    "babel-plugin-transform-class-properties": "^6.24.1",
+    "babel-preset-env": "^1.6.1",
+    "babel-preset-latest": "^6.24.1",
+    "babel-preset-react": "^6.24.1",
+    "babel-preset-stage-2": "^6.24.1",
+    "css-loader": "^1.0.0",
     "html-webpack-plugin": "^3.2.0",
+    "import": "^0.0.6",
+    "less": "^3.8.1",
+    "less-loader": "^4.1.0",
+    "postcss-loader": "^3.0.0",
     "source-map-loader": "^0.2.3",
+    "style-loader": "^0.22.1",
+    "stylus": "^0.54.5",
+    "stylus-loader": "^3.0.2",
+    "ts-import-plugin": "^1.5.4",
+    "ts-loader": "^4.5.0",
     "typescript": "^3.0.1",
     "webpack": "^4.16.5",
     "webpack-cli": "^3.1.0",

src/app.styl

@@ -0,0 +1,6 @@
+
+// @import '~antd/dist/antd.css';
+
+.main{
+  display: flex;
+}

src/components/Hello.tsx

@@ -1,7 +1,32 @@
 import * as React from 'react';
 
-export interface HelloProps { compiler: string; framework: string; };
+interface HelloProps { compiler: string; framework: string; };
+
+
+
+
+class Student {
+  fullName: string;
+  constructor(public firstName: string, public middleInitial: string, public lastName: string) {
+    this.fullName = `${firstName}${middleInitial}${lastName}`
+  }
+}
+
+
+interface Person {
+  firstName: string;
+  lastName: string;
+}
+
+function greeter(person: Person):string {
+  return `hello, ${person.firstName} ${person.lastName}`
+}
+let user = new Student('Jane', "M", "user");
+console.log(greeter(user))
 
 export const Hello = (props: HelloProps) => (
-  <h1>{props.framework} {props.compiler} </h1>
-)
+  <h1>{props.framework} {props.compiler} {greeter(user)}</h1>
+)
+
+
+

src/components/interface.ts

@@ -0,0 +1,37 @@
+
+/**接口 interface */
+
+
+function printLabel(labelObj:{label:string}){
+  console.log(labelObj.label)
+}
+
+printLabel({label:'hi'})
+
+
+
+
+
+interface LabelValue{
+  label:string,
+  value?:string //可选
+
+}
+
+function printLabelInter(labelItem:LabelValue):{label:string}{
+  console.log(labelItem.label)
+  return labelItem
+}
+printLabelInter({label:'hello'})
+
+
+interface Point {
+  readonly x:number;  //只读
+}
+
+let p:Point={x:10};
+// p.x=1200 //只读
+
+
+
+export default 'interface';

src/components/type.ts

@@ -0,0 +1,59 @@
+
+/**基础类型 */
+let isDone:boolean=false;
+
+let decLiteral:number=123;
+
+let name:string='bob';
+
+let list:number[]=[1,2,3,4]
+let list2:Array<number>=[12,3,45,]
+let list3:any[]=[1,2,false];
+let list4:Array<any>=[12,'str']
+
+let arr:[string,number]
+
+arr=['hello',123]
+arr[3]=1;
+
+//枚举 如果没有默认值获取的下标
+enum Color {Red,Green=3,Blue}  
+//可以设置默认值
+
+let c:string=Color[3];
+console.log(c,'--')
+
+let notSure:any=4;
+notSure='hi';
+
+let prettySure:object={};
+
+
+function warnUser():string{
+  return 'hi'
+}
+/**
+ *
+ *void表示没有任何返回值
+ */
+function number():void{
+  console.log('---12')
+}
+
+/**
+ *never类型表示的是那些永不存在的值的类型
+ *
+ * @returns {never}
+ */
+function error():never{
+  throw new Error('错误')
+}
+
+//断言 程序员自己来检测
+
+let someValue:string='this is a string';
+let strLength =(<string>someValue).length;
+let strLength1 =(someValue as string).length;
+
+export default isDone
+

src/index.tsx

@@ -1,19 +1,36 @@
 import * as React from 'react';
 import * as ReactDom from 'react-dom';
 
-import { Hello } from './components/Hello';
+import {HashRouter} from 'react-router-dom';
 
-import { aa } from './util/index'
 
-console.log(aa)
 
-console.log(module,'--')
+
+import Router from './router'
+import LeftNav from 'pages/leftNav'
+
+import './app.styl'
+
+declare let module: any;
+
 if (module.hot) {
   module.hot.accept();
 }
 
+class App extends React.Component {
+  render() {
+    return <div className='main'>
+      <LeftNav></LeftNav>
+       <Router />
+    </div>
+  }
+}
+
+
 
 ReactDom.render(
-  <Hello compiler={"string123"} framework="hi" />,
+  <HashRouter>
+    <App />
+  </HashRouter>,
   document.getElementById('example')
 );

src/pages/home/home.md

@@ -0,0 +1 @@
+### home

src/pages/home/home.styl

@@ -0,0 +1,3 @@
+.home{
+
+}

src/pages/home/home.tsx

@@ -0,0 +1,17 @@
+import * as React from 'react';
+
+import { Avatar } from 'antd';
+
+
+import './home.styl'
+
+
+export default class home extends React.Component<any,{}> {
+  render() {
+    return (
+      <div className="home">
+           home
+      </div>
+    );
+  }
+}

src/pages/home/index.ts

@@ -0,0 +1,3 @@
+import Home from './home';
+
+export default Home;

src/pages/leftNav/index.ts

@@ -0,0 +1 @@
+export { default } from "./leftNav";

src/pages/leftNav/leftNav.md

@@ -0,0 +1 @@
+### leftNav

src/pages/leftNav/leftNav.styl

@@ -0,0 +1,3 @@
+.leftNav{
+
+}

src/pages/leftNav/leftNav.tsx

@@ -0,0 +1,55 @@
+import * as React from 'react';
+import './leftNav.styl';
+
+import { Menu, Icon } from 'antd';
+
+import { withRouter } from 'react-router-dom';
+
+interface LeftNavProps {
+  history: any,
+}
+
+
+let router: object[] = [
+  { key: '/', text: '首页1', icon: 'pie-chart' },
+  { key: '/home2', text: '首页2', icon: 'mail' },
+]
+
+export default withRouter<any>(
+  class LeftNav extends React.Component<LeftNavProps, { openKeys: string[] }> {
+    constructor(props: LeftNavProps) {
+      super(props)
+      this.state = {
+        openKeys: ['sub1'],
+      };
+    }
+    onSelect = (e: {key:string}) => {
+      this.props.history.push(e.key)
+    };
+    render() {
+      return (
+        <Menu
+          mode="inline"
+          openKeys={this.state.openKeys}
+          style={{ width: 200 }}
+          onSelect={this.onSelect}
+        >
+          {
+            router.map((value: { key: string, icon: string, text: string }, index) => {
+              return <Menu.Item key={value.key} >
+                <Icon type={value.icon} />
+                <span>{value.text}</span>
+              </Menu.Item>
+            })
+          }
+
+        </Menu>
+      );
+    }
+  }
+)
+
+
+
+
+