11-17

README.md

@@ -1,6 +1,6 @@
 《TypeScript 开发实战》课程资源
 ===============
 
-* sourcode：源代码
+* mindmap：思维导图
 * ppt：课件
-* mindmap：思维导图
+* sourcode：源代码

sourcecode/ts-base/.eslintrc.json

@@ -0,0 +1,13 @@
+{
+  "parser": "@typescript-eslint/parser",
+  "plugins": ["@typescript-eslint"],
+  "parserOptions": {
+      "project": "./tsconfig.json"
+  },
+  "extends": [
+    "plugin:@typescript-eslint/recommended"
+  ],
+  "rules": {
+    "@typescript-eslint/no-inferrable-types": "off"
+  }
+}

sourcecode/ts-base/README.md

@@ -0,0 +1,4 @@
+基础篇、工程篇代码
+===============
+
+注意：src 中为独立的代码片段，多个文件之间会有变量重名。如果要运行其中的代码，请复制到 index.ts 中，或用 import 导入。

sourcecode/ts-base/build/webpack.config.js

@@ -3,6 +3,11 @@ const baseConfig = require('./webpack.base.config')
 const devConfig = require('./webpack.dev.config')
 const proConfig = require('./webpack.pro.config')
 
-let config = process.NODE_ENV === 'development' ? devConfig : proConfig
+// Wrong!
+// let config = process.NODE_ENV === 'development' ? devConfig : proConfig
+// module.exports = merge(baseConfig, config)
 
-module.exports = merge(baseConfig, config)
+module.exports = (env, argv) => {
+    let config = argv.mode === 'development' ? devConfig : proConfig;
+    return merge(baseConfig, config);
+};

sourcecode/ts-base/package.json

@@ -6,20 +6,31 @@
   "scripts": {
     "start": "webpack-dev-server --mode=development --config ./build/webpack.config.js",
     "build": "webpack --mode=production --config ./build/webpack.config.js",
+    "lint": "eslint src --ext .js,.ts",
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   "keywords": ["TypeScript"],
   "author": "liangxiao",
   "license": "ISC",
   "devDependencies": {
+    "@types/jquery": "^3.3.29",
     "@types/source-map": "^0.5.2",
+    "@typescript-eslint/eslint-plugin": "^1.10.2",
+    "@typescript-eslint/parser": "^1.10.2",
+    "awesome-typescript-loader": "^5.2.1",
     "clean-webpack-plugin": "^3.0.0",
+    "eslint": "^5.16.0",
+    "fork-ts-checker-webpack-plugin": "^1.3.7",
     "html-webpack-plugin": "^3.2.0",
     "ts-loader": "^6.0.2",
     "typescript": "^3.5.1",
     "webpack": "^4.32.2",
     "webpack-cli": "^3.3.2",
     "webpack-dev-server": "^3.5.1",
     "webpack-merge": "^4.2.1"
+  },
+  "dependencies": {
+    "jquery": "^3.4.1",
+    "moment": "^2.24.0"
   }
 }

sourcecode/ts-base/src/part1.base/15.inference.ts

@@ -0,0 +1,19 @@
+let a = 1;
+let b = [1, null, 'a']
+let c = {x: 1, y: 'a'}
+
+let d = (x = 1) => x + 1
+
+window.onkeydown = (event) => {
+    // console.log(event.button)
+}
+
+interface Foo {
+    bar: number
+}
+// let foo = {} as Foo
+// let foo = <Foo>{}
+let foo: Foo = {
+    bar: 1
+}
+// foo.bar = 1

sourcecode/ts-base/src/part1.base/16.compatible.ts

