FTD止水
FTD止水

Learning TypeScript

前言

TypeScript（以后简称TS）是JavaScript（以后简称JS）的一个超级，支持当前最新的ES规范，提供了对数据类型的各种约束，使前端开发也能像后端一样使用强类型语言，这种强类型的约束虽然增加了不少前端开发的工作量，但确可以在编译的时候将因数据类型不严谨造成的bug及时暴露出来，以便减少在运行的时候出现错误。所以TS非常适合用于大型项目和团队多人协作开发。现在有不少前端框架都在逐渐支持TS，vue更是用ts进行了重构，TS必将是以后前端开发的趋势，所以是非常有必要学习的。
自己看过一遍TS官方文档，发先它的查阅价值远远大于学习价值，它每一章都希望能详尽的描述一个概念，导致前面的章节就会包含很多后面才会学习到的内容，如果想从官网上学习TS，那种体验简直跟屎一样，所以自己就想写一篇渐进式学习TS的文章，也方便以后查阅和再次学习。
学习TS之前，必须要了解JS面向对象原理、了解ES6，了解Node的npm工具，我之后所编写的TS代码都是在node环境下运行的，所以要先安装node.js和ts-node，所用的开发工具是vscode。

安装 TypeScript

TypeScript 的命令行工具安装方法如下：

cnpm install -g typescript

验证是否安装成功，我们可以打开vscode，新建hello.ts文件，然后随便写一些ts代码，打开编译器终端输入运行命令

tsc hello

就会发先新生成一个hello.js的文件，这说明ts已经成功编译了，也就是说ts安装好了。

截图.png

然后要想在node环境下运行TS,就必须安装ts-node，命令如下：

cnpm install -g ts-node

安装好了之后在终端输入ts-node,ts的运行结果就会显示在终端。

截图.png

上述截图Demo中，TS使用：来指定变量的类型，如myName的类型就是string类型，如果我们赋的值类型不为string，编译器就会将静态类型检查的错误结果告诉我们，虽然编译报错了，还是会生成编译结果，我们仍然可以使用这个编译之后的文件。如果要在报错的时候终止 js 文件的生成，可以在 tsconfig.json 中配置 noEmitOnError 即可。因为这里没有构建TS项目，只是用单一文件进行Demo演示，所以没有配置文件，具体如何实现可以查阅官方文档。

基本数据类型

JS分为两种数据类型：基本数据类型和引用数据类型。
基本数据类型包括：布尔值、数值、字符串、null、undefined 以及ES6新增的Symbol。
本节介绍TS中的基本数据类型的使用。

布尔值
let flag:boolean=false;
数字
let decLiteral: number = 9527;
let hexLiteral: number = 0xf00d;
// ES6 中的二进制表示法
let binaryLiteral: number = 0b1010;
// ES6 中的八进制表示法
let octalLiteral: number = 0o744;
let notANumber: number = NaN;
let infinityNumber: number = Infinity;
字符串
let myName:string="Joker";
空值

JS没有void的概念，在TS中表示函数没有任何返回值：

function calculate():void{
    console.log("打印计算结果")
}
Null 和 Undefined
let u: undefined = undefined;
let n: null = null;

与 void的区别是，undefined和null是所有类型的子类型。也就是说 undefined 类型的变量，可以赋值给其它类型的变量。

// 这样也不会报错
let u: undefined;
let num: number = u;
any（任意类型）

如果是一个普通类型，在赋值过程中改变类型是不被允许的：

let myName:string="Joker";
myName=3;
console.log(myName);
//error

但如果是any类型，则允许被赋值为任意类型:

let myName:any="Joker";
myName=3;
console.log(myName);

注意：TS中如果变量在声明的时候，未指定其类型，那么它会被识别为任意值类型如：

let myName="Joker";
myName=3;
console.log(myName);

等价于：

let myName:any="Joker";
myName=3;
console.log(myName)
数组类型

在TS中，数组类型有多种定义方式，比较灵活。

  • 类型 + 方括号表示法
let arr:number[]=[1,2,3];

数组元素中不可以出现其它类型如：

let arr:number[]=[1,2,"3"];

也不可以通过操作数组，向数组中添加其它类型如：

let arr:number[]=[1,2,3];
arr.push("Joker");
  • 数组泛型表示法
let arr:Array=[1,2,3];
  • 用any表示任意类型数组
let arr:any=[1,2,3,"Joker",{"name":"Link"}];
元组

元组跟数组很类似，区别只是限制了数组中指定索引的类型，如：
定义一对值分别为string和number的元组：

let arr:[string,number]=['Link',1];

也可以只赋值其中一项：

let arr:[string,number];
arr.push("Joker");

但是当直接对元组类型的变量进行初始化或者赋值的时候，需要提供所有元组类型中指定的项。
正确写法：

let arr:[string,number]=['Link',1];

错误写法：

let arr:[string,number]=['Link'];
//error

元组越界表示
当添加越界的元素时，它的类型会被限制为元组中每个类型的联合类型：
正确写法：

let arr:[string,number]=["Joker",1];
arr.push("Link");

错误写法：

let arr:[string,number]=["Joker",1];
arr.push(true);
//error
never类型

never表示函数抛出异常或没有结束方法体如：

function calIt():never{
    while(true){
        console.log("Joker");
    }
}
function conIt():never{
    throw new Error();
}

同时never类型也是null和undefined的子类

let n:never;
let u:undefined=undefined;
u=n;
枚举

在实际开发中，我们前端一定会碰到这种情况，当我们对之前的联调进行修改时，发先其中一个参数可能时1，2，3，4，但是我们正好忘记了这4个数分别代表什么，恰好又忘记写注释了，这时如果使用枚举，就可以完美解决某个参数值分别代表什么意思。
枚举默认赋值

enum gamesType {JRPG,MUG,FTG,ACT};
console.log(gamesType.JRPG);//0
console.log(gamesType.MUG);//1
console.log(gamesType.FTG);//2
console.log(gamesType.ACT);//3

正反向都可以获取相应的数值如：

enum gamesType {JRPG,MUG,FTG,ACT};
console.log(gamesType[0]);//JRPG
console.log(gamesType[1]);//MUG
console.log(gamesType[2]);//FTG
console.log(gamesType[3]);//ACT

手动赋值
这里强烈不建议只赋值一部分，要赋值就给每一个元素全都赋值，要么就全都不赋值使用默认赋值，如果只赋值一部分，及其容易出现阅读障碍和bug，所以这里不推荐也不做介绍。
注意：这里枚举赋值最好是数字类型，这样可以反相获取，如果是其它类型，那只能正向获取了

enum gamesType {JRPG=10,MUG=20,FTG=30,ACT=40};

console.log(gamesType.JRPG);//10
console.log(gamesType.MUG);//20
console.log(gamesType.FTG);//30
console.log(gamesType.ACT);//40

console.log(gamesType[10]);//JRPG
console.log(gamesType[20]);//MUG
console.log(gamesType[30]);//FTG
console.log(gamesType[40]);//ACT

函数

