我是打字稿的新手,我正在为WebGl编写一个小型的原型框架.我正在重构我的项目,并遇到了一些问题,如何组织我的项目,因为(模块和命名空间)方法似乎都有严重的缺点.

这篇文章不是关于如何使用这些模式,而是如何克服这些模式带来的问题.

现状:使用名称空间

来自C#,这似乎是最自然的方式.每个类/模块都获得它适当的命名空间,我在tsconfig.json中提供"outFile"参数,因此所有内容都连接成一个大文件.编译后,我将根命名空间作为全局对象.依赖项没有内置到项目中,所以你手动必须在你的html中提供所需的*.js文件(不好)

示例文件

namespace Cross.Eye {
    export class SpriteFont {   
        //code omitted
    }    
}

示例用法(通过在html中提供js文件,您必须确保将Cross命名空间加载到全局命名空间中)

namespace Examples {
    export class _01_BasicQuad {
        context: Cross.Eye.Context;
        shader: Cross.Eye.ShaderProgram;

        //code omitted
    }
}

优点

• 如果你是从C#/ Java出来的话,可以直截了当地使用
• 独立的文件名 - 重命名文件不会破坏您的代码.
• 易于重构:IDE可以轻松地重命名命名空间/类,并且将通过代码一致地应用更改.
• 方便:向项目添加类就像添加文件并在所需的命名空间中声明它一样简单.

缺点

对于大多数项目,我们建议使用外部模块并使用命名空间进行快速演示和移植旧的JavaScript代码.

来自https://basarat.gitbooks.io/typescript/content/docs/project/namespaces.html

• 根命名空间始终是(？)一个全局对象(坏)
• 不能(？)与browserify或webpack等工具一起使用,这对于将lib与其依赖项捆绑在一起是必不可少的,或者在实际使用lib时将自定义代码与lib捆绑在一起.
• 如果您计划发布npm模块,那么做法很糟糕

现有技术(？):模块

Typescript支持ES6模块,它们是新的和有光泽的,每个人似乎都认为它们是要走的路.这个想法似乎是每个文件都是一个模块,通过在import语句中提供文件,你可以非常明确地定义你的依赖关系,这使得捆绑工具很容易有效地打包你的代码.我大多数每个文件有一个类似乎与dhte模块模式不兼容.

这是重构后的文件结构:

此外,我在每个文件夹中都有一个index.ts文件,因此我可以导入其所有类 import * as FolderModule from "./folder"

export * from "./AggregateLoader";
export * from "./ImageLoader";
export * from "./TiledLoader";
export * from "./XhrLoaders";
export * from "./XmlSpriteFontLoader";

示例文件 - 我认为问题在这里变得清晰可见.. …

我是新手,并且遇到了一个可能是非常常见的问题.我正在尝试的东西是将打字稿编译成javascript,为它创建一个源图,然后运行uglify.我想有一个ugliyfied以及非uglified js的源图.

我想要实现的是以下文件结构:

framework.js
framework.js.map < this won't work
framework.min.js
framework.min.js.map

这是我的一项任务:

var gulp = require('gulp'),
uglify = require('gulp-uglify')
ts = require("gulp-typescript")
sourcemaps = require('gulp-sourcemaps')
rename = require('gulp-rename');

var tsProject = ts.createProject("tsconfig.json");


gulp.task('typescript', function(){
    tsProject.src()
    .pipe(sourcemaps.init())
    .pipe(tsProject()).js
    .pipe(sourcemaps.write('.')) // Write sourcemap for non-minified version
    .pipe(gulp.dest("dist"))
    .pipe(uglify()) // Code will fail here 
    .pipe(rename({suffix:'.min'}))
    .pipe(sourcemaps.write('.')) // Write sourcemap for minified version.
    .pipe(gulp.dest("dist"));
});

gulp.task('default', ['typescript']);

