TypeScript學習
1.TypeScript的目標
TypeScript的目標是成爲JavaScript程序的靜態類型檢查器,就是一種代碼運行之前運行的靜態工具,並進行類型檢查以確保程序的類型正確。
2.安裝:
在終端中運行命令
npm install -g typescript
當然也可以使用cnpm或者yarn命令進行安裝
安裝成功後使用命令tsc -v進行查看安裝的typescript的版本
3.第一個TypeScript程序
新建一個文件名後綴爲.ts的文件
function greeter(person) {
return "Hello, " + person
}
let user = "俠客小飛"
document.body.innerHTML = greeter(user)
然後使用命令tsc 文件名.ts 就能發現自動生成了一個.js文件
怎麼查看呢?我們可以新建一個html文件引用這個js就可以啦!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>TypeScript學習</title>
</head>
<body>
<script src="01firstCode.js"></script>
</body>
</html>
運行結果
出現上面這個效果就說明你已經成功入門啦!快和我一起開始學習吧!
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文件才能看到運行結果的哦!