TypeScript 是 JavaScript 的超集（超集：包含關係，比如 C++ 是 C 的超集，TypeScript 是由 JavaScript 發展而來）。
TypeScript 擁有着靜態類型系統，方便開發。
JavaScript
let k = 1;TypeScript
let k: number = 1;因爲我們聲明瞭類型，所以如果再給 k 賦字符串類型就會報錯，這種類型提示在開發中能避免很多問題。
關於函數類型
JavaScript
function add (x, y) {
return x + y;
}
console.log(add(1, 2));假如我只想讓傳入的變量類型爲數字，那麼在 TypeScript 中就能方便的聲明。
TypeScript
function add (x: number, y: number) {
return x + y;
}
console.log(add(1, 2));
對函數返回值也加以類型聲明
TypeScript
function add (x: number, y: number): number {
return x + y;
}面向對象
不同於傳統的 JavaScript 使用基於原型的繼承，TypeScript 使用基於類的面向對象的方式編程。
經典示例（動物->狗）
JavaScript
// 只要是動物就需要進食，擁有 eat 方法
function Animal() {}
Animal.prototype.eat = function() {console.log("eat");};
// 定義狗，‘繼承’ Animal
function Dog() {}
Dog.prototype = Object.create(Animal.prototype);
Dog.prototype.constructor = Dog;
// 狗會叫，擁有 bark 方法
Dog.prototype.bark = function () {console.log("bark");}
// new 一個小狗
let miniDog = new Dog();
// 它‘繼承’了兩個方法
miniDog.eat();
miniDog.bark();我們看看 TypeScript 的寫法
TypeScript
class Animal {
// public 代表公有 void 爲無返回值
public eat (): void {
console.log("eat");
}
}
// extends 繼承
class Dog extends Animal {
// 它有 bark 方法
public bark (): void {
console.log("bark");
}
}
// new 一個小狗
let miniDog = new Dog();
miniDog.eat();
miniDog.bark();
很顯然，面向對象的寫法易於理解。
公有私有受保護
我們看到了在類的方法前寫着 public 公有的，這樣的修飾使得其子類可以訪問，如果改成私有呢？
當成員被標記成 private時，它就不能在聲明它的類的外部訪問。
再說說受保護修飾。
protected 修飾符與 private 修飾符的行爲很相似。但有一點不同 protected 成員在派生類中仍然可以訪問。
CocosCreator中應用
在 VSCode 中 TypeScript 的智能提示會使得開發效率直線上升！
屬性聲明
在 CocosCreator 中，我們聲明節點時：
JavaScript
properties: {
// 簡寫
player: cc.Node,
// 完整
score: {
default: null,
type: cc.Node
},
// 節點數組
players: [cc.Node]
},TypeScript
// 簡寫
@property(cc.Node) player: cc.Node = null;
// 完整
@property({
type: cc.Node
}) score: cc.Node = null;
// 節點數組
@property([cc.Node]) players: cc.Node[] = [];
方法提示
JavaScript
TypeScript
模塊引用
不同於 JavaScript 的 require。在 TypeScript 中使用 import 與 export。
示例 A 引用 B 調用其 onLoad 方法
B.ts
------
const {ccclass, property} = cc._decorator;
@ccclass
export default class B extends cc.Component {
public onLoad (): void {
console.log("B onLoad");
}
}
------
A.ts
------
const {ccclass, property} = cc._decorator;
import B from "./B";
@ccclass
export default class A extends cc.Component {
@property(B) b: B = null;
public onLoad (): void {
this.b.onLoad();
}
}
------接口
不同於 JavaScript ，TypeScript 的核心原則之一是對值所具有的結構進行類型檢查。接口的作用就是爲這些類型命名。
舉個例子
interface Person {
name: string,
age: number
}
let kuokuo: Person = {
name: "kuokuo",
age : 1
}泛型
工程中，我們不僅要創建一致的定義良好的 API，同時也要考慮可重用性。是否支持多種數據類型就是其指標之一。
我們定一個 temp 函數，返回其輸入。
TypeScript
// 我們不知其類型
function temp (s) {
return s;
}
// 我們不能保證其輸出類型與輸入一致
function temp (s: any): any {
return s;
}
// 利用泛型限定類型必須一致
function temp<T> (s: T): T {
return s;
}結語
TypeScript 的知識遠不止這些，我只是希望通過這篇文章能讓朋友們輕鬆上手 TypeScript，有所收穫。
這裏是更具體的 TypeScript 文檔
https://www.tslang.cn/docs/home.html
這裏是 CocosCreator 中對 TypeScript 的相關說明
https://docs.cocos.com/creator/manual/zh/scripting/typescript.html?h=type
原文首發KUOKUO的小網站
www.kuokuo666.com 哦~
O(∩_∩)O~~
感謝KUOKUO衆享在假日還爲大家提供這麼優秀的教程，願我們在前進程的道路上一起砥礪前行，共同成長！
Creator星球遊戲開發社區
長按二維碼，關注我們！