如您所见,我正在运行sourcemaps.write()两次以获取两个不同的文件.这给了我一个错误

tream.js:74                                                                        
  throw er; // Unhandled stream error in pipe.                                  
  ^ GulpUglifyError: unable to minify JavaScript                                       
at …

我收到一个奇怪的DI错误.这是来自swagger-codegen的一段自动生成的代码 - 我无法改变它.我正在尝试注入这项服务.但是当我跑步时,ng build --aot我得到Can't resolve all parameters...DI错误.

我试图完全删除脚趾@Optional参数,它似乎工作.所以这似乎是罪魁祸首.

我的问题:如果参数不可选,为什么我会收到错误？如果我想实际注入这个参数,我也会感兴趣,因为它是一个原始类型.

@Injectable()
export class MyApi {
    protected basePath = 'https://localhost/';
    public defaultHeaders : Headers = new Headers();

    constructor(protected http: Http, @Optional() basePath: string) {
        if (basePath) {
            this.basePath = basePath;
        }
    }
}

注意:@Nildari和@PierreDuc的答案可能是大多数人可能正在寻找的答案.但是,我正在寻找一种解决方案,它不会改变原始实现,因为它是自动生成的.

我将EntityFramework 6.1.3与 CodeFirst 一起用于 Asp.Net 应用程序。我有一个现有表（“Users”），我试图在其中添加外键“GroupId”。这是类（带有 //new 的所有内容都是上次迁移后所做的更改）

[Table("Users")]
public class User
{
    [Key]
    [Column("PK_USER")]
    public int Id { get; set; }
    [Column("Username")]
    public string Username { get; set; }
    [Column("Name")]
    public string Name { get; set; }
    [Column("Password")]
    public string Password { get; set; }
    [Column("Firstname")]
    public string Firstname { get; set; }
    [Column("Lastname")]
    public string Lastname { get; set; }
    [Column("LastLogin")]
    public DateTime? LastLogin { get; set; }
    [Column("Department")]
    public string Department { get; …

我是OpenGL的新手,甚至是WebGL的新手.我正在尝试使用alpha通道绘制纹理四边形.但是我无法正确混合.

这是我正在寻找的结果

这就是WebGL结果的样子

正如您所看到的,骰子边缘有一种白色轮廓,原始图像中没有.

这就是我在WebGL中进行混合的方法

        gl.clearColor(0.5, 0.5, 0.5, 1);
        gl.disable(gl.DEPTH_TEST);
        gl.enable(gl.BLEND);
        gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);

这是我的片段着色器:

precision mediump float;

varying vec2 vUV;

uniform sampler2D texture;

void main(void) {
    vec4 frag = texture2D(texture, vUV);
    gl_FragColor = frag;
}

知道为什么会这样吗？我不会创建mipmap,BTW.

我想使用路径映射直接引用与我的angular应用程序位于同一目录结构中的库。

结构体：

mycompany-mylib/
src/
tsconfig.json

我已将以下内容添加到我的 tsconfig.json

{      
  "compilerOptions": {
    ...
    "baseUrl": ".",
    "paths": {
        "@mycompany/mylib": ["mycompany-mylib/lib/src/public_api"],
    }
  }
}

此配置似乎是正确的，并且Typescript可以解析这些路径，因为我在Visual Studio Code中没有出现错误并获得了完整的智能感知。

例如：

import { UserClientModule } from '@mycompany/mylib'

但是，当我运行ng serve或ng serve --aot遇到错误时，找不到该模块（我的AngularCLI版本为1.7.4）：

ERROR in src/app/core/components/user-profile/user-profile.component.ts(5,43): error TS2307: Cannot find module '@mycompany/mylib'.

该技术应该有效，因为有数篇博客文章和github问题都在引用它。我只是看不到我在做什么错。我可以通过提供别名配置来在webpack中解决此问题，但是由于webpack.config.js角度cli中没有，所以我无法做到这一点。