new

Ts-类/1_类.ts

@@ -0,0 +1,22 @@
+//类： 可以理解为工厂  去创建实例化对象
+(()=>{
+  class Person {
+    //定义属性
+    name: string
+    age: number
+    //定义构造函数  为了将来实例化对象的时候 可以直接对属性的值进行初始化
+    constructor (name: string = '小明',age: number = 18){
+      //更新对象中的属性数据
+      this.name = name
+      this.age = age
+    }
+    //定义一个方法
+    sayHi(str: string){
+      console.log(`大家好，我叫${this.name},今年${this.age}，我的好朋友是` + str)
+    }
+    
+  }
+  const person = new Person('小兰',30)
+  person.sayHi('xiaohong')
+  console.log(person)
+})()

Ts-类/2_继承.ts

@@ -0,0 +1,23 @@
+//继承： 类与类之间的继承
+//A继承了B类，A叫子类，B叫父类
+//一旦有的继承的关系 就会出现父子类
+(()=>{
+  //定义一个类
+  class Animal{
+    run(distance: string){
+      console.log(`animal run ${distance}`)
+    }
+  }
+
+  //继承
+  class Dog extends Animal {
+    cry(){
+      console.log('wang wang!')
+    }
+  }
+  const dog = new Dog()
+  dog.cry()
+  dog.run('100') //可以调用从父中继承的方法
+
+  //这里 dog是一个派生类 它派生自Animal的基类  通过extends 关键词
+})()

Ts-类/js/1_类.js

@@ -0,0 +1,21 @@
+//类： 可以理解为工厂  去创建实例化对象
+(function () {
+    var Person = /** @class */ (function () {
+        //定义构造函数  为了将来实例化对象的时候 可以直接对属性的值进行初始化
+        function Person(name, age) {
+            if (name === void 0) { name = '小明'; }
+            if (age === void 0) { age = 18; }
+            //更新对象中的属性数据
+            this.name = name;
+            this.age = age;
+        }
+        //定义一个方法
+        Person.prototype.sayHi = function (str) {
+            console.log("\u5927\u5BB6\u597D\uFF0C\u6211\u53EB" + this.name + ",\u4ECA\u5E74" + this.age + "\uFF0C\u6211\u7684\u597D\u670B\u53CB\u662F" + str);
+        };
+        return Person;
+    }());
+    var person = new Person('小兰', 30);
+    person.sayHi('xiaohong');
+    console.log(person);
+})();

Ts-类/js/2_继承.js

@@ -0,0 +1,44 @@
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+//继承： 类与类之间的继承
+//A继承了B类，A叫子类，B叫父类
+//一旦有的继承的关系 就会出现父子类
+(function () {
+    //定义一个类
+    var Animal = /** @class */ (function () {
+        function Animal() {
+        }
+        Animal.prototype.run = function (distance) {
+            console.log("animal run " + distance);
+        };
+        return Animal;
+    }());
+    //继承
+    var Dog = /** @class */ (function (_super) {
+        __extends(Dog, _super);
+        function Dog() {
+            return _super !== null && _super.apply(this, arguments) || this;
+        }
+        Dog.prototype.cry = function () {
+            console.log('wang wang!');
+        };
+        return Dog;
+    }(Animal));
+    var dog = new Dog();
+    dog.cry();
+    dog.run('100'); //可以调用从父中继承的方法
+    //这里 dog是一个派生类 它派生自Animal的基类  通过extends 关键词
+})();

Ts-类/tsconfig.json

