2020-09-16 TypeScript学习第一弹

最新推荐文章于 2025-07-18 10:12:22 发布

原创最新推荐文章于 2025-07-18 10:12:22 发布 · 156 阅读

CC 4.0 BY-SA版权

本文介绍了如何使用ts-node快速启动TypeScript项目，以及如何与webpack集成。重点讲解了接口的继承和类的访问修饰符，包括private和protected的用法。示例代码展示了在子类中访问父类成员的限制，强调了类型系统的严格性。

Typescript学习

参考文档：官方文档

1.起步安装ts-node 一步编译及运行，不会生成js文件

首先全局安装ts-node

npm i ts-node -g

执行ts-node命令即可

ts-node hello.ts

2.与webpack集成

      {
        test: /\.(ts|tsx)?$/,
        use: [{
          loader: "ts-loader",
          options: {
            // disable type checker - we will use it in fork plugin
            transpileOnly: true
          }
        }],
        exclude: /node_modules/
      }

接口

1.继承接口
和类一样，接口也可以相互继承。这让我们能够从一个接口里复制成员到另一个接口里，可以更灵活地将接口分割到可重用的模块里。

interface Person{
    name:string,
    age:number
}

interface Student extends Person{
    studentId:string
}

interface Kiri extends Student{
    team:string
}

let kiri=<Kiri>{}

// 实际上编辑器就已经在提示类型了
kiri.name='kiri'
kiri.studentId='233'  

console.log(kiri);

2.类的private和protected变量，来看下面一段代码

class Person{
    private name:string;
    protected gender:string;
    age:number;
    constructor(age:number){
        this.age=age
    }
}
class Men extends Person{
    constructor(gender:string,name:string){
        super(gender)
    }
    getDevice(){
        console.log(this.gender,this.name);
    }
}
let hello=new Men('kiri','233')
console.log(hello.getDevice(),hello.gender);

错误

当成员被标记成private时，它就不能在声明它的类的外部访问。
所以上面代码会报错Property 'name' is private and only accessible within class 'Person'
因为我在Person的子类Men的成员方法中调用了Person的私有属性name
protected修饰符与private修饰符的行为很相似，但有一点不同，protected成员在派生类中仍然可以访问。所以我可以在Men中访问protected属性gender，但是依然不能够在类外调用，比如实例属性是无法访问的