ts怎麼編譯的

A. 03 Puerts for Unity 搭建 Ts 編譯環境

在上兩節中，腳本文件內容一直都是 Js。Ts 作為 Js 的超集，不能直接丟進 V8 中運行，其在運行時仍然是以 Js 形式出現的。

所以，還需要搭建 Ts -> Js 的編譯環境。

Ts 編譯器有很多。例如：tsc（親兒子）、esbuild、swc 等...

這里將介紹兩種方案：

可以將以下內容，復制到初始化好的 package.json 中。

這里稍對其內容稍作介紹

在項目目錄下運行 yarn 或 npm install 來拉取依賴到本地，拉取到的所有的依賴都將保存在 node_moles 目錄中。

該文件用於配置 Ts 的 相關配置項

修改文件內容如下，稍後對參數稍作講解：

參數基本說明：

該配置文件主要有以下幾個作用：

對於該配置文件有以下幾個要求：

在 Assets/Editor/ 目錄下（沒有則手動創建該目錄），創建 PuertsConfig.cs 文件，內容如下：

出於輕量和速度考慮，且這里只需要對 Js 進行一些簡單處理，並不需要用到諸如 Webpack、Grunt、Gulp...這些強大的工具。

所以自己擼一個編譯相關的處理腳本，在項目根目錄下創建 Build.js ，其內容如下：

運行 yarn run watch:swc 或 yarn run watch:tsc 啟動監聽編譯，這樣 TypeScript 目錄下所有的 ts 文件有任何改動。都會實時編譯。

在 TypeScript/ 目錄下創建 main.ts 文件，內容如下：

看一下 Assets/StreamingAssets/Scripts/ 有應該有編譯出對應的 Js 文件，如果沒有可以嘗試重新保存一下文件或執行 yarn run build:tsc 手動編譯（只編譯一次）。

試著運行下游戲試試吧！

B. vscode 可以直接調試ts文件嗎

vscode使用task.json來配置項目的構建過程。
打開命令面板(Ctrl+Shift+P)選擇Run Build Task(Ctrl+Shift+B)

如果當前工作空間沒有task.json配置文件此時會出現提示

選擇 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",
}

另外還有更多參數和用法可以參照下面的官方文檔
https://code.visualstudio.com/docs/editor/tasks
配置好了之後使用默認的快捷鍵Ctrl+Shift+B即可執行編譯。
運行和調試項目
vscode默認支持nodejs，ts，js等項目的調試。使用launch.jsonp配置調試參數。
調試啟動調試的默認快捷鍵是F5， 如果沒有launch.json則會彈窗提示選擇調試環境，並自動創建launch.json

C. ts和js有什麼區別

1. ts需要靜態編譯，它提供了強類型與更多面向對象的內容。

2. ts最終仍要編譯為弱類型的js文件，基於對象的原生的js，再運行。故ts相較java/C#這樣天生面向對象語言是有區別和局限的

3. ts是由微軟牽頭主導的，主要來自C#

4. TypeScript是一個應用程序級的JavaScript開發語言。（這也表示TypeScript比較牛逼，可以開發大型應用，或者說更適合開發大型應用）

5. TypeScript是JavaScript的超集，可以編譯成純JavaScript。這個和我們CSS離的Less或者Sass是很像的，

6. 我們用更好的代碼編寫方式來進行編寫，最後還是友好生成原生的JavaScript語言。

7. TypeScript跨瀏覽器、跨操作系統、跨主機、且開源。由於最後他編譯成了JavaScript所以只要能運行JS的地方，都可以運行我們寫的程序，設置在node.js里。

8. TypeScript始於JavaScript，終於JavaScript。遵循JavaScript的語法和語義

9. TypeScript可以重用JavaScript代碼，調用流行的JavaScript庫。

10. TypeScript提供了類、模塊和介面，更易於構建組件和維護。

D. ts與js最大的區別是什麼呢

一、程序不同：

ts需要靜態編譯，它提供了強類型與更多面向對象的內容。TypeScript是JavaScript的超集，可以編譯成純JavaScript。這個和我們CSS離的Less或者Sass是很像的，用更好的代碼編寫方式來進行編寫，最後還是友好生成原生的JavaScript語言。

二、運行不同：

ts最終仍要編譯為弱類型的js文件，基於對象的原生的js在運行。故ts相較java/C#這樣天生面向對象語言是有區別和局限的，TypeScript是一個應用程序級的JavaScript開發語言。這也表示TypeScript比較牛逼，可以開發大型應用，或者說更適合開發大型應用。

主要功能

TypeScript的作者是安德斯·海爾斯伯格，C#的首席架構師，它是開源和跨平台的編程語言。它是JavaScript的一個超集，而且本質上向這個語言添加了可選的靜態類型和基於類的面向對象編程。

TypeScript擴展了JavaScript的語法，所以任何現有的JavaScript程序可以運行在TypeScript環境中。TypeScript是為大型應用的開發而設計，並且可以編譯為JavaScript。

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

F. 信息如何編譯成數字信號數字信號如何轉換成二進制

具體過程是采樣樣、量化和編碼。

