我正在更新Angular 1.5.8应用程序的构建过程,以允许在Typescript上进行开发.
在使用Grunt过度复杂的经验之后,当前的构建过程很简单,只使用Gulp和Browserify来构建两个包:my-lib.js和my-app.js.这样,库比我的应用程序代码更大但更稳定,不需要经常编译,应用程序域代码的编译只需要0.1秒.我很高兴 - 以及其他开发人员.
现在我们期待迁移到Angular 2.0并希望在Typescript中开始开发,但我不确定如何将它集成到构建过程中,甚至是如何实现它的最佳方法:是否应该优先使用tsc只是将Typescript编译成Javascript并让Browserify处理依赖项？或者我应该使用它tsc作为我的主要构建工具并让它解决依赖关系,创建映射文件并制作捆绑包？
无论打字稿和咕嘟咕嘟的发展非常快,我不能为自己的单证(此使用发现文档1,2).我很感激有经验的人员的反馈,他们也在研究这些技术的最新版本.
我有以下示例:
class Uncle {
constructor(public name : string) { }
talk() {
return "Hello my name is " + name;
}
}
let p : Uncle = new Uncle("Jo");
console.log(p.talk());
对于某些变量名称,typescript(现在版本2.1.4)不会抱怨它们没有在您的程序中定义(在方法talk中,名称正在使用而没有这个.).name就是其中之一.
如果我将变量重命名为,比方说,firstName编译器正确地抱怨......
错误TS2663:找不到名称'firstName'.你的意思是实例成员'this.firstName'吗？
同样适用于例如窗口,显然假设存在.
我的问题是:
我正在将Web应用程序从普通Javascript迁移到Typescript,并使用--outFile编译器选项和/// <reference path="..."/>指令将所有单独的文件编译为单个文件.
这很好,因为我可以将我的代码分成多个文件,而不必担心浏览器支持import.
我使用的一个库是color-js,它在一个名为的文件中有类型定义color.d.ts.
要使用普通的Javascript,我会执行以下操作:
[...]
<script src="scripts/color-js/color.js"></script>
<script src="main.js"></script>
[...]
let Color = net.brehaut.Color;
[...]
在运行时,这也适用于Typescript,但在编译期间,我得到如下错误:
scripts/cue.ts(4,13): error TS2304: Cannot find name 'net'.
scripts/cue.ts(25,18): error TS2304: Cannot find name 'Color'.
scripts/cue.ts(26,16): error TS2304: Cannot find name 'Color'.`
scripts/cue.ts(27,19): error TS2304: Cannot find name 'Color'.
scripts/main.ts(839,52): error TS2304: Cannot find name 'Color'.
scripts/main.ts(1019,20): error TS2304: Cannot find name 'Color'.
scripts/main.ts(1022,16): error TS2304: Cannot find name 'Color'.
有没有办法只使用类型定义 …
这是我的tsconfig.json文件的外观：
{
"compileOnSave": true,
"compilerOptions": {
"module": "amd",
"noImplicitAny": false,
"removeComments": false,
"preserveConstEnums": true,
"strictNullChecks": true,
"sourceMap": false
}
}
我有一个名为a.ts的打字稿文件，它是一个AMD模块（我正在使用requirejs），如下所示：
export function a() {
var a = {
b: 5
};
return a;
}
编译后的Javascript文件如下所示：
define(["require", "exports"], function (require, exports) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
function a() {
var a = {
b: 5
};
return a;
}
exports.a = a;
});
我需要生成的JavaScript文件为：
define(function () {
"use strict";
var a = {
b: 5
}; …我很难为angularjs(v1.4.9)应用程序创建适当的单元测试,该应用程序包含javascript文件(带有jasmine测试)和typescript文件(根本没有测试,现在我尝试使用Mocha,但它可以是任何框架).
因此它混合和没有模块的旧angularjs,我决定将所有.ts编译成一个bundle.js文件,因为避免了文件排序问题(当我每个.ts有单个.js文件并将其注入gulp任务时会发生index.html).
我的tsconfig.js:
{
"compileOnSave": true,
"compilerOptions": {
"noImplicitAny": false,
"removeComments": false,
"outFile": "./wwwroot/bundle.js",
"sourceMap": true,
"inlineSources": true,
"module": "amd",
"moduleResolution": "node",
"target": "es5",
"sourceRoot": "./wwwroot"
},
"include": [
"wwwroot/app/**/*"
],
"exclude": [
"node_modules/**/*",
"tests/**/*"
]
}
测试类的示例:
///<reference path="../models/paymentCondition.model.ts"/>
///<reference path="../../../../../node_modules/@types/angular/index.d.ts"/>
'use strict';
module PaymentCondition {
export class ConnectedCustomersListController {
name: string;
static $inject = ['paymentCondition'];
constructor(private paymentCondition: PaymentConditionModel) {
this.name = paymentCondition.Name;
this.bindData();
}
bindData() {
// do something
}
}
angular
.module('app.paymentConditions')
.controller('ConnectedCustomersListController', …我有几个仅使用后端的Node.js项目,它们使用简单的TypeScript配置.
在2018年3月之前,我在package.json中有这个:
"devDependencies": {
"@types/core-js": "^0.9.46",
"@types/node": "^9.6.2"
}
自2018年3月以来,我一直在省略"@types/core-js",一切似乎都很好.我们还需要"@types/core-js"吗？
我对tsc和之间的区别感到非常困惑ts-node。我正在学习TypeScript，通常.ts使用tsc命令来转换服务器文件。
现在，我正在接近nestjs框架，并且看到它使用ts-node。
那么两者之间有什么区别？我应该使用哪一个？
我正在使用tsc构建任务.不幸的是,我总是从节点模块文件夹中得到相同的错误
Executing task: .\node_modules\.bin\tsc.cmd --watch -p .\tsconfig.json <
node_modules/@types/node/index.d.ts(6208,55): error TS2304: Cannot find name 'Map'.
node_modules/@types/node/index.d.ts(6215,55): error TS2304: Cannot find name 'Set'.
node_modules/@types/node/index.d.ts(6219,64): error TS2304: Cannot find name 'Symbol'.
node_modules/@types/node/index.d.ts(6225,59): error TS2304: Cannot find name 'WeakMap'.
node_modules/@types/node/index.d.ts(6226,59): error TS2304: Cannot find name 'WeakSet'.
10:13:18 - Compilation complete. Watching for file changes.
我已经将目录添加到tsconfig.json中的ignore
{
"compilerOptions": {
"target": "es5",
"module": "commonjs",
"sourceMap": true,
"strict": false,
"noImplicitAny": false,
"strictPropertyInitialization": false,
"esModuleInterop": true,
},
"include": [
"src/*"
],
"exclude": [
"node_modules",
"./node_modules",
"./node_modules/*",
"./node_modules/@types/node/index.d.ts", …说我有这个对象
export interface Name {
[key: string]: boolean
}
const v = <Name>{};
我如何防止它编译？我要做的是强制v至少拥有一个属性：
const v = <Name>{foo: true};
运行以下代码时出现此错误
let foo = ' foo '
console.log(foo.trimLeft())
//foo.trimStart() works neither
我知道互联网上的大多数解决方案都说，我必须修复我的tsconfig.json以包含 es20whatever。
有趣的是，我可以使用 es2018 的东西，比如 Promise.prototype.finally 和 rest spread 等。VSCode 也会自动完成trimStart()，这很奇怪，因为项目和编辑器应该使用相同的tsconfig.json. 但是这段特定的代码无法编译。
这是我的 tsconfig.json
{
"compileOnSave": false,
"compilerOptions": {
"outDir": "./dist/out-tsc",
"baseUrl": "./",
"sourceMap": true,
"declaration": false,
"moduleResolution": "node",
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"target": "es5",
"typeRoots": ["node_modules/@types"],
"lib": ["es2018", "dom"],
"plugins": [
{
"name": "tslint-language-service",
"configFile": "./tslint.json"
}
],
"paths": {
"foo": ["projects/foo/src/public_api.ts"],
"bar": ["projects/bar/src/public_api.ts"],
"baz": ["dist/baz"]
}
}
}
我在 monorepo 角度文件夹中运行它（如您所见）。也许这有问题，我不知道。