@@ -0,0 +1,72 @@
+{
+  "compilerOptions": {
+    /* Visit https://aka.ms/tsconfig.json to read more about this file */
+
+    /* Basic Options */
+    // "incremental": true,                         /* Enable incremental compilation */
+    "target": "es5",                                /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019', 'ES2020', 'ES2021', or 'ESNEXT'. */
+    "module": "commonjs",                           /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', 'es2020', or 'ESNext'. */
+    // "lib": [],                                   /* Specify library files to be included in the compilation. */
+    // "allowJs": true,                             /* Allow javascript files to be compiled. */
+    // "checkJs": true,                             /* Report errors in .js files. */
+    // "jsx": "preserve",                           /* Specify JSX code generation: 'preserve', 'react-native', 'react', 'react-jsx' or 'react-jsxdev'. */
+    // "declaration": true,                         /* Generates corresponding '.d.ts' file. */
+    // "declarationMap": true,                      /* Generates a sourcemap for each corresponding '.d.ts' file. */
+    // "sourceMap": true,                           /* Generates corresponding '.map' file. */
+    // "outFile": "./",                             /* Concatenate and emit output to single file. */
+    "outDir": "./js",                              /* Redirect output structure to the directory. */
+    // "rootDir": "./",                             /* Specify the root directory of input files. Use to control the output directory structure with --outDir. */
+    // "composite": true,                           /* Enable project compilation */
+    // "tsBuildInfoFile": "./",                     /* Specify file to store incremental compilation information */
+    // "removeComments": true,                      /* Do not emit comments to output. */
+    // "noEmit": true,                              /* Do not emit outputs. */
+    // "importHelpers": true,                       /* Import emit helpers from 'tslib'. */
+    // "downlevelIteration": true,                  /* Provide full support for iterables in 'for-of', spread, and destructuring when targeting 'ES5' or 'ES3'. */
+    // "isolatedModules": true,                     /* Transpile each file as a separate module (similar to 'ts.transpileModule'). */
+
+    /* Strict Type-Checking Options */
+    "strict": false,                                 /* Enable all strict type-checking options. */
+    // "noImplicitAny": true,                       /* Raise error on expressions and declarations with an implied 'any' type. */
+    // "strictNullChecks": true,                    /* Enable strict null checks. */
+    // "strictFunctionTypes": true,                 /* Enable strict checking of function types. */
+    // "strictBindCallApply": true,                 /* Enable strict 'bind', 'call', and 'apply' methods on functions. */
+    // "strictPropertyInitialization": true,        /* Enable strict checking of property initialization in classes. */
+    // "noImplicitThis": true,                      /* Raise error on 'this' expressions with an implied 'any' type. */
+    // "alwaysStrict": true,                        /* Parse in strict mode and emit "use strict" for each source file. */
+
+    /* Additional Checks */
+    // "noUnusedLocals": true,                      /* Report errors on unused locals. */
+    // "noUnusedParameters": true,                  /* Report errors on unused parameters. */
+    // "noImplicitReturns": true,                   /* Report error when not all code paths in function return a value. */
+    // "noFallthroughCasesInSwitch": true,          /* Report errors for fallthrough cases in switch statement. */
+    // "noUncheckedIndexedAccess": true,            /* Include 'undefined' in index signature results */
+    // "noImplicitOverride": true,                  /* Ensure overriding members in derived classes are marked with an 'override' modifier. */
+    // "noPropertyAccessFromIndexSignature": true,  /* Require undeclared properties from index signatures to use element accesses. */
+
+    /* Module Resolution Options */
+    // "moduleResolution": "node",                  /* Specify module resolution strategy: 'node' (Node.js) or 'classic' (TypeScript pre-1.6). */
+    // "baseUrl": "./",                             /* Base directory to resolve non-absolute module names. */
+    // "paths": {},                                 /* A series of entries which re-map imports to lookup locations relative to the 'baseUrl'. */
+    // "rootDirs": [],                              /* List of root folders whose combined content represents the structure of the project at runtime. */
+    // "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'. */
+    // "preserveSymlinks": true,                    /* Do not resolve the real path of symlinks. */
+    // "allowUmdGlobalAccess": true,                /* Allow accessing UMD globals from modules. */
+
+    /* Source Map Options */
+    // "sourceRoot": "",                            /* Specify the location where debugger should locate TypeScript files instead of source locations. */
+    // "mapRoot": "",                               /* Specify the location where debugger should locate map files instead of generated locations. */
+    // "inlineSourceMap": true,                     /* Emit a single file with source maps instead of having a separate file. */
+    // "inlineSources": true,                       /* Emit the source alongside the sourcemaps within a single file; requires '--inlineSourceMap' or '--sourceMap' to be set. */
+
+    /* Experimental Options */
+    // "experimentalDecorators": true,              /* Enables experimental support for ES7 decorators. */
+    // "emitDecoratorMetadata": true,               /* Enables experimental support for emitting type metadata for decorators. */
+
+    /* Advanced Options */
+    "skipLibCheck": true,                           /* Skip type checking of declaration files. */
+    "forceConsistentCasingInFileNames": true        /* Disallow inconsistently-cased references to the same file. */
+  }
+}

Ts-类/页面.html

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Document</title>
+</head>
+<body>
+  <!-- <script src="./js/1_类.js"></script> -->
+  <script src="./js/2_继承.js"></script>
+</body>
+</html>

Ts基础/3_类类型.ts

