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來開發的話，就能有代碼提示了