TypeScript快速入门

最新推荐文章于 2024-05-26 18:34:42 发布

宏微

最新推荐文章于 2024-05-26 18:34:42 发布

阅读量1.5w

点赞数 4

分类专栏： web前端文章标签： typescript

web前端专栏收录该内容

13 篇文章 0 订阅

订阅专栏

TypeScript简介

TypeScript是一种由微软开发的自由和开源的编程语言。它是JavaScript的一个超集，而且本质上向这个语言添加了可选的静态类型和基于类的面向对象编程。

TypeScript的优势

支持ES6规范
强大的IDE支持,类型检查、语法提示
Angular2的开发语言

TypeScript开发环境

安装TypeScript，安装node.js之后，使用命令：cnpm install -g typescript

TypeScript语法

字符串新特性

多行字符串
字符串模板

自动拆分字符串

function test(template, name, age) {
    console.log(template);
    console.log(name);
    console.log(age);
}

var myname = "james curry";

var getAge = function () {
    return 18;
}

test `hello my name is ${myname}, i'm ${getAge()}`

参数新特性

参数类型：在参数名称后面使用冒号来指定参数的类型
默认参数：在参数声明后面用等号来指定参数的默认值
可选参数：在方法的参数声明后面用问号来标明此参数为可选参数

参数类型

    var myname: string = "james";
    // myname = 13; //报错
    var alias = "xixi";
    // alias = 12; //报错,类型推断机制

    var str : any = "curry";
    str = 12;

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

    function test(name:string): string {//声明返回值类型
        return ""; 
    }

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

默认参数

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

    test("xx", "yy", "zz");
    test("mm","nn");

可选参数

    function test(a: string, b?: string, c: string = "default") {//b参数为可选参数,不能在必选参数前面,不用时是undefined
        console.log(a);
        console.log(b);
        console.log(c);
    } 

    test("mm");

函数新特性

Rest and Spread 操作符：用来声明任意数量的方法参数
generator函数：控制函数的执行过程，手工暂停和恢复代码执行
destructuring析构表达式：通过表达式将对象或数组拆解成任意数量的变量

Rest and Spread 操作符：

function fun(...args) { //声明任意数量的参数
    args.forEach(function (arg) {
        console.log(arg);
    })
}

fun("a", "b", "c");
fun(1,2,3,4);

第二种用法，这种方法目前tepescript还不支持，但是生成的js不报错

    function fun(a,b,c) {
        console.log(a);
        console.log(b);
        console.log(c);
    }

    var args = [1, 2];
    fun(...args);

    var args2 = [7, 8, 9, 10];
    fun(...args2);

generator函数：

    function* getStockPrice(stock){ //通过*号声明generator函数
        while(true){
          yield Math.random()*100;
        }
    }

    var priceGenertor = getStockPrice("HW");
    var limitPrice = 15;
    var price = 100;
    while(price > limitPrice){
       price = priceGenertor.next().value;
       console.log(`the generator return ${price}`);
    }

    console.log(`buying at ${price}`);

destructuring析构表达式：

    function getStock() {
        return {
            code: "ali",
            price: {
                startPrice: 200,
                endPrice:300
            },
            other:"mm"
        }
    }

    var { code:codec, price:{endPrice} } = getStock(); //本地变量与函数变量名称相同或者声明别名
    console.log(codec); 
    console.log(endPrice);

    //针对数组的析构表达式
    var arr = [1, 2, 3, 4];
    var [, , num3, num4] = arr;
    console.log(num3);
    console.log(num4);

    //与可变参数一起使用
    var arr = [1, 2, 3, 4];
    var [num1,num2,...others] = arr;
    console.log(num1);
    console.log(num2);
    console.log(others);

    var arr = [1, 2, 3, 4];
    function test([num1, num2, ...others]) {
        console.log(num1);
        console.log(num2);
        console.log(others);
    }
    test(arr);

表达式与循环

箭头表达式：用来声明匿名函数，消除传统匿名函数的this指针问题
forEach(),for in和 for of

箭头表达式

    var arr = [1, 2, 3, 4, 5];
    console.log(arr.filter(value => value%2 == 0));

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

    var stock1 = new getStock("ali");

    function getStock2(name: string) {
        this.name = name;
        setInterval(() => {
            console.log("name is " + this.name);
        },1000);
    }

    var stock2 = new getStock2("hw");

for循环

    var arr = [1, 2, 3, 4];
    arr.desc = "four number";
    arr.forEach(value => console.log(value));

    for (var n in arr) {
        console.log(arr[n]);
    }

    //for of循环，可被打断
    for (var n of arr) {
        if (n > 2) break;
        console.log(n);
    }

面向对象特性

类：类是TypeScript的核心。类的定义，构造函数constructor，类的继承extends。
泛型：参数化的类型，一般用来限制集合的内容。
接口：用来建立某种代码约定，使得其它开发者在调用某个方法或创建新的类时必须遵循接口所定义的代码约定。
模块（Module）：模块可以帮助开发者将代码分割为可重用的单元。开发者可以自己决定将模块中的哪些资源（类、方法、变量）暴露出去供外部使用，哪些资源只在模块内使用。
注解：注解为程序的元素（类、方法、变量）加上更直观更明了的说明，这些说明信息与程序的业务逻辑无关，而是供指定的工具或框架使用的。
类型定义文件（*d.ts):类型定义文件用来帮助开发者在TypeScript中使用已有的JavaScript的工具包。如：JQuery。类型定义文件从github项目DefinitelyTyped中获取。安装github中typings项目工具。
```
interface Iperson{
    name: string;
    age: number;
}
class Person{
    constructor(public config: Iperson) {

    }
}

var p1 = new Person({
    name: "zhangsan",
    age:22
});
```

模块：
a.ts

    //导入a.ts中变量
    export  var prop1;
    var prop2;
    export  function  fun1();
    function  fun2(){

    }
    export  class Clazz1{

    }
    class Clazz2{

    }

b.ts

    import  {prop1, fun1, Clazz1} from "./a"; //导入a.ts中变量、方法、类
    console.log(prop1);
    fun1();
    new Clazz1();       
    export function  fun3(){

    }