@@ -0,0 +1,122 @@
+/*
+ * X（目标类型） = Y（源类型），X 兼容 Y
+ */
+
+let s: string = 'a'
+// str = null
+
+// 接口兼容性
+interface X {
+    a: any;
+    b: any;
+}
+interface Y {
+    a: any;
+    b: any;
+    c: any;
+}
+let x: X = {a: 1, b: 2}
+let y: Y = {a: 1, b: 2, c: 3}
+x = y
+// y = x
+
+// 函数兼容性
+type Handler = (a: number, b: number) => void
+function hof(handler: Handler) {
+    return handler
+}
+
+// 1)参数个数
+let handler1 = (a: number) => {}
+hof(handler1)
+let handler2 = (a: number, b: number, c: number) => {}
+// hof(handler2)
+
+// 可选参数和剩余参数
+let a = (p1: number, p2: number) => {}
+let b = (p1?: number, p2?: number) => {}
+let c = (...args: number[]) => {}
+a = b
+a = c
+// b = a
+// b = c
+c = a
+c = b
+
+// 2)参数类型
+let handler3 = (a: string) => {}
+// hof(handler3)
+
+interface Point3D {
+    x: number;
+    y: number;
+    z: number;
+}
+interface Point2D {
+    x: number;
+    y: number;
+}
+let p3d = (point: Point3D) => {}
+let p2d = (point: Point2D) => {}
+p3d = p2d
+// p2d = p23
+
+// 3) 返回值类型
+let f = () => ({name: 'Alice'})
+let g = () => ({name: 'Alice', location: 'Beijing'})
+f = g
+// g = f
+
+// 函数重载
+function overload(a: number, b: number): number
+function overload(a: string, b: string): string
+function overload(a: any, b: any): any {}
+// function overload(a: any): any {}
+// function overload(a: any, b: any, c: any): any {}
+// function overload(a: any, b: any) {}
+
+// 枚举兼容性
+enum Fruit { Apple, Banana }
+enum Color { Red, Yellow }
+let fruit: Fruit.Apple = 1
+let no: number = Fruit.Apple
+// let color: Color.Red = Fruit.Apple
+
+// 类兼容性
+class A {
+    constructor(p: number, q: number) {}
+    id: number = 1
+    private name: string = ''
+}
+class B {
+    static s = 1
+    constructor(p: number) {}
+    id: number = 2
+    private name: string = ''
+}
+class C extends A {}
+let aa = new A(1, 2)
+let bb = new B(1)
+// aa = bb
+// bb = aa
+let cc = new C(1, 2)
+aa = cc
+cc = aa
+
+// 泛型兼容性
+interface Empty<T> {
+    // value: T
+}
+let obj1: Empty<number> = {};
+let obj2: Empty<string> = {};
+obj1 = obj2
+
+let log1 = <T>(x: T): T => {
+    console.log('x')
+    return x
+}
+let log2 = <U>(y: U): U => {
+    console.log('y')
+    return y
+}
+log1 = log2

sourcecode/ts-base/src/part1.base/17.guards.ts

@@ -0,0 +1,61 @@
+enum Type { Strong, Week }
+
+class Java {
+    helloJava() {
+        console.log('Hello Java')
+    }
+    java: any
+}
+
+class JavaScript {
+    helloJavaScript() {
+        console.log('Hello JavaScript')
+    }
+    js: any
+}
+
+function isJava(lang: Java | JavaScript): lang is Java {
+    return (lang as Java).helloJava !== undefined
+}
+
+function getLanguage(type: Type, x: string | number) {
+    let lang = type === Type.Strong ? new Java() : new JavaScript();
+
+    if (isJava(lang)) {
+        lang.helloJava();
+    } else {
+        lang.helloJavaScript();
+    }
+
+    // if ((lang as Java).helloJava) {
+    //     (lang as Java).helloJava();
+    // } else {
+    //     (lang as JavaScript).helloJavaScript();
+    // }
+
+    // instanceof
+    // if (lang instanceof Java) {
+    //     lang.helloJava()
+    //     // lang.helloJavaScript()
+    // } else {
+    //     lang.helloJavaScript()
+    // }
+
+    // in
+    // if ('java' in lang) {
+    //     lang.helloJava()
+    // } else {
+    //     lang.helloJavaScript()
+    // }
+
+    // typeof
+    // if (typeof x === 'string') {
+    //     console.log(x.length)
+    // } else {
+    //     console.log(x.toFixed(2))
+    // }
+
+    return lang;
+}
+
+getLanguage(Type.Week, 1)

sourcecode/ts-base/tsconfig.json

@@ -46,7 +46,7 @@
     // "typeRoots": [],                       /* List of folders to include type definitions from. */
     // "types": [],                           /* Type declaration files to be included in compilation. */
     // "allowSyntheticDefaultImports": true,  /* Allow default imports from modules with no default export. This does not affect code emit, just typechecking. */
-    "esModuleInterop": true                   /* Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'. */
+    "esModuleInterop": true,                  /* Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'. */
     // "preserveSymlinks": true,              /* Do not resolve the real path of symlinks. */
     // "allowUmdGlobalAccess": true,          /* Allow accessing UMD globals from modules. */