TypeScript：5分钟上手创建一个简单的Web应用

一、练习TypeScript实例

1.1 在src目录里创建greeter.ts

greeter.ts文件代码

// https://www.tslang.cn/docs/handbook/typescript-in-5-minutes.html
// 格式化快捷键：https://blog.csdn.net/Dontla/article/details/130255699
function greeter(name: string) {
    return "hello, " + name;
}
let user = "Jane User";
document.body.innerHTML = greeter(user);

1.2 编译代码

方式一：在命令行上，运行TypeScript编译器
tsc ./src/greeter.ts

方式二：安装Code Runner插件，直接点击编辑器右上角的 run code按钮

二、使用greeter.js文件

2.1 greeter.js代码

"use strict";
// https://www.tslang.cn/docs/handbook/typescript-in-5-minutes.html
// 格式化快捷键：https://blog.csdn.net/Dontla/article/details/130255699
function greeter(name) {
    return "hello, " + name;
}
let user = "Jane User";
document.body.innerHTML = greeter(user);

2.2 greeter.html代码

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
        <title>TypeScript Greeter</title>
    </head>
   
    <body>
        
    </body>
    <script type="text/javascript" src="../../dist/greeter.js"></script>
</html>

三、 VSCode运行html页面

3.1 安装Live Server插件

点击扩展按钮，搜索Live server，点击Install按钮

3.2 运行greeter.html页面

选中greeter.html文件，鼠标右击，选择Open with Live Server选项

运行成功，编辑器右下角可以看到端口，例如：5500

运行结果

四、接口

使用接口来描述一个拥有firstName和lastName字段的对象。在TypeScript里，只在两个类型内部的结构兼容那么这两个类型就是兼容的。
这就允许我们在实现接口时候只要保证包含了接口要求的结构就可以，而不必明确地使用 implements语句。

编译greeter.ts代码

// https://www.tslang.cn/docs/handbook/typescript-in-5-minutes.html
// 格式化快捷键：https://blog.csdn.net/Dontla/article/details/130255699
// function greeter(name: string) {
//     return "hello, " + name;
// }
// let user = "Jane User";

// 接口
// 使用接口来描述一个拥有firstName和lastName字段的对象。 在TypeScript里，只在两个类型内部的结构兼容那么这两个类型就是兼容的。
// 这就允许我们在实现接口时候只要保证包含了接口要求的结构就可以，而不必明确地使用 implements语句。

interface Person {
    firstName: String;
    lastName: String;
}

function greeter(person: Person) {
    if (person == null) {
        return "hello"
    }
    return "hello , " + person.firstName + person.lastName
}

// let user: Person = {firstName: "国", lastName: "龙"}

let user = {firstName: "国", lastName: "龙"}
// document.body.innerHTML = greeter(user);

grerter.ts生成的greeter.js代码

"use strict";
// https://www.tslang.cn/docs/handbook/typescript-in-5-minutes.html
// 格式化快捷键：https://blog.csdn.net/Dontla/article/details/130255699
// function greeter(name: string) {
//     return "hello, " + name;
// }
// let user = "Jane User";
function greeter(person) {
    if (person == null) {
        return "hello";
    }
    return "hello , " + person.firstName + person.lastName;
}
// let user: Person = {firstName: "国", lastName: "龙"}
let user = { firstName: "国", lastName: "龙" };
document.body.innerHTML = greeter(user);

运行greeter.html页面

五、类

TypeScript支持JavaScript的新特性，比如支持基于类的面向对象编程。

创建一个Student类，它带有一个构造函数和一些公共字段。注意类和接口可以一起共作，程序员可以自行决定抽象的级别。

还要注意的是，在构造函数的参数上使用public等同于创建了同名的成员变量。

重新编译greeter.ts代码

// https://www.tslang.cn/docs/handbook/typescript-in-5-minutes.html
// 格式化快捷键：https://blog.csdn.net/Dontla/article/details/130255699
// function greeter(name: string) {
//     return "hello, " + name;
// }
// let user = "Jane User";

// 接口
// 使用接口来描述一个拥有firstName和lastName字段的对象。 在TypeScript里，只在两个类型内部的结构兼容那么这两个类型就是兼容的。
// 这就允许我们在实现接口时候只要保证包含了接口要求的结构就可以，而不必明确地使用 implements语句。

// interface Person {
//     firstName: String;
//     lastName: String;
// }

// function greeter(person: Person) {
//     if (person == null) {
//         return "hello"
//     }
//     return "hello , " + person.firstName + person.lastName
// }

// let user: Person = {firstName: "国", lastName: "龙"}

// let user = { firstName: "国", lastName: "龙" }
// document.body.innerHTML = greeter(user);

class Student {
    fullName: String;
    constructor(public firstName: string, public middleInitial: string, public lastName: string) {
        this.fullName = firstName + " " + middleInitial + " " + lastName;
    }
}

interface Person {
    firstName: string;
    lastName: string;
}

function greeter(person : Person) {
    return "Hello, " + person.firstName + " " + person.lastName;
}

let user = new Student("Jane", "M.", "User");

document.body.innerHTML = greeter(user);

greeter.ts 生成的greeter.js代码

"use strict";
// https://www.tslang.cn/docs/handbook/typescript-in-5-minutes.html
// 格式化快捷键：https://blog.csdn.net/Dontla/article/details/130255699
// function greeter(name: string) {
//     return "hello, " + name;
// }
// let user = "Jane User";
// 接口
// 使用接口来描述一个拥有firstName和lastName字段的对象。 在TypeScript里，只在两个类型内部的结构兼容那么这两个类型就是兼容的。
// 这就允许我们在实现接口时候只要保证包含了接口要求的结构就可以，而不必明确地使用 implements语句。
// interface Person {
//     firstName: String;
//     lastName: String;
// }
// function greeter(person: Person) {
//     if (person == null) {
//         return "hello"
//     }
//     return "hello , " + person.firstName + person.lastName
// }
// let user: Person = {firstName: "国", lastName: "龙"}
// let user = { firstName: "国", lastName: "龙" }
// document.body.innerHTML = greeter(user);
class Student {
    constructor(firstName, middleInitial, lastName) {
        this.firstName = firstName;
        this.middleInitial = middleInitial;
        this.lastName = lastName;
        this.fullName = firstName + " " + middleInitial + " " + lastName;
    }
}
function greeter(person) {
    return "Hello, " + person.firstName + " " + person.lastName;
}
let user = new Student("Jane", "M.", "User");
document.body.innerHTML = greeter(user);

greeter.html代码

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
        <title>TypeScript Greeter</title>
    </head>
   
    <body>
        
    </body>
    <script type="text/javascript" src="../../dist/greeter.js"></script>
</html>

六、LearnTypeScript 源码

点击查看LearnTypeScript 源码