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关键字(类型别名)：
以上，这个开发过程中基本没有一边查文档、一边查字典，效率的提升是明显的。