1）采樣

又稱為抽樣，是利用采樣脈沖序列p(t)，從連續時間信號x(t)中抽取一系列離散樣值，使之成為采樣信號x(nTs)的過程。n= 0，1…。Ts稱為采樣間隔，或采樣周期，1／Ts = fs 稱為采樣頻率。

由於後續的量化過程需要一定的時間τ，對於隨時間變化的模擬輸入信號，要求瞬時采樣值在時間τ內保持不變，這樣才能保證轉換的正確性和轉換精度，這個過程就是采樣保持。正是有了采樣保持，實際上采樣後的信號是階梯形的連續函數。

2）量化

又稱幅值量化，把采樣信號x（nTs）經過舍入或截尾的方法變為只有有限個有效數字的數，這一過程稱為量化。

若取信號x（t）可能出現的最大值A，令其分為D個間隔，則每個間隔長度為R=A／D，R稱為量化增量或量化步長。當采樣信號x（nTs）落在某一小間隔內，經過舍入或截尾方法而變為有限值時，則產生量化誤差，如上圖所示。

一般又把量化誤差看成是模擬信號作數字處理時的可加雜訊，故而又稱之為舍入雜訊或截尾雜訊。量化增量D愈大，則量化誤差愈大，量化增量大小，一般取決於計算機A/D卡的位數。例如，8位二進制為28=256，即量化電平R為所測信號最大電壓幅值的1／256。
3、編碼
抽樣、量化後的信號還不是數字信號，需要把它轉換成數字編碼脈沖，這一過程稱為編碼。 最簡單的編碼方式是二進制編碼。如果量化後有8個值，我們就可以用二進制這樣編碼 000 001 010 011 100 101 110 111 這8個二進制就表示8個不同的值。
上面試論解釋，形象的解釋比如一根繩子上面穿滿了珠子（項鏈），這個繩子就是你的信息，而珠子就是你經過抽樣量化後的信息，至於編碼按照珠子的多少，2的n方編就可以了

G. vue3怎麼修改ts類型

vue3修改ts類型設置自動編譯ts-js文件，在集成終端中打開具體操作如下：
1、根據查詢相關信息顯示：生成配置文件tsconfig.jsontscinit。
2、進入上述配置文件修改tsconfig.json配置outDir：./js，把ts文件編衡型譯最終存咐蘆猜放的位置strict：false，不使用嚴格模式。
3、啟動監視任務，終端->運行任務->顯示所有任嘩做務->（tsc監視）。

H. 如何學慣用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打通了任督二脈，上手任何新的開發環境都很快；
有網友指正tsd工具不是安裝ts的時候自帶的，需要另外安裝，裝太久不記得了。
npm install tsd -g
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類型約束, 僅此而已;
12. 下班, 有空再寫;
－－－－－－時間分割－－－－－－
13、繼續寫，對1-12進行潤色，轉入傳教模式；
妖獸啦，這里14-15的文字怎麼不不見了，知乎編輯器bug好多。
不記得寫了什麼，大概說的是 工廠方法創建子類和用class直接繼承的差異。
React.createClass 和 Backbone.View.extend 等都是工廠方法創建子類
文字斷了。。。。
以上的代碼，工廠方法在創建子類的同時，做了一些初始化的動作，這與單純的原型繼承不同，所以在使用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，因為工具會列出來；
17、強類型的ts有IDE的代碼提示，但是面對各種mvvm的字元串模版組裝，卻無用武之地，以下是典型的mvvm數據綁定和有IDE支持的JSX數據組裝在開發體驗上的區別；
模板字元串的綁定里，工具無法檢查出問題，只能在運行時拋出異常，而jsx則可以提示拼寫錯誤。
18、關於生產力再拋一個概念：無障礙編程；
我們平時的開發工作，有不少時間花在查API文檔、調試代碼、查字典（給變數命名），需要不停地切換任務窗口……
上面的例子比較小，實際開發中各種JSON對象可能有10來個屬性，且結構層層嵌套，不一邊查文檔一邊抓包，根本無法完成開發；
如果項目是並行開發的，文檔都還沒定義出來（但是產品原型已經有了，甚至html頁面都已經切好），如何快速完成前端部分的開發工作？
業界常用方法是使用mock數據（先造假數據），下面介紹一種更簡單的辦法（為了舉例先虛擬一個需求場景 —— 一個留言板html的組裝）；
別忘了JS變數是可以用中文的，好吧不用查字典了，先把需求完成再說，在組裝html的過程中TS+JSX發揮了巨大的優勢，三下五除二就把組裝界面的代碼寫好了，不用調試我可以確定沒有錯誤的；
過了些天，WebAPI的數據結構定義出來了，可以著手進行代碼重構（或者說把查字典的工作集中完成），利用開發工具的重構功能進行變數改名：
最後項目完成的時候，是把所有類型的定義都挪到獨立的描述文件里(比如叫做webapi.d.ts)，原來的interface可以改成type關鍵字(類型別名)：
以上，這個開發過程中基本沒有一邊查文檔、一邊查字典，效率的提升是明顯的。