How to config cppan.yml AND CMakeLists.txt ? with static lib & cxx compiler /MT

I check-out the project “tessaract” and “leptonica” to local disk. But it use dynamic link (dll) by default. I need a static link, so I make some changes on the file “cppan.yml” AND “CMakeLists.txt”.

 

cppan.yml:

local_settings:
    generator: Visual Studio 14 2015
    use_shared_libs: false
    silent: false
    copy_import_libs: true
    short_local_names: true
    build:
        cxx_compiler_flags: /MT
        cxx_compiler_flags_debug: /MTd
        c_flags: /W0
        cxx_flags: /W0
        toolset: v140_xp
        type: library
        library_type: static
        use_shared_libs: false
        silent: false
        storage_dir: D:/.cppan/

projects:
    libleptonica:
        static_only: true
        shared_only: false
        type: lib
        export_all_symbols: true

...

 

I’v set v140_xp,but it isn’t effective. Then change “CMakeLists.txt” like this:

...

set(CMAKE_CXX_FLAGS_DEBUG "/MTd /Zi /Ob0 /Od /RTC1" CACHE STRING "" FORCE)
set(CMAKE_CXX_FLAGS_RELEASE "/MT /O2 /Ob2 /DNDEBUG" CACHE STRING ""FORCE)
set(CMAKE_GENERATOR_TOOLSET "v140_xp" CACHE STRING "Platform Toolset" FORCE)

...

 

TypeScript/Angular2调用原生JS的桥接文件的编写

src: https://www.jianshu.com/p/e87e596c3280

许多开发者在使用Angular2或者TypeScript开发的时候不可避免地要用到许多原生的JavaScript函数变量等,但是如何使用TypeScript调用已经封装好的JavaScript是许多开发者心中的疑惑。


如何使用TypeScript调用JavaScript呢?


流行的第三方JavaScript库

使用Angular2开发的童鞋可能会注意到,Angular2需要引用进来的许多的库文件中总会有.d.ts后缀名的文件,这个文件就是一个TypeScript调用JavaScript的桥接文件,TypeScript需要通过这个文件来识别JavaScript中的内容。
对于许多流行的第三方JavaScript库,GitHub上已经有一个开源项目编译好了他们的.d.ts桥接文件,直接下载下来便可以直接使用了。
项目地址是:https://github.com/DefinitelyTyped/DefinitelyTyped


快速生成桥接文件

但是有些JavaScript是我们开发人员自己编写的,该如何调用呢?TypeScript有一个快速生成.d.ts桥接文件的方法。

  1. 将你要生成桥接文件的.js文件修改后缀名为.ts。因为TypeScript是JavaScript的超集,所以JavaScript代码完全可以在TypeScript的文件中执行(就像C++的文件能够跑C语言一样)。
  2. 首先确保你的电脑上已经安装了TypeScript,打开“终端”(Windows下是命令行),cd到你刚刚修改后缀名的文件所在的文件夹,运行命令:
    tsc –declaration 刚刚修改后缀名的文件名(包括后缀名)。
    例如:

    tsc --declaration myJavaScript.ts
    

之后便可以看到TypeScript自动生成的.d.ts的桥接文件了。
如果在生成过程中报错,建议将要生成的文件中的JavaScript代码中实现部分全部删掉,只保留接口即可,反正生成的.d.ts文件就是一个变量和函数等的桥接文件。


手动编写桥接文件

如果通过TypeScript自动生成的.d.ts桥接文件不合适怎么办?(很正常,我从来没生成正常过,因为我的JavaScript代码是封装到一个单例里面的,TypeScript不认识单例…)
这个时候就需要我们自己手动来编写.d.ts的桥接文件了。
TypeScript官方也给出了如何编写桥接文件:https://www.tslang.cn/docs/handbook/declaration-files/introduction.html

注:.d.ts文件放在TypeScript调用JavaScript中国年是桥接文件,放在单纯的TypeScript中便是TypeScript的声明文件)

TypeScript官方给的文档很不好理解(至少我看了半天的时间才搞明白)
下面我重点说一下应该如何编写.d.ts桥接文件(只适用于TypeScript和JavaScript桥接)。

桥接文件中分为模块,接口,类,函数,变量等。所有的最外层都需要关键字declare来声明。

模块 的桥接

模块在TypeScript可以为JavaScript中的单例,匿名函数,全局的对象,全局的库等包含多个属性多个接口方法的东西,具体在何种情况应该声明为模块还主要是看个人的喜好。模块中可以声明任何东西。
单纯的模块:

declare module myModule { ... }

模块的嵌套,在一个模块中声明另一个模块可以使用以下两种方式:

declare module aModule, bModule { ... }

等于

declare module aModule {
    module bModule {
        ...
    }
    ...
}
类 的桥接

所有声明在桥接文件中的类的名称需要和JavaScript中对应的类的名称保持一致。
单纯的类的声明:

declare class myClass { ... }

类的继承:

declare class mySubClass extends myClass { ... }

如何调用:

let tempClass = new mySubClass();

模块中的类:

declare module myModule {
    class myModuleClass { ... }
}
接口 的桥接

TypeScript单独的提供了一个接口的声明,接口类似于类,不过类是要new出来的,而接口是可以直接调用的,类似于全局的函数。
单纯的接口:

