Cocos Creator TS代碼智能提示

Cocos Creator支持JS和TS兩種腳本，在這裏我強烈建議使用TS來做腳本開發。有幾個比較重要的原因：

• TS本身是JS的超集，完全兼容js
• TS有靜態語言特性，代碼易於閱讀和維護
• 近乎完美的智能提示，而JS的代碼提示幾乎沒有

在Creator裏面寫TS，要實現代碼智能提示，需要手動添加申明文件，步驟如下：
點擊菜單 開發者->VS Code 工作流->更新VS Code智能提示數據。

點這個菜單，實際上就是把引擎目錄下的模板文件creator.d.ts拷貝到了你的項目目錄下，這個模板文件是引擎開發組寫好了放在引擎目錄下的，每個版本都有對應的實現。

在Creator的新版本預發佈的階段，通常這個聲明文件很不完善，這就導致很多接口提示沒有，寫代碼就會爆紅，對於有強迫症的同學來說，可能總是會想辦法把爆紅的提示去掉。

找到引擎安裝目錄，打開文件夾resources\utils\api，可以看到有一個creator.d.ts文件，這個文件就是操作Creator編輯器的時候拷貝到項目目錄下的。我們只要修改了這個文件，所有項目都可以更新。

修改智能提示有兩種方式，一種是修改引擎的creator.d.ts，另一種是自己新建一個自己的聲明文件，例如我的捕魚裏面就是自己定義了一個global.d.ts。

在1.93版本的時候，我把shader相關的隱藏接口全部寫在這個聲明文件裏面，代碼如下

declare module cc {
    /**
     * 實現WebGL program的類，用來做shader編程
     */
    export class GLProgram{
        /**
         * 實現WebGL program的類，用來做shader編程
         */
        constructor();
        /**
         * 使用頂點shader字符串和片段shader字符串初始化cc.GLProgram
         * @param vertShaderStr 頂點shader字符串
         * @param fragShaderStr 片段shader字符串
         */
        initWithString(vertShaderStr: string, fragShaderStr: string): boolean;

        /**
         * It will add a new attribute to the shader
         * @param attributeName 
         * @param index 
         */
        addAttribute(attributeName: number, index: number);
        /**
         * Initializes the cc.GLProgram with a vertex and fragment with string
         * @param vertShaderStr 
         * @param fragShaderStr 
         */
        initWithVertexShaderByteArray(vertShaderStr: string, fragShaderStr: string):boolean;

        /**
         * 連接 glprogram
         */
        link(): boolean;
        
        /**
         * 這個函數創建4個統一變量即uniform 
         *  cc.macro.UNIFORM_PMATRIX
         *  cc.macro.UNIFORM_MVMATRIX
         *  cc.macro.UNIFORM_MVPMATRIX
         *  cc.macro.UNIFORM_SAMPLER
        */
        updateUniforms();

        /**
         * it will call gl.useProgram()
         */
        use();

        /**
         * calls retrieves the named uniform location for this shader program.
         * @param name 
         */
        getUniformLocationForName(name: string): number;

        /**
         * calls glUniform1f only if the values are different than the previous call for this same shader program.
         * @param location 
         * @param f1 
         */
        setUniformLocationWith1f(location, f1);

        /**
         * calls glUniform2f only if the values are different than the previous call for this same shader program.
         * @param location 
         * @param f1 
         * @param f2 
         */
        setUniformLocationWith2f(location,f1,f2)
    }

    export class GLProgramState{

        static getOrCreateWithGLProgram(program:GLProgram):any;
    }
}

寫法也很簡單，在Cocos Creator中，基本上都是基於模塊和命名空間的，基本沒有單獨的變量聲明。使用關鍵字declare來聲明即可。

同名的變量會被無衝突合併，這樣是爲什麼我在項目裏面定義一個global.d.ts，在裏面聲明瞭cc這個命名空間，沒有和creator.d.ts裏面的聲明衝突的原因。

新版的Cocos Creator有很多聲明缺失，比如2.1.1裏面關於3d和材質的代碼，基本上沒有提示。
後面我將會更新一版2.1.1的智能提示文件，方便大家開發。

捕魚代碼

https://github.com/fylz1125/CCFish

關注我的微信

掃碼關注我的微信【Cocos Creator研究筆記】，每天更新。