TypeScript学习01

TypeScript学习

1.TypeScript的目标

TypeScript的目标是成为JavaScript程序的静态类型检查器，就是一种代码运行之前运行的静态工具，并进行类型检查以确保程序的类型正确。

2.安装：

在终端中运行命令

npm install -g typescript

当然也可以使用cnpm或者yarn命令进行安装

安装成功后使用命令tsc -v进行查看安装的typescript的版本

image-20201110201612977

3.第一个TypeScript程序

新建一个文件名后缀为.ts的文件

function greeter(person) {
    return "Hello, " + person
}

let user = "侠客小飞"

document.body.innerHTML = greeter(user)

然后使用命令tsc 文件名.ts 就能发现自动生成了一个.js文件

image-20201110201816767

怎么查看呢？我们可以新建一个html文件引用这个js就可以啦！

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>TypeScript学习</title>
</head>
<body>
<script src="01firstCode.js"></script>
</body>
</html>

运行结果

image-20201110202213897

出现上面这个效果就说明你已经成功入门啦！快和我一起开始学习吧！

https://www.tslang.cn/docs/handbook/typescript-in-5-minutes.html

4.interface接口

在TypeScript中只要两个类型内部的结构兼容那么这两个类型就是兼容的，只要我们在实现接口的时候保证包含了接口要求的结构就可以，不需要像java中使用implements语句。

/*定义接口*/
interface Person{
    firstName:string;
    lastName:string;
}
/*方法调用接口*/
function greeter(person:Person){
    return "Hello,"+person.firstName+" "+person.lastName;
}
/*声明一个符合接口的对象*/
let user = {firstName:'马',lastName:'小飞'};
document.body.innerHTML = greeter(user)

5.class类

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

/*定义一个class类*/
class Student{
    fullName:string;
    constructor(public firstName,public middleInitial,public lastName){
        this.fullName = firstName+" "+middleInitial+" "+lastName;
    }
}
/*定义一个Person接口*/
interface Person{
    firstName:string;
    lastName:string;
}
/*定义一个问候方法*/
function greeter(person:Person){
    return "Hello,"+person.firstName+" "+person.lastName
}
let user = new Student("Ma","M.","Wenfei")
/*运行结果输入到网页的body标签中*/
document.body.innerHTML = greeter(user)

上面的接口和类文件也是需要和示例一样先tsc 文件名.ts生成js文件然后搭配html文件才能看到运行结果的哦！

posted @ 2020-11-11 10:34  侠客小飞  阅读(85)  评论(0)  编辑  收藏  举报