初步了解 typescript 的基本使用

1. 怀揣着对typescript这个javascript的超集的长期的神秘情感，今天终于有机会来揭开它神秘的面纱啦，说完就要行动，Let's Go !

2. 安装typescript

cnpm install -g typescript

3.简单测试ts函数

（1）greeter.ts编写

/**
 * @param {person string}
 */
function greeter(person: string){
    return 'Hello,' + person;
}

let user = 'Jane User';

document.body.innerHTML = greeter(user);

（2）编译：tsc greeter.ts

（3）编译成功后的js脚本：

/**
 * @param {person string}
 */
function greeter(person) {
    return 'Hello,' + person;
}
var user = 'Jane User';
document.body.innerHTML = greeter(user);

4. ts接口：interface

/**
 * greeter.ts
 */
interface Person {
    firstName: string;
    lastName: string;
}

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

let user = { firstName: "Jane", lastName: "User" };


/**
 * 编译后 greeter.js
 */

function greeter(person) {
    return "Hello, " + person.firstName + " " + person.lastName;
}
var user = { firstName: "Jane", lastName: "User" };

5. ts类：class

/**
 * greeter.ts
 */
class Student {
    fullName: string;
    constructor(public firstName, public middleInitial, public lastName) {
        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");

greeter(user);


/**
 * 编译后 greeter.js
 */

var Student = /** @class */ (function () {
    function Student(firstName, middleInitial, lastName) {
        this.firstName = firstName;
        this.middleInitial = middleInitial;
        this.lastName = lastName;
        this.fullName = firstName + " " + middleInitial + " " + lastName;
    }
    return Student;
}());
function greeter(person) {
    return "Hello, " + person.firstName + " " + person.lastName;
}
var user = new Student("Jane", "M.", "User");
greeter(user);

6. 最后在页面中里面引入编译好的js文件

<!DOCTYPE html>
<html>
    <head><title>TypeScript Greeter</title></head>
    <body>
        <script src="greeter.js"></script>
    </body>
</html>

初步了解 typescript 的基本使用

猜你喜欢