@@ -0,0 +1,62 @@
+//类类型： 类的类型，类的类型可以通过接口来实现
+(() => {
+  //定义一个接口
+  interface Alarm {
+    alert(): any
+  }
+  //定义一个类  这个类的类型就是上面定义的接口
+  class Car implements Alarm {
+    //实现接口当中的方法
+    alert() {
+      console.log('car alert')
+    }
+  }
+  //创建一个实例化对象
+  const car = new Car()
+  // car.alert()
+
+  //定义一个接口
+  interface Light {
+    lightOn(): void
+    lightOff(): void
+  }
+  //当前这个类  可以实现多个接口
+  class Car2 implements Alarm, Light {
+    alert() {
+      console.log('car alert')
+    }
+    lightOn(): void {
+      console.log('car light on')
+    }
+    lightOff(): void {
+      console.log('car light off')
+    }
+  }
+
+  const person2 = new Car2()
+  // person2.lightOff()
+  // person2.lightOn()
+  // person2.alert()
+  //总结： 类可以通过接口的方式 来定义当前这个类
+  //类可以实现一个接口 也可实现多个接口
+
+  //接口可以去继承其他的接口  可以是多个
+  interface LightAble extends Alarm, Light { }
+
+  //定义一个类 去实现这个新的接口
+  class Car3 implements LightAble {
+    alert() {
+      console.log('car alert')
+    }
+    lightOn(): void {
+      console.log('car light on')
+    }
+    lightOff(): void {
+      console.log('car light off')
+    }
+  }
+  //创建一个实例化对象
+  const car3 = new Car3()
+  car3.lightOff()
+  car3.alert()
+})()

Ts基础/4_函数类型.ts

@@ -0,0 +1,14 @@
+//为了使用接口表示函数类型 我们需要给接口定义一个调用签名
+//它像一个只有参数列表和返回值类型的函数  参数列表里面的每个参数都需要名字和类型
+(()=>{
+  //函数类型： 通过接口作为函数类型来使用
+  //定义一个接口 用来作为某个函数的类型
+  interface SearchFun{
+    (source:string,subString: string): boolean
+  }
+  //定义一个函数 它的类型就是上面定义的接口
+  const mySearch: SearchFun = function(source: string,subString:string): boolean{
+    return source.search(subString) > -1
+  }
+  console.log(mySearch('abcd','ee'))
+})()

Ts基础/js/3_类类型.js

@@ -0,0 +1,50 @@
+//类类型： 类的类型，类的类型可以通过接口来实现
+(function () {
+    //定义一个类  这个类的类型就是上面定义的接口
+    var Car = /** @class */ (function () {
+        function Car() {
+        }
+        //实现接口当中的方法
+        Car.prototype.alert = function () {
+            console.log('car alert');
+        };
+        return Car;
+    }());
+    //创建一个实例化对象
+    var car = new Car();
+    //当前这个类  可以实现多个接口
+    var Car2 = /** @class */ (function () {
+        function Car2() {
+        }
+        Car2.prototype.alert = function () {
+            console.log('car alert');
+        };
+        Car2.prototype.lightOn = function () {
+            console.log('car light on');
+        };
+        Car2.prototype.lightOff = function () {
+            console.log('car light off');
+        };
+        return Car2;
+    }());
+    var person2 = new Car2();
+    //定义一个类 去实现这个新的接口
+    var Car3 = /** @class */ (function () {
+        function Car3() {
+        }
+        Car3.prototype.alert = function () {
+            console.log('car alert');
+        };
+        Car3.prototype.lightOn = function () {
+            console.log('car light on');
+        };
+        Car3.prototype.lightOff = function () {
+            console.log('car light off');
+        };
+        return Car3;
+    }());
+    //创建一个实例化对象
+    var car3 = new Car3();
+    car3.lightOff();
+    car3.alert();
+})();

Ts基础/js/4_函数类型.js

@@ -0,0 +1,9 @@
+//为了使用接口表示函数类型 我们需要给接口定义一个调用签名
+//它像一个只有参数列表和返回值类型的函数  参数列表里面的每个参数都需要名字和类型
+(function () {
+    //定义一个函数 它的类型就是上面定义的接口
+    var mySearch = function (source, subString) {
+        return source.search(subString) > -1;
+    };
+    console.log(mySearch('abcd', 'ee'));
+})();

Ts基础/页面.html

@@ -8,6 +8,8 @@
 </head>
 <body>
   <!-- <script src="./js/1_基本数据类型.js"></script> -->
-  <script src="./js/2_接口.js"></script>
+  <!-- <script src="./js/2_接口.js"></script> -->
+  <script src="./js/3_类类型.js"></script>
+  <!-- <script src="./js/4_函数类型.js"></script> -->
 </body>
 </html>