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文件才能看到運行結果的哦!

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章