TypeScript

自动拆分字符串

function test(templage, name, age) {
    console.log(templage);// ["hello,my name is ", ",i am ", ""]
    console.log(name);// Aaayang
    console.log(age);// 18
}

var myname = 'Aaayang';
var getAge = function() {
    return 18;
};
test`hello,my name is ${myname},i am ${getAge()}`;

参数类型

// 参数类型:在参数名称后面使用冒号来指定参数的类型
var myname: string = "Aaayang";
myname = "Bbb";

// 类型推断机制
var alias = "Jiangjun";
// 推断这里应该是字符串,赋值数字会报错
alias = 'a';

// 任意类型
var aaa: any = "Doudou";
// aaa赋值啥都行
aaa = 13;

var age: number = 13;
var man: boolean = true;

// 不需要任何返回值
function test() :void {

}
// 要返回string
function test2() :string {
    return "";
}

function test3(name: string) :string {
    return "";
}
// 只能传字符串
test3('aaa');

// 自定义类型
class Person {
    name: string;
    age: number;
}
var zhangsan: Person = new Person();
zhangsan.name = "zhangsan";
zhangsan.age = 18;

参数默认值

var myname: string = "Aaayang";

// 注意带默认值的参数要声明在后面
function test(a:string, b:string, c:string = 'Doudou') {
    console.log(a);
    console.log(b);
    console.log(c);
}

// 正常只有传3个参数才不会报错,第三个参数有默认值,这里传2个也行
test('111', '222', '333');
test('xxx', 'yyy');

可选参数

var myname: string = "Aaayang";

// 注意可选参数必须声明在必选参数的后面
function test(a:string, b?:string, c:string = 'Doudou') {
    console.log(a);
    console.log(b);
    console.log(c);
}

// 正常只有传3个参数才不会报错,第三个参数有默认值,这里传2个也行
test('xxx');// xxx,undefined,Doudou
test('aaa', 'bbb');// aaa,bbb,Doudou
test('111', '222', '333');// 111,222,333

Rest and Spread

// 把任意数量参数转为数组
function func1(...args) {
    args.forEach(function(arg) {
        console.log(arg);
    });
}

func1('a', 'b', 'c', 'd');
// 把任意数量参数转为数组
function func1(a, b, c) {
    console.log(a);
    console.log(b);
    console.log(c);
}

var args = [1, 2];
func1(...args);// 1,2,undefined

var args2 = [6, 7, 8, 9];// 6,7,8
func1(...args2);

Generator方法

function* doSomething() {
    console.log("start");

    yield;

    console.log("finish");
}
var func1 = doSomething();
func1.next();// start
func1.next();// finish
yield写法研究
function* getStockPrice(stock) {
    while(true) {
        yield Math.random() * 100;// ??
    }
}

var priceGenerator = getStockPrice("IBM");
var limitPrice = 15;

var price = 100;

while(price > limitPrice) {
    price = priceGenerator.next().value;
    console.log(`the generator return ${price}`);
}
console.log(`buying at ${price}`);

解构赋值

function getStock() {
    return {
        code: "IBM",
        price: 100
    }
}

// var stock = getStock();
// var code = stock.code;
// var price = stock.price;

var {code, price} = getStock();
var {code: codex, price} = getStock();
console.log(code);// IBM
console.log(codex);// IBM
console.log(price);

箭头函数

// 单行
var sum = (arg1, arg2) => arg1 + arg2;
console.log(sum(1, 2));

// 多行
var sum2 = (arg1, arg2) => {
    var result = arg1 + arg2;
    console.log(result);
}
sum2(3, 4);

var sum3 = () => {
    console.log('无参数的');
}
sum3();

var sum4 = arg1 => {
    console.log(`只有一个参数也是不需要写括号的${arg1}`);
}
sum4('Aaayang');

var myArray = [1, 2, 3, 4, 5];
var aaa = myArray.filter(item => item % 2 == 0);
console.log(aaa);
箭头函数中的this
// 正常写
function getStock(name:string) {
    this.name = name;
    setInterval(function() {
        console.log("my name is " + this.name);
    }, 1000);
}
var stock = new getStock('Aaayang');// my name is
// 箭头函数写法
function getStock2(name:string) {
    this.name = name;
    setInterval(() => {
        console.log("my name is " + this.name);
    }, 1000);
}
var stock2 = new getStock2('Aaayang');// my name is Aaayang

forEach, for in, for of

var myArray = [1, 2, 3, 4];
myArray.desc = "four number";// tsc编译会报错,便宜JS是可以执行的

// forEach会忽略desc,不能用break跳出循环
myArray.forEach(value => console.log(value));

// desc属性也会被循环
for(var n in myArray) {
    // console.log(n);// 0, 1, 2, 3, desc
    console.log(myArray[n]);// 1, 2, 3, 4, four number
}

// 可以break,forEach一样不会循环desc
for(var n of myArray) {
    if(n > 2) break;
    console.log(n);
}

class Person {
    name;// 默认public
    // private name;// 私有的
    // protected name;// 内部和子类可以访问
    eat() {
        console.log("i am eating");
    }
}

var p1 = new Person();
p1.name = "Aaayang";
p1.eat();

var p2 = new Person();
p2.name = "Jiangjun";
p2.eat();
构造函数
class Person {
    /*constructor(public name: string) {
    }*/
    // 和上面等价
    constructor(name: string) {
        this.name = name;
    }
    name;
    eat() {
        console.log(this.name);
    }
}

var p1 = new Person('Aaayang');// 必须传参
p1.name = "Aaayang";
p1.eat();
继承
class Person {
    constructor(public name: string) {
        console.log('haha');
    }
    name;
    eat() {
        console.log('i am eating');
    }
}

class Employee extends Person {
    constructor(name: string, code: string) {
        super(name);// 子类的构造函数必须调用父类的构造函数
        console.log('xixi');
        this.code = code;
    }

    code: string;
    work() {
        super().eat();// 调用方法
        this.doWork();
    }
    private doWork() {// e1.doWork()不让直接干活,规定先吃饭再干活
        console.log('do work');
    }
}

var e1 = new Employee("Aaayang", "1");
e1.work();

泛型

...

接口

interface IPerson {
    name: string;
    age: number;
}

class Person {
    // 接口:作为方法的参数的类型声明
    constructor(public config: IPerson) {

    }
}

var p1 = new Person({
    name: "Aaayang",
    age: 18
});
interface Animal {
    eat();
}

class Sheep implements Animal {
    eat() {
        // 类必须要实现接口对应的方法
        console.log('i eating grass');
    }
}

模块

a.ts

export var prop1;

export function func1() {

}

export class Class1 {
    
}

index.ts

import {prop1, func1, Class1} from "./a";

注解

类型定义文件

// 在TypeScript中使用已有的工具包
// from github "DefinitelyTyped"
*.d.ts
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 214,444评论 6 496
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 91,421评论 3 389
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 160,036评论 0 349
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 57,363评论 1 288
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 66,460评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,502评论 1 292
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,511评论 3 412
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,280评论 0 270
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,736评论 1 307
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,014评论 2 328
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,190评论 1 342
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,848评论 5 338
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,531评论 3 322
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,159评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,411评论 1 268
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,067评论 2 365
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,078评论 2 352

推荐阅读更多精彩内容