ts編譯階段_ts與js最大的區別是什麼呢

① 如何學慣用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關鍵字(類型別名)：
以上，這個開發過程中基本沒有一邊查文檔、一邊查字典，效率的提升是明顯的。

② 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 手動編譯（只編譯一次）。

試著運行下游戲試試吧！

③ TypeScript 入門指南

新系列 深入淺出TypeScript 來了，本系列至少20+篇。本文為第一篇，來介紹一下TypeScript 以及常見的類型。

TypeScript是一門由微軟推出的開源的、跨平台的編程語言。它是javaScript的超集，擴展了 JavaScript 的語法，最終會被編譯為JavaScript代碼。

TypeScript的主要特性：

TypeScript 主要是為了實現以下兩個目標：

下面就來看看這兩個目標是如何實現的。

為什麼要給JavaScript加上類型呢？

我們知道，JavaScript是一種輕量級的解釋性腳本語言。也是弱類型、動態類型語言，允許隱式轉換，只有運行時才能確定變數的類型。正是因為在運行時才能確定變數的類型，JavaScript代碼很多錯誤在運行時才能發現。TypeScript在JavaScript的基礎上，包裝了類型機制，使其變身成為 靜態類型 語言。在 TypeScript 中，不僅可以輕易復用 JavaScript 的代碼、最新特性，還能使用可選的靜態類型進行檢查報錯，使得編寫的代碼更健壯、更易於維護。

下面是 JavaScript 項目中最常見的十大錯誤，如果使用 TypeScript，那麼在 編寫階段 就可以發現並解決很多 JavaScript 錯誤了：

類型系統能夠提高代碼的質量和可維護性，經過不斷的實踐，以下兩點尤其需要注意：

可以認為，在所有操作符之前，TypeScript 都能檢測到接收的類型（在代碼運行時，操作符接收的是實際數據；在靜態檢測時，操作符接收的則是類型）是否被當前操作符所支持。當 TypeScript 類型檢測能力覆蓋到所有代碼後，任意破壞約定的改動都能被自動檢測出來，並提出類型錯誤。因此，可以放心地修改、重構業務邏輯，而不用擔憂因為考慮不周而犯下低級錯誤。

在一些語言中，類型總是有一些不必要的復雜的存在方式，而 TypeScript 盡可能地降低了使用門檻，它是通過如下方式來實現的。

TypeScript 與 JavaScript 本質並無區別，我們可以將 TypeScipt 理解為是一個添加了類型註解的 JavaScript，為JavaScript代碼提供了編譯時的類型安全。

實際上，TypeScript 是一門「 中間語言 」，因為它最終會轉化為JavaScript，再交給瀏覽器解釋、執行。不過 TypeScript 並不會破壞 JavaScript 原有的體系，只是在 JavaScript 的基礎上進行了擴展。

准確的說，TypeScript 只是將JavaScript中的方法進行了標准化處理：

這段代碼在TypeScript中就會報錯，因為TS會知道a是一個數字類型，不能將其他類型的值賦值給a，這種類型的推斷是很有必要的。

上面說了，TypeScript會盡可能安全的推斷類型。我們也可以使用類型注釋，以實現以下兩件事：

在一些語言中，類型總是有一些不必要的復雜的存在方式，而 TypeScript 的類型是結構化的。比如下面的例子中，函數會接受它所期望的參數：

為了便於把 JavaScript 代碼遷移至 TypeScript，即使存在編譯錯誤，在默認的情況下，TypeScript 也會盡可能的被編譯為 JavaScript 代碼。因此，我們可以將JavaScript代碼逐步遷移至 TypeScript。

雖然 TypeScript 是 JavaScript 的超集，但它始終緊跟ECMAScript標准，所以是支持ES6/7/8/9 等新語法標準的。並且，在語法層面上對一些語法進行了擴展。TypeScript 團隊也正在積極的添加新功能的支持，這些功能會隨著時間的推移而越來越多，越來越全面。

雖然 TypeScript 比較嚴謹，但是它並沒有讓 JavaScript 失去其靈活性。TypeScript 由於兼容 JavaScript 所以靈活度可以媲美 JavaScript，比如可以在任何地方將類型定義為 any（當然，並不推薦這樣使用），畢竟 TypeScript 對類型的檢查嚴格程度是可以通過 tsconfig.json 來配置的。