在JS中函数有两种定义方式，一种是函数声明：

function getSum(a,b){
    return a+b;
}

一种是函数表达式：

let getSum=function (a,b){
    return a+b;
}

TS中定义函数，要对函数的参数和返回值进行约束，先看函数声明的写法

//函数声明
function getSum(a:number,b:number):number{
    return a+b;
}

注意：输入多余的参数或者少于要求的参数都是不可以的

function getSum(a:number,b:number):number{
    return a+b;
}
getSum(1);//error
getSum(1,2,3);//error

函数表达式写法

let getSum=function (a:number,b:number):number{
    return a+b;
}

其实这里在等号左侧TS帮我们自动推断出了变量的类型，如果我们手动给getSum添加类型，应该如下：

let getSum:(a:number,b:number)=>number=function (a:number,b:number):number{
    return a+b;
}

注意不要混淆了TS中的=>和ES6中的=>。
在TS的类型定义中，=>用来表示函数的定义，左边是输入类型，需要用括号括起来，右边是输出类型。
可选参数
前面的例子函数传入多余的参数是不可以的，TS如何实现可选参数的呢，我们用？表示可选参数：

function getSum(a:number,b:number,c?:number):void{
   if(c){
       console.log(c)
   }else{
       console.log(a+b);
   }
}
getSum(1,2);
getSum(1,2,3);
getSum(1,2,3,4);//error

注意：可选参数后面不允许再出现必需参数了
默认参数
在TS中，我们允许给函数的参数添加默认值

function getSum(a:number,b:number,c:number=3):void{
   console.log(a+b+c);
}
getSum(1,2);//结果是6
getSum(1,2,10);//结果是13

剩余参数
TS可以使用...rest的方式获取函数中的剩余参数，rest是一个数值，我们可以用数组类型来定义它：

