前提:安裝了node.js環(huán)境(新版本自帶npm)
第一步:打開cmd莉擒,安裝ts
npm install -g typescript
-g :代表全局安裝
查看是否安裝成功
tsc -v
第二步:在指定的目錄下驰后,使用記事本創(chuàng)建一個main.ts文件淹遵,在文件中輸入如下代碼
function greeter(person) {
return "Hello, " + person;
}
let user = "Jane User";
alert(greeter(user));
第三步:使用cmd,到達main.ts文件所在目錄(win 使用cd)編譯main.ts文件
tsc main.ts
編譯成功之后就可以看到對應生成的main.js文件
第四步:在與main.js的相同目錄下創(chuàng)建main.html文件
<html>
<head>
<meta charset="UTF-8">
<title>TS</title>
<script src="main.js"></script>
</head>
<body>
</body>
</head>
第五步:使用瀏覽器打開main.html户辱,網(wǎng)頁成功彈出Hello, Jane User
注意:
使用以下代碼替換第二步的代碼(包含接口和類的知識恨狈,與java類似)疏哗,查看js文件和ts文件的代碼區(qū)別
interface Person { /*接口*/
firstName: string;
lastName: string;
}
class Student { /*類*/
fullName: string; /*屬性*/
constructor(public firstName, public lastName) { /*構造函數(shù)*/
this.fullName = firstName + " " + lastName;
}
sayHello(){ /*行為方法*/
console.log("Hello, (fullName)"+this.fullName);
}
}
function greeter(person : Person) { /*函數(shù)*/
return "Hello, " + person.firstName + " " + person.lastName;
}
let user = new Student("Jane", "User"); /*創(chuàng)建實例*/
user.sayHello();
console.log(greeter(user));
編譯ts文件后的js文件代碼:
var Student = /** @class */ (function () {
function Student(firstName, lastName) {
this.firstName = firstName;
this.lastName = lastName;
this.fullName = firstName + " " + lastName;
}
Student.prototype.sayHello = function () {
console.log("Hello, (fullName)" + this.fullName);
};
return Student;
}());
function greeter(person) {
return "Hello, " + person.firstName + " " + person.lastName;
}
var user = new Student("Jane", "User"); /*創(chuàng)建實例*/
user.sayHello();
console.log(greeter(user));