在搭建TypeScript環境之前，先來看看適合TypeScript的IDE，這里主要介紹Visual Studio Code，筆者就一直使用這款編輯器。

VS Code可以說是微軟的親兒子了，其具有以下優勢：

因為 VS Code 中內置了特定版本的 TypeScript 語言服務，所以它天然支持 TypeScript 語法解析和類型檢測，且這個內置的服務與手動安裝的 TypeScript 完全隔離。因此， VS Code 支持在內置和手動安裝版本之間動態切換語言服務，從而實現對不同版本的 TypeScript 的支持。

如果當前應用目錄中安裝了與內置服務不同版本的 TypeScript，我們就可以點擊 VS Code 底部工具欄的版本號信息，從而實現「use VS Code's Version」和「use Workspace's Version」兩者之間的隨意切換。

除此之外，VS Code 也基於 TypeScript 語言服務提供了准確的代碼自動補全功能，並顯示詳細的類型定義信息，大大的提升了我們的開發效率。

1）全局安裝TypeScript：

2）初始化配置文件：

執行之後，項目根目錄會出現一個 tsconfig.json 文件，裡麵包含ts的配置項（可能因為版本不同而配置略有不同）。

可以在 package.json 中加入script命令：

3）編譯ts代碼：

TSLint 是一個通過 tslint.json 進行配置的插件，在編寫TypeScript代碼時，可以對代碼風格進行檢查和提示。如果對代碼風格有要求，就需要用到TSLint了。其使用步驟如下： （1）在全局安裝TSLint：

（2）使用TSLint初始化配置文件：

執行之後，項目根目錄下多了一個 tslint.json 文件，這就是TSLint的配置文件了，它會根據這個文件對代碼進行檢查，生成的 tslint.json 文件有下面幾個欄位：

這些欄位的含義如下；

在說TypeScript數據類型之前，先來看看在TypeScript中定義數據類型的基本語法。

在語法層面，預設類型註解的 TypeScript 與 JavaScript 完全一致。因此，可以把 TypeScript 代碼的編寫看作是為 JavaScript 代碼添加類型註解。

在 TypeScript 語法中，類型的標注主要通過類型後置語法來實現：「 變數: 類型 」

在 JavaScript 中，原始類型指的是 非對象且沒有方法 的數據類型，包括：number、boolean、string、null、undefined、symbol、bigInt。

它們對應的 TypeScript 類型如下：

JavaScript原始基礎類型TypeScript類型 numbernumber booleanboolean stringstring nullnull undefinendefined symbolsymbol bigIntbigInt

需要注意 number 和 Number 的區別：TypeScript中指定類型的時候要用 number ，這是TypeScript的類型關鍵字。而 Number 是 JavaScript 的原生構造函數，用它來創建數值類型的值，這兩個是不一樣的。包括 string 、 boolean 等都是TypeScript的類型關鍵字，而不是JavaScript語法。

TypeScript 和 JavaScript 一樣，所有數字都是 浮點數 ，所以只有一個 number 類型。

TypeScript 還支持 ES6 中新增的二進制和八進制字面量，所以 TypeScript 中共支持 2、8、10和16 這四種進制的數值：

字元串類型可以使用單引號和雙引號來包裹內容，但是如果使用 Tslint 規則，會對引號進行檢測，使用單引號還是雙引號可以在 Tslint 規則中進行配置。除此之外，還可以使用 ES6 中的模板字元串來拼接變數和字元串會更為方便。

類型為布爾值類型的變數的值只能是true或者false。除此之外，賦值給布爾值的值也可以是一個計算之後結果為布爾值的表達式：

在 JavaScript 中，undefined和 null 是兩個基本數據類型。在 TypeScript 中，這兩者都有各自的類型，即 undefined 和 null，也就是說它們既是實際的值，也是類型。這兩種類型的實際用處不是很大。

注意，第一行代碼可能會報一個tslint的錯誤： Unnecessary initialization to 'undefined' ，就是不能給一個變數賦值為undefined。但實際上給變數賦值為undefined是完全可以的，所以如果想讓代碼合理化，可以配置tslint，將" no-unnecessary-initializer "設置為 false 即可。

