TypeScript学习笔记（第一天）------创建简单的web应用

最新推荐文章于 2024-07-07 17:10:02 发布

weixin_34238633

最新推荐文章于 2024-07-07 17:10:02 发布

阅读量170

点赞数

文章标签： javascript python ViewUI

原文链接：https://my.oschina.net/yj1993/blog/1592423

版权

2019独角兽企业重金招聘Python工程师标准>>>

资料源： https://typescript.bootcss.com/tutorials/typescript-in-5-minutes.html

创建简单的web应用

1.安装：cnpm install -g typescript

2.第一个TypeScript文件

(1)创建：greeter.ts

(2)编译：在ts文件所在的根目录下面用tsc greeter.ts 编译。编译结果是生成一个js文件

(3)类型注解：一种轻量级的为函数或变量添加约束的方式

(4)接口：关键字interface声明

(5)类：关键字class声明

    1)类和接口可以一起工作，程序员自行决定抽象的级别；

    2)在构造函数的参数上使用public等同于创建了同名的成员变量

(6)运行web应用：在html文件中直接引入编译生成的js文件即可

test.html

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


</body>
</html>

greeter.ts

/**
 * Created by yangjiao on 2017/12/20.
 */
// 添加类
class Student {
    fullName: string;
    constructor(public firstName: string, public middleInicail: string, public lastName: string){
        this.fullName = firstName + ' ' + middleInicail + '' + lastName;
    }
}

// 添加接口
interface Person {
    firstName: string,
    lastName: string
}

function greeter(person: Person){   // 类型注解 : string
    return 'Hello ' + person.firstName + person.lastName;
}
let user = new Student('hello', 'world', 'middle');
console.log(greeter(user));

greeter.js

/**
 * Created by yangjiao on 2017/12/20.
 */
// 添加类
var Student = /** @class */ (function () {
    function Student(firstName, middleInicail, lastName) {
        this.firstName = firstName;
        this.middleInicail = middleInicail;
        this.lastName = lastName;
        this.fullName = firstName + ' ' + middleInicail + '' + lastName;
    }
    return Student;
}());
function greeter(person) {
    return 'Hello ' + person.firstName + person.lastName;
}
var user = new Student('hello', 'world', 'middle');
console.log(greeter(user));

转载于:https://my.oschina.net/yj1993/blog/1592423