function getSum(a:number,b:number,...rest:number[]):void{
   let temp=a+b;
   let box=0;
   for(let i=0;i

函数重载
TS函数重载如果跟Jave的函数重载比起来，会发现TS函数的重载处理的很牵强，所以这里只做代码演示：

function test(a:number):number;
function test(a:string):string;
function test(a:number|string):number|string{
    return a;
}

上例中，我们重复定义了多次函数 test，前几次都是函数定义，最后一次是函数实现。

ES5中的类

es5中是通过构造函数来实现类的，定义如下：

function Game(){
    this.name="ZELDA";
}
let temp=new Game();
console.log(temp.name);//输出结果ZELDA

也可以给构造函数添加类的方法

function Game(){
    this.name="ZELDA";
    this.start=function(){
        console.log("start game")
    }
}
let temp=new Game();
console.log(temp.name);//输出结果ZELDA
temp.start();//输出结果start game

但是这种通过构造函数定义的方法有个缺陷，就是每个类实体含有这个方法，我们希望这个方法是共有的，就可以通过原型链进行优化，将相同的方法进行提取，使其成为共有方法，优化如下：

function Game(){
    this.name="ZELDA";
}
Game.prototype.start=function(){
    console.log("start game")
}
let temp=new Game();
console.log(temp.name);//输出结果ZELDA
temp.start();//输出结果start game

注意：原型链上定义的属性和方法会被多个实例共享，构造函数中定义的属性和方法不会
类中的静态方法定义：我们知道实例方法必须通过new 实例化对象才能调用，静态方法是通过类名可以直接调用，方法如下：

function Game(){
    this.name="ZELDA";
}
Game.start=function(){
    console.log("start game")
}
Game.start();//输出结果start game

ES5中的继承
可以通过对象冒称和原型链组合的形式来实现类的继承，先看对象冒充实现继承：

function Game(){
    this.name="ZELDA";
}
Game.prototype.start=function(){
    console.log("start game")
}
function JRPG(){
    Game.call(this)
}
let temp =new JRPG();
console.log(temp.name);//输出"ZELDA"

但当我想调用父类的start方法时，会报错，因为对象冒充只能继承构造函数内的属性和方法，如果我们想要继承父类的prototype（原型链）上的属性和方法，可以按照如下方式实现：

function Game(){
    this.name="ZELDA";
}
Game.prototype.start=function(){
    console.log("start game")
}
function JRPG(){
    Game.call(this)
}
JRPG.prototype= Game.prototype;
let temp =new JRPG();
console.log(temp.name);//输出"ZELDA"
temp.start();//输出"start game"

TS中的类

TS中类个概念跟绝大多数后端开发语言非常类似，这里对类的相关概念做一个简单的介绍。

  • 类（Class）：定义了一件事物的抽象特点，包含它的属性和方法
  • 对象（Object）：类的实例，通过 new 生成
  • 面向对象（OOP）的三大特性：封装、继承、多态
  • 封装（Encapsulation）：将对数据的操作细节隐藏起来，只暴露对外的接口。外界调用端不需要（也不可能）知道细节，就能通过对外提供的接口来访问该对象，同时也保证了外界无法任意更改对象内部的数据
  • 继承（Inheritance）：子类继承父类，子类除了拥有父类的所有特性外，还有一些更具体的特性
  • 多态（Polymorphism）：由继承而产生了相关的不同的类，对同一个方法可以有不同的响应。比如 Cat 和 Dog 都继承自 Animal，但是分别实现了自己的 eat 方法。此时针对某一个实例，我们无需了解它是 Cat 还是 Dog，就可以直接调用 eat 方法，程序会自动判断出来应该如何执行 eat
  • 存取器（getter & setter）：用以改变属性的读取和赋值行为
  • 修饰符（Modifiers）：修饰符是一些关键字，用于限定成员或类型的性质。比如 public 表示公有属性或方法
  • 抽象类（Abstract Class）：抽象类是供其他类继承的基类，抽象类不允许被实例化。抽象类中的抽象方法必须在子类中被实现
  • 接口（Interfaces）：不同类之间公有的属性或方法，可以抽象成一个接口。接口可以被类实现（implements）。一个类只能继承自另一个类，但是可以实现多个接口
    TS中类的简单用法
    定义属性和方法：
    使用class定义类，使用constructor定义构造函数。
    通过new生成新实例的时候，会自动调用构造函数
class Game {
    name:string;
    constructor(name:string){
        this.name=name;
    }
    play():void{
        console.log(`play ${this.name}`);
    }
}
let temp=new Game("ZELDA");
temp.play();
//运行结果 play ZELDA

类的继承
使用extends关键字实现继承，子类中使用super关键字来调用父类的构造函数和方法。

class Game {
    name:string;
    constructor(name:string){
        this.name=name;
    }
    play():void{
        console.log(`play ${this.name}`);
    }
}
class ARPG extends Game{
    constructor(name:string){
        super(name);
    }
    play():void{
        console.log(`${this.name}天下第一`);
    }
}
let temp=new ARPG("ZELDA");
temp.play();
//运行结果 ZELDA天下第一

存取器
使用 getter 和 setter 可以改变属性的赋值和读取行为：

class Game {
    name:string;
    constructor(name:string){
        this.name=name;
    }
    getName():string{
        return this.name;
    }
    setName(name:string):void{
        this.name=name;
    } 
    play():void{
        console.log(`play ${this.name}`);
    }
}
let temp=new Game("ZELDA");
console.log(temp.getName());//输出结果：ZELDA
temp.setName("异度之刃");
console.log(temp.getName());//输出结果：异度之刃

静态方法
使用static修饰符修饰的方法称为静态方法，它们不需要实例化，而是直接通过类来调用，注意：静态方法只能访问静态属性

class Game {
    name:string;
    static price:number=350;
    constructor(name:string){
        this.name=name;
    }
    static buy():void{
        console.log(`price is ${this.price}`)
    }
    getName():string{
        return this.name;
    }
    setName(name:string):void{
        this.name=name;
    } 
    play():void{
        console.log(`play ${this.name}`);
    }
}
Game.buy();//输出：price is 350

TS中三种访问修饰符的用法

  • public修饰的属性或方法是公有的，可以在任何地方被访问到，默认所有的属性和方法都是 public 的
  • private修饰的属性或方法是私有的，不能在声明它的类的外部访问
  • protected修饰的属性或方法是受保护的，它和 private 类似，区别是它在子类中也是允许被访问的
    例如：
class Game {
    public name:string;
    constructor(name:string){
        this.name=name;
    } 
}
class ARPG extends Game{
    constructor(name:string){
        super(name);
    }
    play():void{
        console.log(`${this.name}天下第一`);
    }
}
let temp=new ARPG("ZELDA");//输出：ZELDA天下第一
console.log(temp.name)//输出：ZELDA

上面的例子中，name被设置为了public，所以子类和外部的实例化对象都可以直接访问name属性。
当我们上述例子中的public属性换成private属性时，编译器就会报错，告诉我们被private修饰的属性和方法为私有，不能被子类和外部调用。如果我们希望父类的方法和属性可以被子类调用而不想被实例外部调用，我们就可以使用protected修饰符来修饰，这里只做文字描述，不再做代码演示。
抽象类
abstract用于定义抽象类和其中的抽象方法。抽象类的作用是用于定义一个基础类，这个类要被子类继承和实现。
注意：抽象类是不允许被实例化的

abstract class Game {
    public name:string;
    constructor(name:string){
        this.name=name;
    }
    abstract play(); 
}
let temp =new Game("ZELDA");//error

上述例子中定义了一个抽象类和一个抽象方法，在实例化时报错了。
其次，抽象类中的抽象方法必须被子类实现：

abstract class Game {
    public name:string;
    constructor(name:string){
        this.name=name;
    }
    abstract play(); 
}

class ARPG extends Game{
    constructor(name:string){
        super(name);
    }
    play():void{
        console.log(`${this.name}天下第一`);
    }
}
let temp=new ARPG("ZELDA");

接口

在面向对象的编程中，接口是一种规范的定义，它定义了行为和动作的规范，，在程序设计里面，接口起到一种限制和规范的作用。接口定义了某一批类所需要遵守的规范，接口不关心这些类的内容状态数据，也不关心这些类里方法的实现细节，它只是规定这些类里必须提供某些方法，提供这些方法的类就可以满足实际需要。TS中的接口类似于java，同时也不同于java中的接口，比如TS中的接口可对属性、函数、可索引类型进行限制和约束。
接口的实现（implements,也可以理解成对类进行约束）
一般来讲，一个类只能继承自另一个类，有时候不同类之间可以有一些共有的特性，这时候就可以把特性提取成接口（interfaces），用implements关键字来实现。这个特性大大提高了面向对象的灵活性。示例如下：

interface Play{
    name:string;
    up():void;
    down():void;
    left():void;
    right():void;
}
class Game implements Play{
    public name:string;
    constructor(name:string){
        this.name=name;
    }
    up():void{
        console.log("ctrl up")
    }
    down():void{
        console.log("ctrl down")
    }
    left():void{
        console.log("ctrl left")
    }
    right():void{
        console.log("ctrl right")
    }            
}
let game=new Game("ZELDA")
game.up();
game.down();
game.right();
game.left();

一个类可以实现多个接口：

interface Music{
    playMusic():void;
}
interface Play{
    up():void;
    down():void;
    left():void;
    right():void;
}
class Game implements Play,Music{
    public name:string;
    constructor(name:string){
        this.name=name;
    }
    playMusic():void{
        console.log("play music")
    }
    up():void{
        console.log("ctrl up")
    }
    down():void{
        console.log("ctrl down")
    }
    left():void{
        console.log("ctrl left")
    }
    right():void{
        console.log("ctrl right")
    }            
}
let game=new Game("ZELDA")
game.up();
game.playMusic();
//运行结果：
// ctrl up
// play music

接口也可以继承接口：

interface Music{
    playMusic():void;
}
interface Play extends Music{
    up():void;
    down():void;
    left():void;
    right():void;
}

接口对批量方法传入的参数进行约束（属性接口）
我们可以通过常规方法约束函数参数如下：

function play(info:{"name":string}):void{
    console.log(info.name);
}
play("zelda");//错误
play({"type":"ARPG"});//错误
play({"name":"zelda"});//正确

但我们要定义多个上述类似于play的函数时，且他们的参数约束都是一样的，这时如果还是使用常规方式来进行约束的话会非常麻烦，我们就可以通过接口来进行约束，如下：

interface Information{
    name:string;
}
function play(info:Information):void{
    console.log(info.name);
}
function run(info:Information):void{
    console.log(info.name);
}

可选属性接口
如果其中一个参数可以传也可以不传，就用用到接口的可选属性，如下：

interface Information{
    name:string;
    price?:number
}
function play(info:Information):void{
    console.log(info.name);
}
play({"name":"zelda"});
play({"name":"zelda","price":350});

函数类型接口
有些时候当我们要用函数表达式方式定义函数，并且还要对函数进行约束，这时就要用接口对函数进行约束，示例如下：

interface Information{
    (name:string):void;
}
let play:Information=function(name:string):void{
    console.log(name);
}
play("zelda");

可索引接口
可索引接口主要是对数组和对象进行约束，
对数组进行约束：

interface gameArr{
    [index:number]:string
}
let gameList:gameArr=['zelda','xenoblade','xenoblade2',"p5s","p5"];

对对象进行约束：

interface gameInfo{
    [index:string]:string
}
let gameInfo:gameInfo={"name":"zelda","price":"rmb350"};

泛型

在软件工程中，我们不仅要创建一致的、定义良好的API，同时也要考虑可重用性，组建不仅能够支持当前的数据类型，同时也能支持未来的数据类型。所以我们可以使用泛型来创建可重用的组建，一个组件可以支持多种类型的数据。通俗理解泛型就是解决类、接口、方法的复用性以及对不特定数据类型的支持，并且还要保留类型校验。
泛型函数
现在我们想实现一个函数，传入什么类型的参数最后就返回什么类型，可能会这样来实现：

function getVal(value:any):any{
    return value;
}

这样写会存一个问题，就是any放弃了类型检查，传入和返回什么类型都可以，如果传入的是number类型，也可以返回string类型，就不符合上述的要求（传入类型跟返回类型一致，且传入的类型根据需要而定）。这时我们就要通过泛型来解决这个问题，如下：

function getVal(value:T):T{
    return value;
}
getVal(1);
getVal("zelda");

这样就可以根据具体情况来限制参数的类型。
泛型类
也可以使用泛型对类进行约束，示例如下：

class GetVal{
    val:T;
    constructor(val){
        this.val=val;
    }
}
let temp=new GetVal(11);
console.log(temp.val);//输出 11
let box=new GetVal("zelda");
console.log(box.val);//输出 zelda

泛型接口
第一种定义泛型接口的方法：

interface Get{
    (val:T):T
}
let getVal:Get=function(val:T):T{
    return val;
}
console.log(getVal(350));
console.log(getVal("zelda"));

第二种定义泛型接口的方法：

interface Get{
    (val:T):T
}
function getVal(val:T):T{
    return val;
}
let myGet:Get=getVal;
myGet(350);

TS模块

TS中的模块化和ES6中的模块基本相同都是使用export和import将各种类型的变量如：字符串、数值、函数、类进行导出和导入。例如我们在相同目录中创建a.ts和b.ts两个文件，a.ts文件代码如下：

class Game{
    name:string;
    constructor(name:string){
        this.name=name;
    }
    show():void{
        console.log(this.name);
    }
}
export {Game}//此处可以导出多个变量

在b.ts文件中代码如下：

import {Game} from "./world";//此处以可引入多个模块
let game=new Game("zelda");
game.show();//运行结果：zelad

如果想给导出的变量赋予其它的名称，我们也可以使用as来起别名，方法如下：

import {Game as Play} from "./world";
let game=new Play("zelda");
game.show();//运行结果：zelad

另一种导出模块的方式，export default
在a.ts文件中代码如下：

class Game{
    name:string;
    constructor(name:string){
        this.name=name;
    }
    show():void{
        console.log(this.name);
    }
}
export default Game

在b.ts文件中代码如下：

import Game from "./world";
let game=new Game("zelda");
game.show();//运行结果：zelad

与第一种导出模块的区别如下：

  • 在一个文件或模块中，export、import 可以有多个，export default 仅有一个
  • export default 中的 default 是对应的导出接口变量
  • 通过 export 方式导出，在导入时要加{ }，export default 则不需要
  • export default 向外暴露的成员，可以使用任意变量来接收。
export let name="ts";
import 任意变量 from "xxxx/xxxx/xx"

TS中的命名空间

在多人协作开发大型项目中，为了避免各种变量名冲突，可将相似功能的函数、类、接口等放置到命名空间内，示例如下：

namespace A{
    export class Game{
        name:string;
        constructor(name:string){
            this.name=name;
        }
        show():void{
            console.log(this.name);
        }
    }
}
let game=new A.Game("zelda");

TS中的装饰器（非常有用！）

装饰器是一种特殊类型的声明，它能够附加到类声明，方法，属性或者参数上，可以修改类的行为。通俗讲，装饰器就是一个方法，可以注入到类、方法、属性参数上来扩展类、属性、方法、参数的功能。常见的装饰器有：类装饰器、属性装饰器、方法装饰器、参数装饰器。装饰器根据有无参数可分为普通装饰器（无参数），装饰器工厂（有参数）。
无参类装饰器
作用就是不破坏原有类的结构，对类的属性和方法进行修改，示例如下：

function decorateClass(params:any){
    console.log(params);//params 相当于当前被修饰的类
    params.prototype.price=350;
    params.prototype.showPrice=function(){
        console.log(params.prototype.price)
    }
}

@decorateClass
class Game{
    name:string;
    constructor(name:string){
        this.name=name;
    }
    play():void{
        console.log(`${this.name} is run`);
    }
}
let game=new Game("zelda");
game.play();//zelda
game.showPrice();//350

装饰器工厂（有参数）

function decorateClass(params:string){
    return function(target:any){
        console.log(params);//输出ARPG
        console.log(target);//相当于当前被修饰的类
        target.prototype.gameType=params;
    }
}

@decorateClass("ARPG")
class Game{
    name:string;
    constructor(name:string){
        this.name=name;
    }
    play():void{
        console.log(`${this.name} is run`);
    }
}
let game=new Game("zelda");
game.play();//zelda
console.log(game.gameType);//输出ARPG

也可以利用装饰器重载类里面的属性和方法：

function decorateClass(params:any){
    return class extends params{
        name:String;
        play():void{
            console.log("塞尔达传说天下第一");
        }
    }
}

@decorateClass
class Game{
    name:string;
    constructor(name:string){
        this.name=name;
    }
    play():void{
        console.log(`${this.name} is run`);
    }
}
let game=new Game("zelda");
game.play();//输出：塞尔达传说天下第一

属性装饰器
属性装饰器在运行时，传入两个参数，一个参数对于静态成员来说时类的构造函数，对于实例成员是类的原型对象；另一个参数是成员的名字。实例如下：

function decorateClass(params:any){
    return function(target:any,attr:any){
        console.log(target);//是这个类的原型对象
        console.log(attr);//属性名称url
        target[attr]="zelda"
    }
}

class Game{
    @decorateClass("game")
    name:string;
    constructor(){
        
    }
    play():void{
        console.log(`${this.name} is run`);
    }
}
let game=new Game();
game.play();//输出：zelda is run

方法装饰器
他会被应用到方法的属性描述上，可以用来监视、修改、替换方法定义。方法修饰在运行时传入以下3个参数：

  • 对于静态成员来说时类的构造函数，对于实例成员来说时类的原型对象
  • 成员的名字
  • 成员的属性描述
    示例如下：
function decorateClass(params:any){
    return function(target:any,methodName:any,desc:any){
        console.log(target);//是这个类的原型对象,可用于扩展类的属性和方法
        console.log(methodName);//方法的名称
        console.log(desc);//方法的描述，也就是方法里面的代码
        target.price=350;
        target.up=function(){
            console.log("上");
        }
    }
}

class Game{
    name:string;
    constructor(){
        
    }
    @decorateClass("zelda")
    play():void{
        console.log(`${this.name} is run`);
    }
}
let game=new Game();
console.log(game.price);//输出 350
game.up();//输出：上

如何修改被装饰器修饰的方法：

function decorateClass(params:any){
    return function(target:any,methodName:any,desc:any){
        console.log(target);//是这个类的原型对象,可用于扩展类的属性和方法
        console.log(methodName);//方法的名称
        console.log(desc.value);//方法的描述，也就是方法里面的代码
        let methodBody=desc.value;
        desc.value=function(name:string){
            console.log(name);
            methodBody.apply(this);
        }

    }
}

class Game{
    name:string;
    constructor(){
        
    }
    @decorateClass("zelda")
    play():void{
        console.log(`${this.name} is run`);
    }
}
let game=new Game();
game.play("zelda");//输出:zelda   zelda is run

方法参数装饰器
用法与上述装饰器类似，这里只做简要说明，不做代码演示了。
方法参数修饰器表达式会在运行时当作函数被调用，可以使用参数装饰器为类的原型增加一些元素数据，传入下列3个参数：

  • 对于静态成员来说是类的构造函数，对于实例成员是类的原型对象
  • 参数的名字
  • 参数在函参中的索引
    各种装饰器执行的顺序
    属性装饰器>方法装饰器>方法参数装饰器>类装饰器
    另外相同类型装饰器执行顺序为从下至上（从后向前）

结束语

这只是一个TS入门教程，光看懂是完全没有用的，如果想真正掌握TS还是需要在真实的项目中去实践，这样才会暴露自己对该技术中的不足之处，通过不断尝试和总结，相信一定会对TS有更全新的认识。因为自己水平有限，本文难免会有各种各样的错误，希望大家能多批评指正，或者通过留言的方式与我交流，我会在下一个版本中修正一些不足之处。

止水
于沈阳
2020/08/31 22：38

你可能感兴趣的:(Learning TypeScript)

  • 机器学习与深度学习间关系与区别 ℒℴѵℯ心·动ꦿ໊ོ꫞ 人工智能学习深度学习python
    一、机器学习概述定义机器学习（MachineLearning,ML）是一种通过数据驱动的方法，利用统计学和计算算法来训练模型，使计算机能够从数据中学习并自动进行预测或决策。机器学习通过分析大量数据样本，识别其中的模式和规律，从而对新的数据进行判断。其核心在于通过训练过程，让模型不断优化和提升其预测准确性。主要类型1.监督学习（SupervisedLearning）监督学习是指在训练数据集中包含输入
  • 详解“c:/work/src/components/a/b.vue“‘ has no default export报错原因 hw_happy 开发语言前端vue.jsjavascript
    前情提要在一个vue文件中需要引入定义的b.vue文件，但是提示b文件没有默认导出，对于vue2文件来说有exportdefault，在中，所有定义的变量、函数和组件都会自动被视为默认导出的组件内容。因此，不需要显式地使用exportdefault来导出组件。但是在我引用这个文件的时候还是提示了这个错误，原来是我的项目使用了ts和vite\webpack，因为TypeScript和Vue的默认导出
  • 深度 Qlearning：在直播推荐系统中的应用 AGI通用人工智能之禅 程序员提升自我硅基计算碳基计算认知计算生物计算深度学习神经网络大数据AIGCAGILLMJavaPython架构设计Agent程序员实现财富自由
    深度Q-learning：在直播推荐系统中的应用关键词：深度Q-learning,强化学习,直播推荐系统,个性化推荐1.背景介绍1.1问题的由来随着互联网技术的飞速发展,直播平台如雨后春笋般涌现。面对海量的直播内容,用户很难快速找到自己感兴趣的内容。因此,个性化推荐系统在直播平台中扮演着越来越重要的角色。1.2研究现状目前,主流的个性化推荐算法包括协同过滤、基于内容的推荐等。这些方法在一定程度上缓
  • vant-element-ts一起使用存在的问题 flynn_ 问题总结vue
    由于vant-ui与element-ui部分组件存在冲突，导致在vue-typescript中出现错误:Subsequentpropertydeclarationsmusthavethesametype.Property'$notify'mustbeoftype'ElNotification',butherehastype'Notify'.方案：一个全局导入，一个按需导入,避免冲突的组件同时使用，
  • 终于搞懂TS中的泛型啦! | typescript 入门指南 04 程序员王天 TypeScript实践指南前端javascripttypescript
    大家好，我是王天~今天分享的是《ts入门指南》系列中第四篇，主要讲解ts中的泛型应用泛型在ts中是比较重要的概念，我花挺长时间才搞明白，整理输出这篇文章，希望能帮助到大家~《ts入门指南》系列，点击下方蓝色字体即可访问TsvsJs谁适合前端开发？|TypeScript入门指南01详解tsconfig.json配置文件|TypeScript入门指南02必学！TypeScript语法类型基础|Type
  • 云服务业界动态简报-20180128 Captain7
    一、青云青云QingCloud推出深度学习平台DeepLearningonQingCloud，包含了主流的深度学习框架及数据科学工具包，通过QingCloudAppCenter一键部署交付，可以让算法工程师和数据科学家快速构建深度学习开发环境，将更多的精力放在模型和算法调优。二、腾讯云1.腾讯云正式发布腾讯专有云TCE(TencentCloudEnterprise)矩阵，涵盖企业版、大数据版、AI
  • 机器学习VS深度学习 nfgo 机器学习
    机器学习（MachineLearning,ML）和深度学习（DeepLearning,DL）是人工智能（AI）的两个子领域，它们有许多相似之处，但在技术实现和应用范围上也有显著区别。下面从几个方面对两者进行区分：1.概念层面机器学习：是让计算机通过算法从数据中自动学习和改进的技术。它依赖于手动设计的特征和数学模型来进行学习，常用的模型有决策树、支持向量机、线性回归等。深度学习：是机器学习的一个子领
  • ResNet的半监督和半弱监督模型 Valar_Morghulis
    Billion-scalesemi-supervisedlearningforimageclassificationhttps://arxiv.org/pdf/1905.00546.pdfhttps://github.com/facebookresearch/semi-supervised-ImageNet1K-models/权重在timm中也有：https://hub.fastgit.org/r
  • 联邦学习 Federated learning Google I/O‘19 笔记 努力搬砖的星期五 笔记联邦学习机器学习机器学习tensorflow
    FederatedLearning:MachineLearningonDecentralizeddatahttps://www.youtube.com/watch?v=89BGjQYA0uE文章目录FederatedLearning:MachineLearningonDecentralizeddata1.DecentralizeddataEdgedevicesGboard:mobilekeyboa
  • PCL 怎样可视化深度图像 LeonDL168 PCL计算机视觉人工智能视觉检测图像处理算法
    本小节讲解如何可视化深度图像的两种方法，在3D视窗中以点云形式进行可视化（深度图像来源于点云），另一种是，将深度值映射为颜色，从而以彩色图像方式可视化深度图像。代码首先，在PCL（PointCloudLearning）中国协助发行的书提供光盘的第7章例2文件夹中，打开名为range_image_visualization.cpp的代码文件，同文件夹下可以找到相关的测试点云文件room_scan1.
  • TypeScript 快速入门 echozzi 1024程序员节
    一、TypeScript是什么TypeScript是一种由微软开发的自由和开源的编程语言。于2012年推出。TypeScript是JavaScript的一个超集。为JavaScript添加了类型系统。TypeScript与JavaScript的区别TypeScriptJavaScriptJavaScript的超集用于解决大型项目的代码复杂性一种脚本语言，用于创建动态网页可以在编译期间发现并纠正错误
  • 生成一个完整的App代码通常不会仅仅通过单一的文件或几种语言的简单组合来完成，因为App的开发涉及前端用户界面、后端逻辑处理、数据库管理以及可能的第三方服务集成等多个方面。不过，我可以为你提供一个概念 NewmanEdwarda2 前端ui数据库
    前端(用户界面)yinanjinying.comHTML/CSS/JavaScript(原生Web开发)对于简单的WebApp，你可以直接使用HTML来构建页面结构，CSS来设置样式，JavaScript来添加交互性。React(JavaScript/TypeScript)对于更复杂的单页应用（SPA），React是一个流行的选择。它允许你构建可复用的UI组件。Flutter(Dart)如果你想要
  • Awesome TensorFlow weixin_30594001 人工智能移动开发大数据
    AwesomeTensorFlowAcuratedlistofawesomeTensorFlowexperiments,libraries,andprojects.Inspiredbyawesome-machine-learning.WhatisTensorFlow?TensorFlowisanopensourcesoftwarelibraryfornumericalcomputationusin
  • Vue3+TypeScript频谱跳动算法（附vue2+JavaScript） I like Code? javascripttypescript算法
    以下为Vue3+TypeScript频谱跳动算法只需要调用下列方法即可实现，并且设置定时器。（最好每次先清楚，否则可能耗内存）if(updateInterval.value){clearInterval(updateInterval.value);}constupdateInterval=ref(undefined);generateDataSets();updateInterval.value=
  • 重磅算法：通信设备虚拟仿真-波形根据频率、带宽变化算法（Vue3+typescript）结尾附vue2+JavaScript I like Code? javascript算法typescript
    以下为Vue3+typescriptconstpointSpacing=ref(0);constupdateInterval=ref(undefined);//更新图表数据的函数constUpdateChartTest=(centerFrequnency:number,bandwidth:number,baseFreq=800,baseBW=100)=>{if(updateInterval.val
  • React 开发者完全指南：React.FC（）、函数组件 和更多 夏目艾拉 react.jsjavascripttypescript前端react前端框架
    前言React.FC是一个TypeScript类型，用于React函数组件。FC代表FunctionalComponent（函数组件）。这个类型的使用有助于在TypeScript项目中编写类型安全的React组件。使用React.FC为组件定义类型就可以享受到TypeScript提供的类型检查和自动补全等特性，让开发过程更加高效和减少错误。为了了解React.FC，我们还需要先知道函数组件是什么。
  • 【ShuQiHere】探索人工智能核心：机器学习的奥秘 ShuQiHere 人工智能机器学习
    【ShuQiHere】什么是机器学习？机器学习（MachineLearning,ML）是人工智能（ArtificialIntelligence,AI）中最关键的组成部分之一。它使得计算机不仅能够处理数据，还能从数据中学习，从而做出预测和决策。无论是语音识别、自动驾驶还是推荐系统，背后都依赖于机器学习模型。机器学习与传统的编程不同，它不再依赖于人类编写的固定规则，而是通过数据自我改进模型，从而更灵活
  • 综述论文“A Survey of Zero-Shot Learning: Settings, Methods, and Applications” 硅谷秋水 机器学习机器学习神经网络深度学习
    该零样本学习综述，发表于ACMTrans.Intell.Syst.Technol.10,2,Article13(January2019)摘要：大多数机器学习方法着重于对已经在训练中看到其类别的实例进行分类。实际上，许多应用程序需要对实例进行分类，而这些实例的类以前没有见过。零样本学习（Zero-ShotLearning）是一种强大而有前途的学习范例，其中训练实例涵盖的类别与想分类的类别是不相交的。
  • WebAssembly studentliubo
    1、是什么WebAssembly或者wasm是一个可移植、体积小、加载快并且兼容Web的全新格式。其实w9y不是用来一行一行撸的代码，它是一个编译目标。什么是编译目标？当我们编写TypeScript的时候，Webpack最后打包生成的Js文件就是编译目标。2、和JS的关系WebAssembly是被设计成JavaScript的一个完善、补充，而不是一个替代品。WebAssembly将很多编程语言带到
  • 机器学习 VS 表示学习 VS 深度学习 Efred.D 人工智能机器学习深度学习人工智能
    文章目录前言一、机器学习是什么?二、表示学习三、深度学习总结前言本文主要阐述机器学习,表示学习和深度学习的原理和区别.一、机器学习是什么?机器学习(machinelearning),是从有限的数据集中学习到一定的规律,再把学到的规律应用到一些相似的样本集中做预测.机器学习的历史可以追溯到20世纪40年代McCulloch提出的人工神经元网络,目前学界大致把机器学习分为传统机器学习和机器学习两个类别
  • 端到端的自动驾驶论文与代码整理 大别山伧父 自动驾驶
    LearningbyCheatinggithubcodearxivpaperconferenceonrobotlearning最新进展(May2021)Checkoutourlatestfollow-upwork:WorldonRails(2020)Checkoutoursubmissiontothe2020CARLAChallenge!pass
  • 嵌入式鸿蒙系统开发语言与开发方法分析 嵌入式开发星球 鸿蒙万物互联人工智能之卓越harmonyos开发语言华为
    大家好，今天主要给大家分享一下，HarmonyOS系统的主力开发语言ArkTS语言开发方法，它是基于TypeScript(简称TS)语言扩展而来。第一：ArkTS语言基本特性目的：声明式UI，让开发者以更简洁，更自然的方式开发高性能应用。声明式UI基本特性：基本UI描述:ArkTS定义了各种装饰器、自定义组件、UI描述机制，再配合UI开发框架中的UI内置组件、事件方法、属性方法等共同构成了UI开发
  • Lt-8 Multithreading yanlingyun0210 java
    IntendedLearningOutcomesTounderstandtheconceptofconcurrency.Tounderstandthedifferenceofaprocessandathread.TodefineathreadusingtheThreadclassandRunnableinterface.TocontrolthreadswithvariousThreadmethod
  • 如何使用Pytorch-Metric-Learning？ 鱼儿也有烦恼 PyTorchpytorch
    文章目录如何使用Pytorch-Metric-Learning？1.Pytorch-Metric-Learning库9个模块的功能1.1Sampler模块1.2Miner模块1.3Loss模块1.4Reducer模块1.5Distance模块1.6Regularizer模块1.7Trainer模块1.8Tester模块1.9Utils模块2.如何使用PyTorchMetricLearning库中的
  • 推荐开源项目：PyTorch-Metric-Learning 潘惟妍
    推荐开源项目：PyTorch-Metric-Learningpytorch-metric-learningTheeasiestwaytousedeepmetriclearninginyourapplication.Modular,flexible,andextensible.WritteninPyTorch.项目地址:https://gitcode.com/gh_mirrors/py/pytorc
  • 快速使用react 全局状态管理工具--redux 蓝胖子不是胖子 Reactreact.js前端前端框架
    reduxRedux是JavaScript应用中管理应用状态的工具，特别适用于复杂的、需要共享状态的中大型应用。Redux的核心思想是将应用的所有状态存储在一个单一的、不可变的状态树（statetree）中，状态只能通过触发特定的action来更新。官方文档https://cn.redux.js.org/tutorials/typescript-quick-start如果对react不了解可以看我
  • 推荐：FastAPI驱动的稳定扩散LLMs演示项目 褚知茉Jade
    推荐：FastAPI驱动的稳定扩散LLMs演示项目FastAPI-for-Machine-Learning-Live-DemoThisrepositorycontainsthefilestobuildyourveryownAIimagegenerationwebapplication!OutlinedarethecorecomponentsoftheFastAPIwebframework,anda
  • 【python】【Ray的概述】 资源存储库 python开发语言
    Overview概述Rayisanopen-sourceunifiedframeworkforscalingAIandPythonapplicationslikemachinelearning.Itprovidesthecomputelayerforparallelprocessingsothatyoudon’tneedtobeadistributedsystemsexpert.Rayminimi
  • 什么是监督学习（Supervised Learning） 救救孩子把 AIAI学习
    一、监督学习概述监督学习（SupervisedLearning）是一种极具威力的机器学习方法，能够训练算法以识别数据中的模式，并据此进行精准的预测或分类。借助已有的标记数据，监督学习模型学会了从输入到输出的映射关系，进而在各类实际问题中实现自动化决策。无论是医疗诊断、金融市场分析、客户行为预测，还是提升生产效率以及个性化推荐系统等领域，监督学习都彰显出巨大的潜力与价值。随着技术的持续进步，监督学习
  • 使用3DUNet训练自己的数据集（pytorch）— 医疗影像分割 编程日记✧ 智能医疗pytorch人工智能python计算机视觉图像处理深度学习健康医疗
    代码：lee-zq/3DUNet-Pytorch:3DUNetimplementedwithpytorch(github.com)文章<cicek16miccai.pdf(uni-freiburg.de)3DU-Net:LearningDenseVolumetricSegmentation
  • log4j对象改变日志级别 3213213333332132 javalog4jlevellog4j对象名称日志级别
    log4j对象改变日志级别可批量的改变所有级别，或是根据条件改变日志级别。 log4j配置文件： log4j.rootLogger=ERROR,FILE,CONSOLE,EXECPTION #log4j.appender.FILE=org.apache.log4j.RollingFileAppender log4j.appender.FILE=org.apache.l
  • elk+redis 搭建nginx日志分析平台 ronin47 elasticsearchkibanalogstash
                 elk+redis 搭建nginx日志分析平台 logstash,elasticsearch,kibana 怎么进行nginx的日志分析呢？首先，架构方面，nginx是有日志文件的，它的每个请求的状态等都有日志文件进行记录。其次，需要有个队 列，redis的l
  • Yii2设置时区 dcj3sjt126com PHPtimezoneyii2
    时区这东西，在开发的时候，你说重要吧，也还好，毕竟没它也能正常运行，你说不重要吧，那就纠结了。特别是linux系统，都TMD差上几小时，你能不痛苦吗？win还好一点。有一些常规方法，是大家目前都在采用的1、php.ini中的设置，这个就不谈了，2、程序中公用文件里设置，date_default_timezone_set一下时区3、或者。。。自己写时间处理函数，在遇到时间的时候，用这个函数处理（比较
  • js实现前台动态添加文本框，后台获取文本框内容 171815164 文本框
    <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://w
  • 持续集成工具 g21121 持续集成
            持续集成是什么？我们为什么需要持续集成？持续集成带来的好处是什么？什么样的项目需要持续集成？...        持续集成(Continuous integration ,简称CI)，所谓集成可以理解为将互相依赖的工程或模块合并成一个能单独运行
  • 数据结构哈希表(hash)总结 永夜-极光 数据结构
    1.什么是hash 来源于百度百科: Hash，一般翻译做“散列”，也有直接音译为“哈希”的，就是把任意长度的输入，通过散列算法，变换成固定长度的输出，该输出就是散列值。这种转换是一种压缩映射，也就是，散列值的空间通常远小于输入的空间，不同的输入可能会散列成相同的输出，所以不可能从散列值来唯一的确定输入值。简单的说就是一种将任意长度的消息压缩到某一固定长度的消息摘要的函数。  
  • 乱七八糟 程序员是怎么炼成的
    eclipse中的jvm字节码查看插件地址： http://andrei.gmxhome.de/eclipse/ 安装该地址的outline 插件  后重启，打开window下的view下的bytecode视图 http://andrei.gmxhome.de/eclipse/   jvm博客： http://yunshen0909.iteye.com/blog/2
  • 职场人伤害了“上司” 怎样弥补 aijuans 职场
    由于工作中的失误，或者平时不注意自己的言行“伤害”、“得罪”了自己的上司，怎么办呢？ 　　在职业生涯中这种问题尽量不要发生。下面提供了一些解决问题的建议： 　　一、利用一些轻松的场合表示对他的尊重 　　即使是开明的上司也很注重自己的权威，都希望得到下属的尊重，所以当你与上司冲突后，最好让不愉快成为过去，你不妨在一些轻松的场合，比如会餐、联谊活动等，向上司问个好，敬下酒，表示你对对方的尊重，
  • 深入浅出url编码 antonyup_2006 应用服务器浏览器servletweblogicIE
    出处：http://blog.csdn.net/yzhz  杨争   http://blog.csdn.net/yzhz/archive/2007/07/03/1676796.aspx 一、问题：         编码问题是JAVA初学者在web开发过程中经常会遇到问题，网上也有大量相关的
  • 建表后创建表的约束关系和增加表的字段 百合不是茶 标的约束关系增加表的字段
      下面所有的操作都是在表建立后操作的,主要目的就是熟悉sql的约束,约束语句的万能公式   1,增加字段(student表中增加 姓名字段)   alter table 增加字段的表名 add 增加的字段名 增加字段的数据类型 alter table student add name varchar2(10);   &nb
  • Uploadify 3.2 参数属性、事件、方法函数详解 bijian1013 JavaScriptuploadify
    一.属性 属性名称 默认值 说明 auto true 设置为true当选择文件后就直接上传了，为false需要点击上传按钮才上传。 buttonClass ” 按钮样式 buttonCursor ‘hand’ 鼠标指针悬停在按钮上的样子 buttonImage null 浏览按钮的图片的路
  • 精通Oracle10编程SQL(16)使用LOB对象 bijian1013 oracle数据库plsql
    /* *使用LOB对象 */ --LOB(Large Object)是专门用于处理大对象的一种数据类型，其所存放的数据长度可以达到4G字节 --CLOB/NCLOB用于存储大批量字符数据，BLOB用于存储大批量二进制数据，而BFILE则存储着指向OS文件的指针 /* *综合实例 */ --建立表空间 --#指定区尺寸为128k,如不指定，区尺寸默认为64k CR
  • 【Resin一】Resin服务器部署web应用 bit1129 resin
    工作中，在Resin服务器上部署web应用，通常有如下三种方式：   配置多个web-app 配置多个http id 为每个应用配置一个propeties、xml以及sh脚本文件 配置多个web-app   在resin.xml中,可以为一个host配置多个web-app   <cluster id="app&q
  • red5简介及基础知识 白糖_ 基础
      简介   Red5的主要功能和Macromedia公司的FMS类似，提供基于Flash的流媒体服务的一款基于Java的开源流媒体服务器。它由Java语言编写，使用RTMP作为流媒体传输协议，这与FMS完全兼容。它具有流化FLV、MP3文件，实时录制客户端流为FLV文件，共享对象，实时视频播放、Remoting等功能。用Red5替换FMS后,客户端不用更改可正
  • angular.fromJson boyitech AngularJSAngularJS 官方APIAngularJS API
    angular.fromJson 描述: 把Json字符串转为对象 使用方法: angular.fromJson(json); 参数详解: Param Type Details json string JSON 字符串 返回值: 对象, 数组, 字符串 或者是一个数字 示例: <!DOCTYPE HTML> <h
  • java-颠倒一个句子中的词的顺序。比如： I am a student颠倒后变成：student a am I bylijinnan java
    public class ReverseWords { /** * 题目：颠倒一个句子中的词的顺序。比如： I am a student颠倒后变成：student a am I.词以空格分隔。 * 要求： * 1.实现速度最快,移动最少 * 2.不能使用String的方法如split,indexOf等等。 * 解答：两次翻转。 */ publ
  • web实时通讯 Chen.H Web浏览器socket脚本
    关于web实时通讯，做一些监控软件。 由web服务器组件从消息服务器订阅实时数据，并建立消息服务器到所述web服务器之间的连接，web浏览器利用从所述web服务器下载到web页面的客户端代理与web服务器组件之间的socket连接，建立web浏览器与web服务器之间的持久连接；利用所述客户端代理与web浏览器页面之间的信息交互实现页面本地更新，建立一条从消息服务器到web浏览器页面之间的消息通路
  • [基因与生物]远古生物的基因可以嫁接到现代生物基因组中吗? comsci 生物
          大家仅仅把我说的事情当作一个IT行业的笑话来听吧..没有其它更多的意思     如果我们把大自然看成是一位伟大的程序员,专门为地球上的生态系统编制基因代码,并创造出各种不同的生物来,那么6500万年前的程序员开发的代码,是否兼容现代派的程序员的代码和架构呢?   
  • oracle 外部表 daizj oracle外部表external tables
        oracle外部表是只允许只读访问，不能进行DML操作，不能创建索引，可以对外部表进行的查询，连接，排序，创建视图和创建同义词操作。 you can select, join, or sort external table data. You can also create views and synonyms for external tables. Ho
  • aop相关的概念及配置 daysinsun AOP
    切面(Aspect): 通常在目标方法执行前后需要执行的方法（如事务、日志、权限），这些方法我们封装到一个类里面，这个类就叫切面。 连接点（joinpoint） spring里面的连接点指需要切入的方法，通常这个joinpoint可以作为一个参数传入到切面的方法里面（非常有用的一个东西）。 通知（Advice） 通知就是切面里面方法的具体实现，分为前置、后置、最终、异常环
  • 初一上学期难记忆单词背诵第二课 dcj3sjt126com englishword
    middle 中间的，中级的 well 喔，那么；好吧 phone 电话，电话机 policeman 警察 ask 问 take 拿到；带到 address 地址 glad 高兴的，乐意的 why 为什么  China 中国 family 家庭 grandmother (外)祖母 grandfather (外)祖父 wife 妻子 husband 丈夫 da
  • Linux日志分析常用命令 dcj3sjt126com linuxlog
    1.查看文件内容 cat -n 显示行号 2.分页显示 more Enter 显示下一行 空格 显示下一页 F 显示下一屏 B 显示上一屏 less /get 查询"get"字符串并高亮显示 3.显示文件尾 tail -f 不退出持续显示 -n 显示文件最后n行 4.显示头文件 head -n 显示文件开始n行 5.内容排序 sort -n 按照
  • JSONP 原理分析 fantasy2005 JavaScriptjsonpjsonp 跨域
    转自 http://www.nowamagic.net/librarys/veda/detail/224 JavaScript是一种在Web开发中经常使用的前端动态脚本技术。在JavaScript中，有一个很重要的安全性限制，被称为“Same-Origin Policy”（同源策略）。这一策略对于JavaScript代码能够访问的页面内容做了很重要的限制，即JavaScript只能访问与包含它的
  • 使用connect by进行级联查询 234390216 oracle查询父子Connect by级联
    使用connect by进行级联查询          connect by可以用于级联查询，常用于对具有树状结构的记录查询某一节点的所有子孙节点或所有祖辈节点。          来看一个示例，现假设我们拥有一个菜单表t_menu，其中只有三个字段：
  • 一个不错的能将HTML表格导出为excel,pdf等的jquery插件 jackyrong jquery插件
    发现一个老外写的不错的jquery插件，可以实现将HTML 表格导出为excel,pdf等格式， 地址在： https://github.com/kayalshri/ 下面看个例子，实现导出表格到excel,pdf <html> <head> <title>Export html table to excel an
  • UI设计中我们为什么需要设计动效 lampcy UIUI设计
    关于Unity3D中的Shader的知识 首先先解释下Unity3D的Shader，Unity里面的Shaders是使用一种叫ShaderLab的语言编写的，它同微软的FX文件或者NVIDIA的CgFX有些类似。传统意义上的vertex shader和pixel shader还是使用标准的Cg/HLSL 编程语言编写的。因此Unity文档里面的Shader，都是指用ShaderLab编写的代码，
  • 如何禁止页面缓存 nannan408 htmljspcache
    禁止页面使用缓存~ ------------------------------------------------ jsp:页面no cache： response.setHeader("Pragma","No-cache"); response.setHeader("Cache-Control","no-cach
  • 以代码的方式管理quartz定时任务的暂停、重启、删除、添加等 Everyday都不同 定时任务管理spring-quartz
          【前言】在项目的管理功能中，对定时任务的管理有时会很常见。因为我们不能指望只在配置文件中配置好定时任务就行了，因为如果要控制定时任务的 “暂停” 呢？暂停之后又要在某个时间点 “重启” 该定时任务呢？或者说直接 “删除” 该定时任务呢？要改变某定时任务的触发时间呢？ “添加” 一个定时任务对于系统的使用者而言，是不太现实的，因为一个定时任务的处理逻辑他是不
  • EXT实例 tntxia ext
      （1） 增加一个按钮   JSP:   <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <% String path = request.getContextPath(); Stri
  • 数学学习在计算机研究领域的作用和重要性 xjnine Math
    最近一直有师弟师妹和朋友问我数学和研究的关系，研一要去学什么数学课。毕竟在清华，衡量一个研究生最重要的指标之一就是paper,而没有数学，是肯定上不了世界顶级的期刊和会议的，这在计算机学界尤其重要！你会发现，不论哪个领域有价值的东西，都一定离不开数学！在这样一个信息时代，当google已经让世界没有秘密的时候，一种卓越的数学思维，绝对可以成为你的核心竞争力.  无奈本人实在见地
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他