默認情況下，undefined 和 null 是所有類型的子類型，可以賦值給任意類型的值，也就是說可以把 undefined 賦值給 void 類型，也可以賦值給 number 類型。當在 tsconfig.json 的"compilerOptions"里設置為 "strictNullChecks": true 時，就必須嚴格對待了。這時 undefined 和 null 將只能賦值給它們自身或者 void 類型。這樣也可以規避一些錯誤。

BigInt是ES6中新引入的數據類型，它是一種內置對象，它提供了一種方法來表示大於 2- 1 的整數，BigInt可以表示任意大的整數。

使用 BigInt 可以安全地存儲和操作大整數，即使這個數已經超出了JavaScript構造函數 Number 能夠表示的安全整數范圍。

我們知道，在 JavaScript 中採用雙精度浮點數，這導致精度有限，比如 Number.MAX_SAFE_INTEGER 給出了可以安全遞增的最大可能整數，即 2- 1 ，來看一個例子:

可以看到，最終返回了true，這就是超過精讀范圍造成的問題，而 BigInt 正是解決這類問題而生的:

這里需要用 BigInt(number) 把 Number 轉化為 BigInt ，同時如果類型是 BigInt ，那麼數字後面需要加 n 。

在TypeScript中， number 類型雖然和 BigInt 都表示數字，但是實際上兩者類型是完全不同的:

symbol我們平時用的比較少，所以可能了解也不是很多，這里就詳細來說說symbol。

symbol 是 ES6 新增的一種基本數據類型，它用來表示獨一無二的值，可以通過 Symbol 構造函數生成。

注意：Symbol 前面不能加 new關鍵字，直接調用即可創建一個獨一無二的 symbol 類型的值。

可以在使用 Symbol 方法創建 symbol 類型值的時候傳入一個參數，這個參數需要是一個字元串。如果傳入的參數不是字元串，會先自動調用傳入參數的 toString 方法轉為字元串：

上面代碼的第三行可能會報一個錯誤：This condition will always return 'false' since the types 'unique symbol' and 'unique symbol' have no overlap. 這是因為編譯器檢測到這里的 s1 === s2 始終是false，所以編譯器提醒這代碼寫的多餘，建議進行優化。

上面使用Symbol創建了兩個symbol對象，方法中都傳入了相同的字元串，但是兩個symbol值仍然是false，這就說明了 Symbol 方法會返回一個獨一無二的值。Symbol 方法傳入的這個字元串，就是方便我們區分 symbol 值的。可以調用 symbol 值的 toString 方法將它轉為字元串：

在TypeScript中使用symbol就是指定一個值的類型為symbol類型：

在ES6中，對象的屬性是支持表達式的，可以使用於一個變數來作為屬性名，這對於代碼的簡化有很多用處，表達式必須放在大括弧內：

symbol 也可以作為屬性名，因為symbol的值是獨一無二的，所以當它作為屬性名時，不會與其他任何屬性名重復。當需要訪問這個屬性時，只能使用這個symbol值來訪問（必須使用方括弧形式來訪問）：

在使用obj.name訪問時，實際上是字元串name，這和訪問普通字元串類型的屬性名是一樣的，要想訪問屬性名為symbol類型的屬性時，必須使用方括弧。方括弧中的name才是我們定義的symbol類型的變數name。

使用 Symbol 類型值作為屬性名，這個屬性是不會被 for…in遍歷到的，也不會被 Object.keys() 、 Object.getOwnPropertyNames() 、 JSON.stringify() 等方法獲取到：

雖然這些方法都不能訪問到Symbol類型的屬性名，但是Symbol類型的屬性並不是私有屬性，可以使用 Object.getOwnPropertySymbols 方法獲取對象的所有symbol類型的屬性名：

除了這個方法，還可以使用ES6提供的 Reflect 對象的靜態方法 Reflect.ownKeys ，它可以返回所有類型的屬性名，Symbol 類型的也會返回：

Symbol 包含兩個靜態方法， for 和 keyFor 。 1）Symbol.for()

用Symbol創建的symbol類型的值都是獨一無二的。使用 Symbol.for 方法傳入字元串，會先檢查有沒有使用該字元串調用 Symbol.for 方法創建的 symbol 值。如果有，返回該值；如果沒有，則使用該字元串新創建一個。使用該方法創建 symbol 值後會在全局范圍進行注冊。

