# TypeScript基础学习

By [fant4sy_hx](https://paragraph.com/@fant4syhx) · 2022-03-20

---

在windows上安装ts太过困难，各种环境不太好搞定。所以还是选择用mac进行学习，方便快捷。

    npm install -g typescript
    tsc -v
    

![安装成功](https://storage.googleapis.com/papyrus_images/4d8b1bb882d48ede5e0ddb9298abc39d88e9c5e11426e8fef066f5a16256a9fe.png)

安装成功

直接就安装好了，开始使用。

创建一个greeter.ts文件并在其中写入以下内容。

    function greeter(person) {
        return "Hello, " + person;
    }
    
    let user = "Jane User";
    
    document.body.innerHTML = greeter(user);
    

大概意思是定义一个函数，person为形式参数，然后将“Jane User”赋值给user。

这个_document.body.innerHTML_不知道是干啥的东西，百度查了一下说是**向一个web页面加入html内容。**

写入成功后，运行TypeScript编译器：

    tsc greeter.ts
    

输出结果为一个`greeter.js`文件，它包含了和输入文件中相同的JavsScript代码。

![](https://storage.googleapis.com/papyrus_images/c12dd4d87d9be081f9fb1eabdfd1d5cf323021506f666d98474a0f75addc9842.png)

### 接口

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

    interface Person {
        firstName: string;
        lastName: string;
    }
    
    function greeter(person: Person) {
        return "Hello, " + person.firstName + " " + person.lastName;
    }
    
    let user = { firstName: "Jane", lastName: "User" };
    
    document.body.innerHTML = greeter(user);
    

### 类

最后，让我们使用类来改写这个例子。 TypeScript支持JavaScript的新特性，比如支持基于类的面向对象编程。

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

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

    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");
    
    document.body.innerHTML = greeter(user);

---

*Originally published on [fant4sy_hx](https://paragraph.com/@fant4syhx/typescript)*