开始学习typescript

　　Angular由angular1已经转向angular2了，虽然正式版本还没有发布，但是也已经成型，也是因为学习angular2，里面的写法是typescript的写法，所以开始学习typescript。

以下是整理文档，与大家一起成长。

　快速开始

　　1.全局安装：

　　2.创建第一个.ts文件greeter.ts

function greeter(person) {
    return "hello, " + person;
}
var user = "刘娟娟";
document.body.innerHTML = greeter(user);

　　3.在命令行中键入：tsc greeter.ts会生成对应的.js文件：

　　4.类型的注释：

　　　使用typescript，我们可以给参数设置类型，在这里，我们设置为string类型，然后再编译一次，发现如果传入参数是非string的，编译的时候就会报出一个错误。　　　　

　　5.Interface：我们可以使用interface定义对象中的多个字段类型

interface Person{
    firstName:string;
    lastName:string;
}
function greeter(person:Person){
    return "hello, "+person.firstName+person.lastName;
}
var user={firstName:'刘',lastName:'娟娟'};
document.body.innerHTML=greeter(user);

　　6.下面我们使用class定义学生student这个类

class student{
    fullName:string;
    constructor(public firstName,public middleName,public lastName){
        this.fullName=firstName+middleName+lastName;
    }
}
interface Person{
    firstName:string;
    lastName:string;
}
function greeter(person:Person){
    return "hello, "+person.firstName+person.lastName;
}
var user=new student('刘','小','娟');
document.body.innerHTML=greeter(user);


让我们先编译一下，看看会生成怎样的js：

var student = (function () {
    function student(firstName, middleName, lastName) {
        this.firstName = firstName;
        this.middleName = middleName;
        this.lastName = lastName;
        this.fullName = firstName + middleName + lastName;
    }
    return student;
}());
function greeter(person) {
    return "hello, " + person.firstName + person.lastName;
}
var user = new student('刘', '小', '娟');
document.body.innerHTML = greeter(user);

然后我们创建greeter.html在页面中引入：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <script src="greeter.js"></script>
</body>
</html>

　　在浏览器查看一下：

　　　　Ok，完全正确，哇哦，感觉好厉害有没有~~

posted @ 2016-06-03 16:09 小妞妞yeah 阅读(165) 评论(0) 收藏举报

刷新页面返回顶部

开始学习typescript

快速开始

公告

　快速开始