上面代碼中，創建了一個iframe節點並把它放在body中，通過這個 iframe 對象的 contentWindow 拿到這個 iframe 的 window 對象，在 iframe.contentWindow上添加一個值就相當於在當前頁面定義一個全局變數一樣。可以看到，在 iframe 中定義的鍵為 TypeScript 的 symbol 值在和在當前頁面定義的鍵為'TypeScript'的symbol 值相等，說明它們是同一個值。

2）Symbol.keyFor() 該方法傳入一個 symbol 值，返回該值在全局注冊的鍵名：

看完簡單的數據類型，下面就來看看比較復雜的數據類型，包括JavaScript中的數組和對象，以及TypeScript中新增的元組、枚舉、Any、void、never、unknown。

在 TypeScript 中有兩種定義數組的方式：

以上兩種定義數組類型的方式雖然本質上沒有任何區別，但是更推薦使用第一種形式來定義。一方面可以避免與 JSX 語法沖突，另一方面可以減少代碼量。

注意，這兩種寫法中的 number 指定的是數組元素的類型，也可以在這里將數組的元素指定為其他任意類型。如果要指定一個數組里的元素既可以是數值也可以是字元串，那麼可以使用這種方式： number|string[] 。

在JavaScript中，object是引用類型，它存儲的是值的引用。在TypeScript中，當想讓一個變數或者函數的參數的類型是一個對象的形式時，可以使用這個類型：

可以看到，當給一個對象類型的變數賦值一個對象時，就會報錯。對象類型更適合以下場景:

在 JavaScript 中並沒有元組的概念，作為一門動態類型語言，它的優勢是支持多類型元素數組。但是出於較好的擴展性、可讀性和穩定性考慮，我們通常會把不同類型的值通過鍵值對的形式塞到一個對象中，再返回這個對象，而不是使用沒有任何限制的數組。TypeScript 的元組類型正好彌補了這個不足，使得定義包含固定個數元素、每個元素類型未必相同的數組成為可能。

元組可以看做是數組的擴展，它表示已知元素數量和類型的數組，它特別適合用來實現多值返回。確切的說，就是已知數組中每一個位置上的元素的類型，可以通過元組的索引為元素賦值：：

可以看到，定義的arr元組中，元素個數和元素類型都是確定的，當為arr賦值時，各個位置上的元素類型都要對應，元素個數也要一致。

當訪問元組元素時，TypeScript也會對元素做類型檢查，如果元素是一個字元串，那麼它只能使用字元串方法，如果使用別的類型的方法，就會報錯。

在TypeScript 新的版本中，TypeScript會對元組做越界判斷。超出規定個數的元素稱作越界元素，元素賦值必須類型和個數都對應，不能超出定義的元素個數。

這里定義了介面 Tuple ，它繼承數組類型，並且數組元素的類型是 number 和 string 構成的聯合類型，這樣介面 Tuple 就擁有了數組類型所有的特性。並且指定索引為0的值為 string 類型，索引為1的值為 number 類型，同時指定 length 屬性的類型字面量為 2，這樣在指定一個類型為這個介面 Tuple 時，這個值必須是數組，而且如果元素個數超過2個時，它的length就不是2是大於2的數了，就不滿足這個介面定義了，所以就會報錯；當然，如果元素個數不夠2個也會報錯，因為索引為0或1的值缺失。

TypeScript 在 ES 原有類型基礎上加入枚舉類型，使得在 TypeScript 中也可以給一組數值賦予名字，這樣對開發者比較友好。枚舉類型使用enum來定義：

上面定義的枚舉類型的Roles，它有三個值，TypeScript會為它們每個值分配編號，默認從0開始，在使用時，就可以使用名字而不需要記數字和名稱的對應關系了：

除此之外，還可以修改這個數值，讓SUPER_ADMIN = 1，這樣後面的值就分別是2和3。當然還可以給每個值賦予不同的、不按順序排列的值：

我們可以將一個值定義為any類型，也可以在定義數組類型時使用any來指定數組中的元素類型為任意類型：

any 類型會在對象的調用鏈中進行傳導，即any 類型對象的任意屬性的類型都是 any，如下代碼所示：

需要注意：不要濫用any類型，如果代碼中充滿了any，那TypeScript和JavaScript就毫無區別了，所以除非有充足的理由，否則應該盡量避免使用 any ，並且開啟禁用隱式 any 的設置。