declare interface myInterface { ... }

模块中的接口:

declare module myModule {
    class myModuleClass { ... }

    interface myModuleInterface { ... }
}
变量 的桥接

全局变量
全局变量需要声明变量类型,变量的名称需要和JavaScript中对应的变量的名称一致。

declare var myVariable: string;

模块中的变量:

declare module myModule {
    var myModuleVariable: string;

    class myModuleClass { ... }

    interface myModuleInterface { ... }
}

类中的变量属性,变量属性的名称需要和JavaScript中对应的类的变量属性的名称一致。

declare class myClass {
    name: string;
    id  : number;
}

接口中的变量:

declare interface myInterface {
     myInterfaceVariable: string;
}
函数 的桥接

单纯的函数的声明,函数的名称需要和JavaScript中对应的函数的名称一致,参数数量也应该一致,参数名称可以不一样:

declare function myfunction(param: string): void;

模块中的方法,方法的名称需要和JavaScript中对应的模块的方法的名称一致,参数数量也应该一致,参数名称可以不一样:

declare module myModule {
    var myModuleVariable: string;

    class myModuleClass { ... }

    interface myModuleInterface { ... }

    function myModuleFunction(param: string): void;
}

接口中的方法:

declare interface myInterface {
     myInterfaceVariable: string;

     myInterfaceFunction(param: string): void;
}

回调函数的桥接注意:
因为TypeScript中this的作用域同JavaScript中this的作用域不同,TypeScript中默认对函数声明了this的作用域。
所以我们在调用回调函数的时候必须使用=>来调用回调函数:

callbackFunction((data) => {
    // 回调函数的内容
})
桥接文件的举例

这是我之前写过的一个自己的单例模式的JavaScript文件的桥接文件,仅作参考

JavaScript代码
tempJS.js:

function inherit(subClass, superClass) {
    function F() {};
    F.prototype = superClass.prototype;
    subClass.prototype = new F();
    subClass.prototype.constructor = subClass.constructor;
}

function User() {
    this.userID   = Number;
    this.userName = String;
    this.userICON = String;
    this.isFriend = Boolean;
}

function Member() {
    User.call(this);
    this.remarkName = String;
}
inherit(Member, User);

var TempModule = (function () {
    var instantiated;
    function init() {
        return { 
            userInfo:User;
            test: function (callback) { ... },
            login: function (loginName, password) { ... }
        };
    }
    return {
        shareTemp: function () {
            if (!instantiated) {
                instantiated = init();
            }
            return instantiated;
        }
    };
})();

对应的桥接文件
tempJS.d.ts:

declare class User {
    userID   : number;
    userName : string;
    userICON : string;
    isFriend : boolean;
}

declare class Member extends User {
    remarkName : string;
}

declare module TempModule {
    interface shareTemp {
        userInfo: User;

        test(callback:Function): void;
        login(loginName: string, password: string): void;
    }
}

调用的文件:

let tempUser = new User();
tempUser.userID = 1;
tempUser.userName = "Shmily";
TempModule.shareTemp.userInfo = tempUser;
TempModule.shareTemp.test((data) => {
    // 回调函数内容
});
TempModule.shareTemp.login(tempUser.userName, "1234");
如何调用呢?

老式的方法是在需要用到的地方写:

/// <reference path="你的.d.ts的文件路径" />

但是这样很麻烦。不过在Angular2项目中我们有了一个简单的方法,在项目中的tsconfig.json文件中这样写:

{  
    "compilerOptions": {
        "target": "es5",
        "module": "commonjs",
        "moduleResolution": "node",
        "sourceMap": true,
        "emitDecoratorMetadata": true,
        "experimentalDecorators": true,
        "lib": [ "es2015", "dom" ],
        "noImplicitAny": true,
        "suppressImplicitAnyIndexErrors": true,
        "types": ["./library/ArrowIM/ArrowIM.d.ts"]
}}

只需要在types中添加你想要引用的.d.ts文件,Angular2会在加载项目的时候自动去加载,这样就再也不用写那么多的///了。

Angular5 Application running issues in IE11 (IE11 Angular5 发生错误SCRIPT5022: Exception thrown and not caught 未捕获的异常)

src:
https://stackoverflow.com/questions/45353619/angular4-application-running-issues-in-ie11

 

 

I am building a Angular5 project using Angular CLI (1.7.3). It runs perfectly in Chrome (Version 59.0.3071.115) and firefox(54.0.1) but when I tried to use IE11 (Verison 11.0.9600.18738) nothings shows up and when I open the develper mode in IE, it shows me the following Error:

SCRIPT5022: Exception thrown and not caught
File: polyfills.bundle.js, Line: 829, Column: 34

And the detailed Error message is following:

enter image description here

 

==> 解决方案:

un commented the following line of codes like this:

/** IE9, IE10 and IE11 requires all of the following polyfills. **/
import 'core-js/es6/symbol';
import 'core-js/es6/object';
import 'core-js/es6/function';
import 'core-js/es6/parse-int';
import 'core-js/es6/parse-float';
import 'core-js/es6/number';
import 'core-js/es6/math';
import 'core-js/es6/string';
import 'core-js/es6/date';
import 'core-js/es6/array';
import 'core-js/es6/regexp';
import 'core-js/es6/map';
import 'core-js/es6/set';