Typescript

176 阅读2分钟

做个笔记而已啦!!

  • 第一步:全局安装npm install -g typescript
  • 第二步:在Vscode编译器中建立hello.ts文件。内容如下:
function greeter(person:string) {
    return "Hello, " + person;
}

let user = "Jane User";

document.body.innerHTML = greeter(user);

在定义参数的时候就给出想对应的类型(string):如果传参的时候user不是一个字符串,就会抛出错误;

greeter.ts(7,26): error TS2345: Argument of type 'number[]' is not assignable to parameter of type 'string'.
  • 第三步:在全局的node.js环境下运行tsc hello.ts命令。将ts代码编译成js代码!!!

接口的定义(interface)

  • 第一步:在定义接口的时候,首先对接口的数据类型进行一个定义;
  • 第二步:让我们开发这个示例应用。这里我们使用接口来描述一个拥有firstName和lastName字段的对象。 在TypeScript里,只在两个类型内部的结构兼容那么这两个类型就是兼容的。 这就允许我们在实现接口时候只要保证包含了接口要求的结构就可以,而不必明确地使用 implements语句。
  • 第三步:简单代码如下:
 interface Personer{
    firstName:string,
    lastName:string
}

function Namer(Personer){
    return Personer.firstName+Personer.lastName;
}
var user={firstName:'chen',lastName:'song'}
Namer(user)

  • 运行tsc hello.ts 命令得到如下js代码:
function Namer(Personer) {
    return Personer.firstName + Personer.lastName;
}
var user = { firstName: 'chen', lastName: 'song' };
Namer(user);

类的定义(class)

定义:最后,让我们使用类来改写这个例子。 TypeScript支持JavaScript的新特性,比如支持基于类的面向对象编程。 让我们创建一个Student类,它带有一个构造函数和一些公共字段。 注意类和接口可以一起共作,程序员可以自行决定抽象的级别。 还要注意的是,在构造函数的参数上使用public等同于创建了同名的成员变量。

lass 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);