tsc编译js

Ⅰ Egret引擎采用TypeScript作为开发语言，调试时是调试TypeScript还是javaScript呢

在默认情况下是 JavaScript 。

Ⅱ 为什么ReactJS在中国一点没有起色

1.安装node，因为ts的编译器是js/ts写的；安装node后同时获得npm命令，这是nodejs世界里的包管理器（也可以看作node的app商店）；2.安装vs2015或者vscode，当然这不是必须的，但是这里强烈推荐写ts的工具，vs第一，vsc第二；3.vs自带了TypeScript（vs2012+，vs2015update1自带了ts1.7）,最新版本的typescriptforvs去官网下载即可,或者如果不依赖vs（比如mac环境）,可以用命令行装ts编译器npmi-gtypescript@next4.安装了ts后,就会有2个命令可用：tsc和tsd,tsc用来编译TypeScript代码,tsd用来下载第三方js类库的ts定义文件(或者叫头文件)，熟练使用tsd，工作效率提升，因为减少了80%查文档的时间，所以写ts可以说是jser打通了任督二脉，上手任何新的开发环境都很快；5.命令行下载react的ts头文件,tsdinstallreact-global--save注意上面之所以写react-global而不是react，因为我们接下来使用比较原始的写法，直接把React当作全局对象使用，而不作为es6模块（必须用import引入），不需要Babel编译也不需要webpack打包；上面执行的tsd命令下载了ReactJS类库的头文件,下面用tsc命令创建一个ts项目配置文件tsc--init命令创建了tsconfig.json配置文件,打开该文件增加"jsx":"react",就是自动把tsx变成最终的js,而不是jsx把"outDir":"built",这行去掉,这样编译的文件就会在当前目录输出"target":"es5",这里es3改成es5,"watch":true是否监听文件修改如果你用的是vs,这行不重要6.下载reactjs文件，如果没有安装bower命令，可以手动去官网下载react类库bowerinstall--savereact7.以上环境配置好了,开始写代码:创建一个demo.tsx文件(注意这里是tsx,不是ts也不是jsx)创建一个demo.html,添加文件的引用8.demo.tsx写代码classMyClassextendsReact.Component{render(){returnhello{this.props.name};}}document.addEventListener('DOMContentLoaded',function(){ReactDOM.render(,document.body);});9.如果保存了demo.tsx后,没有在目录下发现自动编译了demo.js,那么可能是vs没配置好,如果你没有装vs或者vsc,没关系,在当前文件夹下命令行运行tsctsc命令会自动根据tsconfig.json里面配置的情况,自动帮你把代码编译成js,这是编译后的js文件10.打开demo.html可以看到效果了;11.至于题主说怎么学习,其实跟JS完全没两样,上面demo.tsx的代码,跟react官网的es6写法一模一样多了这两个prop和states类型约束,仅此而已;11.至于题主说怎么学习,其实跟JS完全没两样,上面demo.tsx的代码,跟react官网的es6写法一模一样多了这两个prop和states类型约束,仅此而已;12.下班,有空再写;－－－－－－时间分割－－－－－－13、继续写，对1-12进行润色，转入传教模式；以上的代码，工厂方法在创建子类的同时，做了一些初始化的动作，这与单纯的原型继承不同，所以在使用class方式进行子类继承，这样的写法是无效的；classMyViewextendsReact.Component{render(){returnhello{this.state.name};//会抛异常,因为state是null}//不起作用的getInitialState:(){return{name:'',age:20};}}需要改成如下方式，下面是官网给出的方案（这里TypeScript和ES6情况是一样的）classMyViewextendsReact.Component{constructor(props,context){super(props,context);this.state={name:'',};}render(){returnhello{this.state.name};}}16、当组件化遇到强类型：从前写JS组件，一般复用性比较差，基本写完就仍，原因如下：1）暴露了太多的Dom结构以及别的实现细节；2）命名挫，缺乏可记忆性，本身编程中变量和方法的命名对于码农来说就是天坑；3）JS天生缺乏私有和公共成员的约束，不加注释根本不知道怎么使用该类库/组件；React解决了把dom标签暴露出去的问题，TS则解决了语言层面的问题，并提供了强大的重构能力，你根本不需要记住组件的API，因为工具会列出来；

Ⅲ Cannot open source file: C:\Program Files (x86)\Microsoft SDKs\TypeScript\1.0\tsc.js 求助怎么解决

原因是你之前装了Visual Studio 2015之类的开发工具，导致已经安装了一个低版本的tsc文件（1.0版本），而现在你又安装了Node.js 、Visual Studio Code ，而版本至少在1.8以上。

事实上你可以观察到两个版本，运行cmd 输入 where tsc。

解决办法：

方法一（简单粗暴）、计算机->属性->高级环境设置->环境变量

在【adminstrator 的用户变量】或者【系统变量】的Path中找到C:Program Files (x86)Microsoft SDKsTypeScript1.0;将之删除

方法二（保险）、和方法一类似，在【adminstrator 的用户变量】或者【系统变量】的Path中找到 C: pm; 将C:Program Files (x86)Microsoft SDKsTypeScript1.0;放在C: pm; 之后

Ⅳ 怎么用typescript做网页

TypeScript项目和tsconfig.json
首先安装TypeScript编译器
npm i -g typescript

进入项目目录，新建一个 hello.ts
function sayHello(name: string) {
return 'Hello, ' + name;
}

let myName = 'Cheng Wang';

console.log(sayHello(myName));

然后执行
tsc hello.ts

编译器会生成 hello.js
function sayHello(name) {
return 'Hello, ' + name;
}
var myName = 'Cheng Wang';
console.log(sayHello(myName));

为了方便编译器和编辑器识别TypeScript项目，TypeScript约定了tsconfig.json文件来存储项目配置，如果运行 tsc 时不指定输入文件，编译器则会查找项目目录中的这个文件，如果找不到则会依次向父级目录查找。比如这样：
{
"compilerOptions": {
"outFile": "dist/app.js",
"sourceMap": true
},
"files": [
"src/app.ts"
]
}

直接运行 tsc ，会自动把 src/app.ts 编译到 dist/app.js 。
关于这个配置文件的更多选项，可以看 官方文档 。
使用模块
TypeScript中，模块的使用方法与ES6一致。
src/moles/utilities.ts ：
function getUrlParam(key: string) {

const REG_PATTERN = new RegExp('(^|&)' + key + '=([^&]*)(&|$)', 'i');
let result: string[] = location.search.substr(1).match(REG_PATTERN);

if (result !== null) {
return decodeURIComponent(result[2]);
} else {
return null;
}

}

export { getUrlParam }

src/app.ts ：
import { getUrlParam } from './moles/utilities';

let deviceType: string = getUrlParam('deviceType');

console.log(deviceType);

编译后的app.js（TypeScript编译器在输出单个文件时，只能使用AMD或System模块规范）：
define("moles/utilities", ["require", "exports"], function (require, exports) {
"use strict";
function getUrlParam(key) {
var REG_PATTERN = new RegExp('(^|&)' + key + '=([^&]*)(&|$)', 'i');
var result = location.search.substr(1).match(REG_PATTERN);
if (result !== null) {
return decodeURIComponent(result[2]);
}
else {
return null;
}
}
exports.getUrlParam = getUrlParam;
});
define("app", ["require", "exports", "moles/utilities"], function (require, exports, utilities_1) {
"use strict";
var deviceType = utilities_1.getUrlParam('deviceType');
console.log(deviceType);
});

使用NPM库
我们开发JS程序的时候，要用到NPM上的第三方的库，比如jQuery、Lodash等，但是绝大多数库都是用JS写的，没有类型提示，我们也不能在在代码中将这些库作为模块引入。
比如我们需要在项目中使用Lodash：
npm i --save lodash

然后在代码中引入：
import * as _ from 'lodash';

console.log(_.camelCase('helloworld'))

运行 tsc 则报错：
src/app.ts(1,20): error TS2307: Cannot find mole 'lodash'.

如果想在TypeScript代码中直接使用npm上的JS库，需要借助Typings这个工具。
Typings也是一个包管理器，它管理的是JS代码“定义文件”，用Typings安装相应的定义文件后，编辑器和编译器就可以去node_moles目录中找到相应的JS库，并编译到最终的JS代码中。
先安装Typings工具：
npm i -g typings

然后安装Lodash的定义文件：
typings install --save lodash

Typings会去NPM、Bower上寻找库的作者加的定义文件，但是有的库如jQuery并没有官方的定义文件，则需要从社区维护的 DefinitelyTyped 目录下安装：
typings install --save --ambient jquery

然后再tsconfig.json中的files配置中加入一条：

"files": [
"src/app.ts"，
"typings/main.d.ts"
]

此时编译就不会提示找不到模块了。
安装好定义文件之后，如果使用Visual Studio Code等对TypeScript支持较好的编辑器，则会提供更加强大的代码提示功能。
使用Webpack构建
TypeScript编译器支持很多模块组织规范，如ES6、commonJS、AMD等，但是如果想要将多个ts文件打包成一个文件，TypeScript只支持AMD和System，对于浏览器应用来说，还需要引入第三方的模块加载器。如果使用Webpack配合TypeScript的loader，则可以方便地构建浏览器可以运行的JS代码。
首先安装Webpack和ts-loader：
npm i webpack -g

npm i ts-loader --save-dev

然后配置项目目录中的webpack.config.js:
mole.exports = {

entry: './src/app.ts',

output: {
filename: 'app.js',
path: './dist'
},

resolve: {
extensions: ['', '.webpack.js', '.web.js', '.ts', '.js']
},

mole: {
loaders: [
{ test: //.ts$/, loader: 'ts-loader' }
]
}

}

然后就可以通过运行 webpack 来构建了，构建生成的代码自带了webpack的模块加载器，可以直接在浏览器中运行。

Ⅳ 如何启动typescript编辑器

Typescript是JavaScript的超集，支持ES6特性并且提供了类型系统，可以编译成Javascript。是微软开发且已经在github上开源。
ES6（ES2015，ES2016等）虽然已发布，但是很多浏览器厂商对其并不是完全支持,当前我们要想使用最新的ES6特性，必须使用转换工具（如babel），才能最终运行在浏览器上。而TypeScript对ES6新特性的支持使得我们可以直接使用开发，并且不用依赖第三方工具（不是绝对的），再加上静态类型检查等，使得我们可以像写java一样爽。
环境搭建
有两种主要的方式获取TypeScript工具。通过npm（Node.js包管理器）和安装TypeScript的Visual Studio插件。作为前端开发人员在这里使用npm这种简单高效方式安装。
1 npm安装
npm install -g typescript
2 是否安装成功,在命令行中输入以下命令，如果出现版本号表示安装成功
tsc -v

入门示例
创建文件Person.ts,并输入如下内容
class Person {
name:string;
age:number;
constructor(name:string, age:number) {
this.name = name;
this.age = age;
}

msg() {
return `${this.name} is ${this.age} years old`;
}
}

let user = new Person('Jack', 20);
document.body.innerHTML = user.msg();
编译后会在同目录下生成Person.js文件，编译命令如下：
tsc Person.ts
编译后的文件Person.js内容如下，其实就是javascript源码。
var Person = (function () {
function Person(name, age) {
this.name = name;
this.age = age;
}
Person.prototype.msg = function () {
return this.name + " is " + this.age + " years old";
};
return Person;
}());
var user = new Person('Jack', 20);
document.body.innerHTML = user.msg();
新建hello.html文件，输入以下内容：
<!DOCTYPE html>
<html>
<head><title>TypeScript Hello World</title></head>
<body>
<script src="Person.js"></script>
</body>
</html>
用浏览器打开hello.html即可看到效果

工欲善其事必先利其器--VS Code
VS Code也是微软开发的编辑器，其本身也是使用TypeScript开发的，代码已在github上开源，基于Electron框架开发，相对于Atom速度快，体验较好，是TypeScript IDE的首选。
其源码编辑器monaco-editor联想功能比较强大,已经单独开源。微信小程序开发工具的中源码编辑器就是使用了monaco-editor。另外其插件系统使得我们可以丰富其功能。
关于VS CODE更多信息请查看官网文档。

Ⅵ typescript 怎么混淆加密，编译输出js文件

选择
configure
task
runner
自动创建
task.json
。该配置文件在工作空间的.vscode目录下，这个目录也是存放vscode配置的文件夹。
vscode默认的task配置文件中给出了执行tsc
和
gulp模板配置。简单介绍一下
task.json
的写法
{"version":
"0.1.0",//
要使用的命令或者可执行文件的路径"command":
"tsc",//
对应command参数，是否是一个命令，否则为执行文件路径"isshellcommand":
true,//
是否在执行task任务时显示控制台窗口"showoutput":
"always",//
对应command参数指定程序的参数"args":
["-p",
"src",
"--allowjs",
"-w"],//
不太明白这个，基本用不到"problemmatcher":
"$tsc",}

Ⅶ vscode怎么运行javascript

1、直接按F5可以调试的方法或者点击运行按钮（可以直接运行html文件或者js文件）

在launch.json文件中的配置如下：

{

"version": "0.2.0",

"configurations": [{

"name": "谷歌浏览器", //运行html文件，用谷歌浏览器打开

"type": "chrome",

"request": "launch",

"url": "${file}",

"sourceMaps": true,

"webRoot": "${workspaceRoot}"

},

{

"name": "nodeLauch", //单独调试js，即可以直接运行js

"type": "node",

"request": "launch",

"program": "${file}", //这个配置成你要调试的文件、${file}当前打开的文件

"stopOnEntry": false,

"args": [],

"cwd": "${workspaceRoot}",

"runtimeExecutable": null,

"runtimeArgs": [

"--nolazy"

],

"env": {

"NODE_ENV": "development"

},

"console": "internalConsole",

"preLaunchTask": "",

"sourceMaps": false,

"outDir": null

}

]

}

2、第二种方法Ctrl+Shift+B快捷键运行html文件，在Tasks.json中配置如下：

{

"version": "0.1.0",

"command": "",

"isShellCommand": false,

"args": ["${file}"],

"showOutput": "always",

"windows": {

"command": "C:/Users/shannonliang/AppData/Local/Google/Chrome/Application/chrome.exe"

},

"tasks": [{

"taskName": "webserver",

"isBuildCommand": true,

"showOutput": "always"

}]

}

3、如果第二种方法，不想每次都按这个快捷键，请参考npm配置node服务方法：

http://stackoverflow.com/questions/30039512/how-to-view-my-html-code-in-browser-with-visual-studio-code

Ⅷ 如何学习用Typescript写Reactjs

1.安装node，因为ts的编译器是js/ts写的；
安装node后同时获得npm命令，这是nodejs世界里的包管理器（也可以看作node的app商店）；
2.安装vs 2015或者vs code，当然这不是必须的，但是这里强烈推荐写ts的工具，vs第一，vsc第二；
3.vs自带了TypeScript（vs2012+，vs2015update1自带了ts1.7）,最新版本的typescript for vs去官网下载即可, 或者如果不依赖vs（比如mac环境）, 可以用命令行装ts编译器

npm i -g typescript@next

4. 安装了ts后, 就会有2个命令可用：tsc和tsd, tsc用来编译TypeScript代码, tsd用来下载第三方js类库的ts定义文件(或者叫头文件)，熟练使用tsd，工作效率提升，因为减少了80%查文档的时间，所以写ts可以说是jser打通了任督二脉，上手任何新的开发环境都很快；

5. 命令行下载react的ts头文件,

tsd install react-global --save

注意上面之所以写 react-global 而不是react， 因为我们接下来使用比较原始的写法，直接把React当作全局对象使用， 而不作为es6模块（必须用import引入），不需要Babel编译也不需要webpack打包；
上面执行的tsd命令下载了ReactJS类库的头文件, 下面用tsc命令创建一个ts项目配置文件

tsc --init

命令创建了tsconfig.json配置文件, 打开该文件
增加"jsx": "react", 就是自动把tsx变成最终的js, 而不是jsx
把"outDir": "built", 这行去掉,这样编译的文件就会在当前目录输出
"target": "es5", 这里es3改成es5,
"watch": true 是否监听文件修改 如果你用的是vs,这行不重要

6.下载reactjs文件，如果没有安装bower命令，可以手动去官网下载react类库

bower install --save react

7.以上环境配置好了, 开始写代码:
创建一个demo.tsx文件(注意这里是tsx, 不是ts也不是jsx)
创建一个demo.html, 添加文件的引用

<!doctype html>
<html>
<head>
<script src="bower_components/react/react.min.js"></script>
<script src="bower_components/react/react-dom.min.js"></script>
<script src="demo.js"></script>
</head>
<body>

</body>
</html>

8. demo.tsx 写代码

class MyClass extends React.Component<any, any> {
render() {
return <h1>hello {this.props.name}</h1>;
}
}

document.addEventListener('DOMContentLoaded', function () {
ReactDOM.render(<MyClass name="Tom" />, document.body);
});

9. 如果保存了demo.tsx后, 没有在目录下发现自动编译了demo.js, 那么可能是vs没配置好,如果你没有装vs或者vsc,没关系,在当前文件夹下命令行运行

tsc

tsc命令会自动根据tsconfig.json里面配置的情况, 自动帮你把代码编译成js, 这是编译后的js文件

10. 打开demo.html可以看到效果了;
11. 至于题主说怎么学习, 其实跟JS完全没两样, 上面demo.tsx的代码, 跟react官网的es6写法一模一样多了<any,any> 这两个prop和states类型约束, 仅此而已;11. 至于题主说怎么学习, 其实跟JS完全没两样, 上面demo.tsx的代码, 跟react官网的es6写法一模一样多了<any,any> 这两个prop和states类型约束, 仅此而已;
12. 下班, 有空再写;
－－－－－－时间分割－－－－－－
13、继续写，对1-12进行润色，转入传教模式；
以上的代码，工厂方法在创建子类的同时，做了一些初始化的动作，这与单纯的原型继承不同，所以在使用class方式进行子类继承，这样的写法是无效的；

class MyView extends React.Component {
render() {
return <h1>hello {this.state.name}</h1>; //会抛异常,因为state是null
}
//不起作用的
getInitialState:(){
return {name:'',age:20};
}
}

需要改成如下方式，下面是官网给出的方案（这里TypeScript和ES6情况是一样的）

class MyView extends React.Component {
constructor(props, context) {
super(props, context);

this.state = {
name: '',
};
}
render() {
return <h1>hello {this.state.name}</h1>;
}
}

16、当组件化遇到强类型：
从前写JS组件，一般复用性比较差，基本写完就仍，原因如下：
1）暴露了太多的Dom结构以及别的实现细节；
2）命名挫，缺乏可记忆性，本身编程中变量和方法的命名对于码农来说就是天坑；
3）JS天生缺乏私有和公共成员的约束，不加注释根本不知道怎么使用该类库/组件；
React解决了把dom标签暴露出去的问题，TS则解决了语言层面的问题，并提供了强大的重构能力，你根本不需要记住组件的API，因为工具会列出来；

Ⅸ 怎么在本地运行经过tsc编译过后的js文件

你可以放到HTML文件里用浏览器打开，或者用node运行都可以。

Ⅹ 如何用TypeScript开发微信小程序

方法步骤如下：

1、工具需求

（1）TypeScript

2、利用TypeScript开发微信小程序需要4个核心文件如下

（1）App：代码整个应用程序的抽象对象，可以设置全局的方法和变量

（2）Page： 页面抽象对象，承载页面业务逻辑

（3）WXML： 页面的结构，相当于html

（4）JSON： 配置文件

（5）WXSS： 页面的样式，相当于css

3、然后由于目前腾讯没有小程序的TypeScript版本的API，所以OneCode team针对目前腾讯放出的所有的小程序JavaScript API开发了一个TypeScript版本的API类型定义文件wxAPI.d.ts，如图。

（1）最后只需要在程序中引用该文件，如果是使用Visual Studio来开发的话，就能有代码提示了