首页 » 技术分享 » TS3

TS3

 
let [first, ...rest] = [1, 2, 3, 4];
console.log(first); // outputs 1
console.log(rest); // outputs [ 2, 3, 4 ]

let [first] = [1, 2, 3, 4];
console.log(first); // outputs 1
----------------------------------------
对象解构:
let o = {
    a: "foo",
    b: 12,
    c: "bar"
};
let { a, b } = o;


let { a, ...passthrough } = o;
let total = passthrough.b + passthrough.c.length;
---------------------------------------
属性重命名:
let { a: newName1, b: newName2 } = o; 
等价于:
let newName1 = o.a;
let newName2 = o.b;

这里的冒号不是指示类型的。 如果你想指定它的类型
let {a, b}: {a: string, b: number} = o;
let { a, b = 1001 } = o; //默认值

----------------------------------------
函数申明解构:
type C = { a: string, b?: number }
function f(  { a, b }: C  ): void {
}

function f(  { a, b = 1 } = { a: "", b: 0 }  ): void {
}
f();   // ok, default to { a: "", b: 0 }
-----------------------------------------------------------
interface 类型检查器不会去检查属性的顺序,编译器只会检查那些必需的属性是否存在,可以比接口规定的属性多。
interface X{
    readonly a?:string;  //一些对象属性只能在对象刚刚创建的时候修改其值
    b?:number;
}
function ff(x:X):{a:string,b:number}{} //函数返回值规定类型
--------------------------------------------
只读属性:一些对象属性只能在对象刚刚创建的时候修改其值
interface Point {
    readonly x: number;
    readonly y: number;
}
let p1: Point = { x: 10, y: 20 };
p1.x = 5; // error!

ReadonlyArray<T>类型,把所有可变方法去掉了,因此可以确保数组创建后再也不能被修改。
let a: number[] = [1, 2, 3, 4];
let ro: ReadonlyArray<number> = a;
ro[0] = 12; // error!
ro.push(5); // error!
ro.length = 100; // error!
a = ro; // error!
上面代码的最后一行,可以看到就算把整个ReadonlyArray赋值到一个普通数组也是不可以的。 但是你可以用类型断言重写:a = ro as number[];

最简单判断该用readonly还是const的方法是看要把它做为变量使用还是做为一个属性。 做为变量使用的话用 const,若做为属性则使用readonly。
----------------------------------
类静态部分与实例部分的区别:
类是具有两个类型的:静态部分的类型和实例的类型,类实现了一个接口时,只能够做到对其实例部分进行类型检查。 constructor存在于类的静态部分,所以不能检查。因此要检验类的构造函数不能用继承的方法,而是直接操作类的静态部分。 
interface ClockConstructor {  //用来检验构造函数
    new (hour: number,s:string);
}
class DigitalClock{//校验构造函数不能用继承的方式,   也不再类的上面做操作,
    constructor(h: number) { }
    tick() {
        console.log("beep beep");
    }
}
var dd = new DigitalClock(2);//new 之前做检验
function createClock(ctor: ClockConstructor) {  //而是在传参数的时候做校验
    return new ctor(1);
}
let digital = createClock(DigitalClock, 12, 17);
----------------------------------------------------------------
接口继承类: 接口同样会继承到类的private和protected成员。接口里面的成员变量不能有访问修饰符、不能赋值、方法不能有访问修饰符和实现。

类里面没有方法的重载。有方法的重写。 子类必须调用super函数, super只能在构造函数中用,

private只能在本类访问,不能在子类访问。protected可以在子类中访问。构造函数也可以被标记成protected,只能在子类实例化。
----------------------------------------------------------------
参数属性:
class Animal {
    constructor(private name: string) { }
}
构造函数里使用private name: string参数来创建和初始化name成员。 
----------------------------------------------------------------
接口里面方法没有{}。抽象类里面方法要有{}。抽象类中的抽象方法必须在子类实现。类没有构造函数也可以有实例。静态属性和方法在类内部也是通过类.访问。
--------------------------------
class A{
    static abc = "abc";
    def = "def";
    gret(){
        console.log(A.abc);
    }
}

let a = new A();
console.log(a.gret());//abc

let a1 : typeof A = A;
a1.abc = "abc1";