void 和 any 相反，any 是表示任意類型，而 void 是表示沒有類型，就是什麼類型都不是。這在 定義函數，並且函數沒有返回值時會用到 ：

需要注意： void 類型的變數只能賦值為 undefined 和 null ，其他類型不能賦值給 void 類型的變數。

never 類型指永遠不存在值的類型，它是那些 總會拋出異常 或 根本不會有返回值的函數表達式的返回值 類型，當變數被永不為真的類型保護所約束時，該變數也是 never 類型。

下面的函數，總是會拋出異常，所以它的返回值類型是never，用來表明它的返回值是不存在的：

never 類型是任何類型的子類型，所以它可以賦值給任何類型；而沒有類型是 never 的子類型，所以除了它自身以外，其他類型（包括 any 類型）都不能為 never 類型賦值。

上面代碼定義了一個立即執行函數，函數體是一個死循環，這個函數調用後的返回值類型為 never，所以賦值之後 neverVariable 的類型是 never 類型，當給neverVariable 賦值 123 時，就會報錯，因為除它自身外任何類型都不能賦值給 never 類型。

基於 never 的特性，我們可以把 never 作為介面類型下的屬性類型，用來禁止操作介面下特定的屬性：

可以看到，無論給 props.name 賦什麼類型的值，它都會提示類型錯誤，這就相當於將 name 屬性設置為了只讀。

unknown 是TypeScript在3.0版本新增的類型，主要用來描述類型並不確定的變數。它看起來和any很像，但是還是有區別的，unknown相對於any更安全。

對於any，來看一個例子：

上面這些語句都不會報錯，因為value是any類型，所以後面三個操作都有合法的情況，當value是一個對象時，訪問name屬性是沒問題的；當value是數值類型的時候，調用它的toFixed方法沒問題；當value是字元串或數組時獲取它的length屬性是沒問題的。

當指定值為unknown類型的時候，如果沒有 縮小類型範圍 的話，是不能對它進行任何操作的。總之，unknown類型的值不能隨便操作。那什麼是類型範圍縮小呢？下面來看一個例子：

這里由於把value的類型縮小為Date實例的范圍內，所以進行了value.toISOString()，也就是使用ISO標准將 Date 對象轉換為字元串。

使用以下方式也可以縮小類型範圍：

關於 unknown 類型，在使用時需要注意以下幾點：

在實際使用中，如果有類型無法確定的情況，要盡量避免使用 any，因為 any 會丟失類型信息，一旦一個類型被指定為 any，那麼在它上面進行任何操作都是合法的，所以會有意想不到的情況發生。因此如果遇到無法確定類型的情況，要先考慮使用 unknown。

④ 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。

⑤ ts和js有什麼區別

ts需要靜態編譯，它提供了強類型與更多面向對象的內容。
ts最終仍要編譯為弱類型的js文件，基於對象的原生的js，再運行。故ts相較java/C#這樣天生面向對象語言是有區別和局限的
ts是由微軟牽頭主導的，主要來自C#
TypeScript是一個應用程序級的JavaScript開發語言。（這也表示TypeScript比較牛逼，可以開發大型應用，或者說更適合開發大型應用）
TypeScript是JavaScript的超集，可以編譯成純JavaScript。這個和我們CSS離的Less或者Sass是很像的，
我們用更好的代碼編寫方式來進行編寫，最後還是友好生成原生的JavaScript語言。
TypeScript跨瀏覽器、跨操作系統、跨主機、且開源。由於最後他編譯成了JavaScript所以只要能運行JS的地方，都可以運行我們寫的程序，設置在node.js里。
TypeScript始於JavaScript，終於JavaScript。遵循JavaScript的語法和語義
TypeScript可以重用JavaScript代碼，調用流行的JavaScript庫。
TypeScript提供了類、模塊和介面，更易於構建組件和維護。

⑥ html使用ts

在運行html時要寬兆先編譯一下ts文件

TypeScript 只會在編譯時對類搏巧型型進行靜態檢查，如果發現有錯誤，編譯的時候就會報錯。而在運行時，與普通的 JavaScript 文基猜件一樣，不會對類型進行檢查。

導航:首頁 > 源碼編譯 > ts編譯階段

ts編譯階段

與ts編譯階段相關的資料