Typescript学习记录

typescript是什么？

javascript的超集。
遵循ES6语法，已经实现了大部分的ES6语法。
实现了基于面向对象的特性
typescript的运行需要编译器，编译成js语法才能运行在浏览器
可以使用在线的compiler进行实时编译，在实际使用中需要使用tsc编译器

一些ES6常用语法和typescript语法

对字符串操作

es5-字符串拼接-使用+的形式进行拼接

var string = "hello"+
"markdown"

es6-字符串拼接-使用``即可完成，并且可以在字符串中添加表达式即字符串模板

 var string = `hello
 markdown`

var str = ",very good"
var fun = function(){return "javascript"} var string = `hello markdown ${str},${fun()}`

es6的字符串拆分-根据传入的变量分割字符串

function test(template,arg1,arg2){
console.log("template") console.log("arg1"); console.log("arg2"); } var age1 = "a1" var age1 = "a2" test`hello,I like it${age1},dislike ${age2}`

答应出来的结果会是一个数组和2字符串，数组是被拆分的“hello,I like it”，“dislike“。

typescript是一种强类型的语言所以可以定义变量的类型

ts有一种类型推断机制可以根据上一次使用的情况推断出类型

 var name: string = "zheng dong";
 var age = 13; age = true;

上面的age=true会报错，因为age根据第一次使用的情况推断出了它是属于number型的。

函数中也可以使用类型

function test() : void{
    return "I love cl";
}
test()

上面的函数会报错，因为他的返回值定义的类型是void

自定义类型

 class Person{
    name:string;
    age:number;
}
var zhengdong: Person = new Person(); zhengdong.name = "zhengdong";

参数默认值和可选参数

function test(a: stirng,b?: string,c: string = "zhengdong"){    
}
test("xxx")

上面代码中第二个参数使用了?的方式实现了参数可选传不传入

传入任意数量的参数-使用...的方式

    function test(...arg){
        arg.forEach(function(arg){ console.log(arg); }) } test(1,2,3,4,5,6,7,8,9,10)

析构函数-方便的快速初始化值

    function getStock(){
        return { code:"IBM", price:{ price1: 200, price2: 400 } } } var { code: codex,price:{price1,price2} } = getStock(); console.log(codex);console.log(price1);

箭头表达式

    var sum  = (arg1,age2)=>arg1+arg2

其实箭头表达式就是一个匿名的回调函数。如果参数只有一个可以省略括号**（），如果函数体多行就要加上花括号{}**并且加上return

var sum  = arg1=>{
return arg1+arg2;
}

其中箭头表达式更重要是地方是修复了ES5中this指正指向的问题

    function getStock(name:string){
        this.name = name; setInterval(function(){ console.log(this.name); },1000) }

上面的打印是undefind的。因ES5中的this指针是指向调用者，所以当前this指向了setInterval，下面使用ES6的箭头函数可以修复这个问题

    function getStock(name:string){
        this.name = name; setInterval(=>{ console.log(this.name); },1000) }

es6新增加的for of循环对比一下forEach

    var test = [1,2,3,4,5]; test.no = "l love cl"; test.forEach(v=>console.log(v))

上面会输出数组的内容省去了属性，并且在循环当中break不了循环

在来看看for in循环

var test = [1,2,3,4,5]; for(var i in test){ console.log(i); }

上面循环出来的是数组的key并不是他的值，并且会把属性也打印出来并且能使用break。

来看看es6的循环for of

var test = “l love cl”；
test.no = "no"
for(var v of test){ console.log(v); }

上面的例子中会将test的字符串打印出来并且是逐个的遍历。使用for of可以break并且循环的就是数组的值并不是key，也不会循环test的属性

typescirpt作为一个javascript的超集并且是强类型面向对象的，当然有类的概念。下面来写一个person类吧

    var Person{
        construtor(public name:string){
            
        }
        eat(){
            console.log(this.name);
        }
    }
    var p1 = new Person("zhengdong"); p1.eat(); var p2 = new Person("dongzheng"); p2.eat();

上面实现了一个类并且在类的外面实例化了2个对象。

来实现ts中的继承

    var Person{
        construtor(public name:string){
          
        }
        eat(){
            console.log(this.name);
        }
    }

 class Employee extend Person{ construtor(public name:string,code:string){ super(name); } work(){ super.eat(); } }

上面的Employee继承了Person类，在构造函数里面使用了super，这个方法是调用父类的构造函数这是ts中必须规定的，然后在work方法中调用父类的eat方法也是使用super.ea（）的方式

泛型，一般拿来限制集合的内容

var workers: Arrar<Person>= [];
workers[0] = new Person(“zhengdong”);
workers[1] = 2;

workers[1]会报错因为我们在类型规定的时候就写了类型Array数组里面的内容是Person的。

接口interface

    interface Animal{
        eat();
    }
class Sheep implements Animal{ eat(){ console.log("i eat"); } }

使用interface定义一个接口，使用implements继承一个接口，接口也可以用来定义一个参数或者属性可以使用var v:Animal的方式实现可以不写implements

如何在ts中使用原有js文件，例如Jquery 这里我们使用到一个ts的**类型定义文件(*.d.ts)**它其实就是一个模块

大家可以到这个仓库里面寻找现有的d.ts文件https://github.com/DefinitelyTyped/DefinitelyTyped

如果觉得找的很麻烦可以使用它的管理工具https://github.com/typings/typings这个仓库有使用说明

Thank you for your watch！(:

Typescript学习记录

Typescript学习记录

猜你喜欢