let a3 = new a1();
a3.gret();//abc1
--------------------------------
js的参数是可传可不传的,ts的参数是一定要传的,函数的可选参数如果出现在最后面不传即可,如果出现在中间要传undefined才使用默认值。
--------------------------------
thisvar suits = 4;
let deck = {
    suits: 1,
    createCardPicker: function() {
        var suits = 3;
        return function() {
            var suits = 2;
            return {suit: this.suits};  //return 出去,不带着当前this,而是出去之后的this,
        }
    }
}

let cardPicker = deck.createCardPicker();
let pickedCard = cardPicker();

console.log( pickedCard.suit ); //4

--------------------------
var suits = 4;
let deck = {
    suits: 1,
    createCardPicker: function() {
        var suits = 3;
        return () => {
            var suits = 2;
            return {suit: this};
        }
    }
}

let cardPicker = deck.createCardPicker();
let pickedCard = cardPicker();
console.log( pickedCard.suit ); //1,箭头函数会绑定里面的this,出去之后也带着这个this,不会改变。箭头函数能保存函数创建时的 this值,而不是调用时的值

interface Card {
    suit: string;
    a:number;
}
interface Deck {
    suits: string;
    aa:number;
    createCardPicker(this: Deck): (a:number) => Card;  //这个函数的返回值是一个函数
}
interface D{
    suits:number;
}
var suits = "suitssuits";

let deck : Deck = {  //这个Deck校验deck,
    suits: "hearts",
    aa:333,
    createCardPicker: function(this: D) { //校验调用createCardPicker方法的对象,
        if(suits){
            return (a:number) => {
                return {suit: this.suits,a:123};  //"hearts"
            }
        }else{
            return function(a:number) {
                return {suit: this.suits,a:123};    //suitssuits
            }
        }
    }
}

let a = {s : deckDeck.createCardPicker,suits:333333334444444};
let s = a.s()
console.log( s(1).suit );


let cardPicker = deck.createCardPicker();
let pickedCard = cardPicker(2);
alert( pickedCard.suit );

--------------------------------
class Foo {
  x = 3;
  print() {
    console.log('x is ' + this.x);
  }
}

var f = new Foo();
f.print(); // Prints 'x is 3' as expected

// Use the class method in an object literal
var z = { x: 10, p: f.print };
z.p(); // Prints 'x is 10'

var p = z.p;
p(); // Prints 'x is undefined'
--------------------------------
泛型:function loggingIdentity<T extends Lengthwise>(arg: T): T {}

枚举:  通过字符串可以找到整数,通过整数也可以找到字符串。它包含双向映射(name -> value)和(value -> name)
enum FileAccess {
    None,
    Read    = 1,
    Write   = 2,
    ReadWrite  = 9,
    G = 123,
}
var FileAccess;
(function (FileAccess) {
    FileAccess[FileAccess["None"] = 0] = "None";
    FileAccess[FileAccess["Read"] = 1] = "Read";
    FileAccess[FileAccess["Write"] = 2] = "Write";
    FileAccess[FileAccess["ReadWrite"] = 9] = "ReadWrite";
    FileAccess[FileAccess["G"] = 123] = "G";
})(FileAccess || (FileAccess = {}));

------------------------------------
类型兼容性:
interface i{
    f:number;
    s();
}
var f = {
    f:1,
    s:function () {},
    ss:22,
};
function ff(x:i){ // f的属性比i多,只要能够全部赋值就可以了,所可以比目标对象的属性多
    x.s();
}
ff(f);
----------------
函数赋值:
let x = (a: number) => 0;
let y = (b: number, s: string) => 0;
y = x; // OK,y函数要能够把x函数使用起来,y的参数要多于x
x = y; // Error

解析js:
var x = function (x) { return "x"; };
var y = function (x, y) { return '1'; };
x = y;
y = x;
------
let items = [1, 2, 3];
items.forEach((item, index, array) => console.log(item));
items.forEach((item) => console.log(item));
------
let x = () => ({name: 'Alice'});
let y = () => ({name: 'Alice', location: 'Seattle'});
x = y; // OK
y = x; // Error

转载自原文链接, 如需删除请联系管理员。

原文链接:TS3,转载请注明来源!

0