typescript中文文档（如何启动typescript编辑器）

本文目录

• 如何启动typescript编辑器
• 如何用TypeScript开发微信小程序
• 怎么用typescript做网页
• typescript 哪些声明类型既可以当做 type 也可以当做 value
• Typescript 上有没有什么优秀的 自动化接口文档 工具
• 这段javascript代码的typescript声明文件怎么写

如何启动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开发微信小程序

方法步骤如下：

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来开发的话，就能有代码提示了

怎么用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/modules/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);
} else {
return null;
}
}
export { getUrlParam }
src/app.ts ：
import { getUrlParam } from ’./modules/utilities’;
let deviceType: string = getUrlParam(’deviceType’);
console.log(deviceType);
编译后的app.js（TypeScript编译器在输出单个文件时，只能使用AMD或System模块规范）：
define(“modules/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);
}
else {
return null;
}
}
exports.getUrlParam = getUrlParam;
});
define(“app“, [“require“, “exports“, “modules/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 module ’lodash’.
如果想在TypeScript代码中直接使用npm上的JS库，需要借助Typings这个工具。
Typings也是一个包管理器，它管理的是JS代码“定义文件”，用Typings安装相应的定义文件后，编辑器和编译器就可以去node_modules目录中找到相应的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:
module.exports = {
entry: ’./src/app.ts’,

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

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

module: {
loaders: [
{ test: //.ts$/, loader: ’ts-loader’ }
]
}

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

typescript 哪些声明类型既可以当做 type 也可以当做 value

## typeof :

```TypeScript

let strClass: typeof String = String;

let str: String = new strClass();

let str1 = strClass;

```

详见：网页链接Typescipt的文档

Typescript 上有没有什么优秀的 自动化接口文档 工具

一、开发接口测试案例的整体方案：
第一步：要分析出测试需求，并拿到开发提供的接口说明文档；
第二步：从接口说明文档中整理出接口测试案例，里面要包括详细的入参和出参数据以及明确的格式和检查点。
第三步：和开发一起对接口测试案例进行评审。
第四步：结合开发库，准备接口测试案例中的入参数据和出参数据，并整理成csv格式的文件。
第五步：结合接口测试案例文档和csv格式的数据文档，做接口测试案例的自动化案例开发。
二、接口自动化适用场景：
目前设计的自动化接口测试案例有两个运行场景：
1.测试前置、开发自测：一个新的自动化接口测试案例开发完成后，直接发给接口对应的开发，安排在开发本地环境执行，一旦开发确认完成接口开发，就开始执行接口测试案例，基本上可以实时拿到测试结果，方便开发快速做出判断。
【开发本地运行的方式就是打开JMeter工具，导入JMX文件，开始执行可。
】
2.回归测试：开发本地测试通过后，或整个需求手工测试通过后，把自动化的接口测试案例做分类整理，挑选出需要纳入到回归测试中的案例，在持续集成环境重新准备测试数据，并把案例纳入到持续集成的job中来，这些用于回归的接口测试案例需要配置到持续集成平台自动运行。

这段javascript代码的typescript声明文件怎么写

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，因为工具会列出来；