TypeScript是微软开发的一门脚本语言，它是JavaScript的超集，它遵循ES6语言规范。
 
Angular2框架是谷歌发明的，他用的就是TypeScript。
 
ES5，ES6都是脚本语言的规范
 
JavaScript和TypeScript是两种脚本语言。JavaScript实现了ES5，TypeScript实现了ES6
 
搭建TypeScript开发环境
 
需要安装编译器compiler，来把TypeScript的代码转换成JavaScript的代码
 
因为现在很多浏览器都没有支持ES6规范，所以用ES6规范写出来的代码并不能在浏览器上跑
 
安装npm install -g typescript
 
之后执行tsc -v看有没有安装成功
 
然后建立一个Hello.ts文件
 
export class Hello{

}
 
然后进入到这个文件所在的目录，执行tsc Hello.ts
 
会看到这个目录中会生成一个Hello.js文件
 
"use strict";
exports.__esModule = true;
var Hello = (function () {
    function Hello() {
    }
    return Hello;
}());
exports.Hello = Hello;
 
用webstorm新建一个空项目hello
 
新建一个Hello.ts
 
会看到一个提示询问是否把TypeScript编译成JavaScript，点击配置，然后在弹出的页面中把Enable TypeScript compiler前面的对勾勾上。这样就会自动把TypeScript代码编译成JavaScript代码了。
 
export class Hello{

}
 
字符串新特性
 
我们用TypeScript的在线编辑器来编辑。进入其官网http://www.typescriptlang.org/
 
点击上面的Playground。在左边编写TypeScript代码，右边显示编译好的JavaScript代码。
 
多行字符串,这种写法不会报错
 
var content = `ksdjf
kjsdf`;
 
会被翻译成
 
var content = "ksdjf\nkjsdf";
 
字符串模板
 
在${ }里边可以放变量或函数，但字符串必须要写在“里边。
 
var myname = "eaglezsx";

var getName = function () {
    return "eaglezsx";
}

console.log(`hello ${myname}`);
console.log(`hello ${getName()}`);
 
会被翻译成
 
var myname = "eaglezsx";
var getName = function () {
    return "eaglezsx";
};
console.log("hello " + myname);
console.log("hello " + getName());
 
自动拆分字符串
 
function test(template,name,age) {
    console.log(template);
    console.log(name);
    console.log(age);
}

var myname = "eaglezsx";

var getAge = function () {
    return 18;
}

test`hello my name is ${myname},i'm ${getAge()}`
 
使用test方法的时候不用在使用括号。第二个参数就为myname，第三个参数为getAge()，第一个参数就为通过后面两个参数拆分的字符串数组。
 
参数类型
 
在参数名称后面使用冒号来指定参数的类型
 
var myname: string = "eaglezsx";
myname = 12;//这句话会报错
 
前面我已经声明myname为字符串类型了，但后边为其赋值为数字类型的时候就会报错
 
这个错误只会在TypeScript中报错，在JavaScript中不会。
 
var sex = "male";
sex = 1;//这句话会报错
 
这里我没有给sex变量指定类型，但也会报错，因为TypeScript中有类型推断机制，当第一次给他赋值为字符串时，就认为他是字符串。
 
如果想让这个变量为任意类型可以设置其类型为any
 
var sex:any = "male";
sex = 1;
 
这样就不会报错了
 
除了string和any类型还有
 
var age: number = 18; //数字类型
var man: boolean = true;//布尔类型
function test(): void{  //声明函数的返回值为void,意思是没有返回值
    return "dd";//所以这里会报错
}


function test2(): string{ //这样就不会报错了
    return "dd";
}

//还可以给方法的参数指定类型
function test3(name:string): string{
    return "dd";
}

test3("d");//调用test3方法的时候就只能用字符串了
 
自定义类型
 
class Person{
    name: string;
    age: number;
}

var p: Person = new Person();

p.name = "eaglezsx";
p.age = 18;
 
默认参数：在参数声明后面用等号来指定参数的默认值
 
//给变量设置默认值这没什么好说的
var myname: string = "eaglezsx";
 
给函数的参数指定默认值
 
function test(a:string,b:string,c:string) {
    console.log(a);
    console.log(b);
    console.log(c);
}

test("xxx","yyy","zzz");
 
调用test方法的时候必须要传入3个参数，传入1个或两个都会报错。
 
function test(a:string,b:string,c:string="eaglezsx") {
    console.log(a);
    console.log(b);
    console.log(c);
}

test("xxx","yyy");
 
当给第三个参数指定了默认值，当我不传入第三个参数的时候就会使用这个默认值。
 
注意：带默认值的参数要放在最后边
 
可选参数：在方法的参数声明后面用问号来标明此参数为可选参数。
 
function test(a:string,b?:string,c:string="eaglezsx") {
    console.log(a);
    console.log(b);
    console.log(c);
}

test("xxx");
 
这里b参数就是可选的了
 
打印结果为
 
xxx
undefined
eaglezsx
 
注意：在函数中要注意对可选参数的处理，如果没有传入这个函数需要做哪些处理。
 
可选参数也必须声明在必选参数的后边
 
箭头表达式
 
用来声明匿名函数，消除传统匿名函数的this指针问题
 
多行的话需要些花括号和return关键字。单行不需要
 
只有一个参数不用写小括号，花括号，返回值
 
原来的方式
 
function getStock(name: string) {
    this.name = name;
    setInterval(function () {
        console.log("name is:"+this.name);
    },1000);
}

var stock = new getStock("IBM");
 
不会打印出name的值
 
现在的方式
 
function getStock(name: string) {
    this.name = name;
    setInterval(() => { 
        console.log("name is:"+this.name);
    },1000);
}

var stock = new getStock("IBM");
 
这次name有值了
 
循环
 
var myArray = [1, 2, 3, 4, 5];

for (var n of myArray){
    if (n > 2) break;
    console.log(n);
}
 
类
 
属性和方法默认的访问修饰符是public，在类的外部可以访问到
 
private的只能在内部访问到
 
protected可以在内部和子类中访问
 
构造函数
 
constructor(){}
 
class Person{
    name;

    constructor(name:string) {
        this.name = name;
    }

    eat() {
        console.log(this.name);
    }
}

var p = new Person("eaglezsx");
p.eat();
 
这种写法
 
name;
constructor(name:string) {
   this.name = name;
}
 
可以简写为
 
constructor(public name:string) {}
 
注意：如果用简写的方式要明确访问修饰符，为public也要写上。
 
如果不写修饰符是相当于这样的，并没有创建name属性
 
constructor(name:string) {}
 
类的继承
 
class Employee extends Person{

}
 
super关键字
 
用来调用父类的构造函数或调用父类的其他方法
 
子类的构造函数必须要调用父类的构造函数
 
class Employee extends Person{
    constructor(name:string,code:string) {
        super(name);
    }

    work(){
      super.eat();
    }
}
 
泛型
 
var workers:Array<Person>=[];
 
规定了数组里边只能放Person类型或他的子类。
 
接口
 
用来建立某种代码约定，使得其他开发者在调用某个方法或创建新的类时必须遵循接口所定义的代码约定。
 
interface IPerson { 
    name: string;
    age: number;
}

class Person{
    constructor(public config:IPerson){}
}

var p1 = new Person({
    name: "eaglezsx",
    age:12
});
 
在构造函数中传入了接口后，实例化对象的时候传入对象的属性就必须是那几个。
 
interface Animal{
    eat();
}

class Sheep implements Animal{
    eat() {
        console.log("i eat grass");
    }
}
 
实现了接口后就必须实现它的方法
 
模块
 
模块可以帮助开发者将代码分割为可重用的单元。开发者可以自己决定将模块中的哪些资源（类、方法、变量）暴露出去供外部使用，哪些资源只在模块内使用。
 
一个文件就是一个模块。
 
有两个关键字，export和import，代表向外暴露什么东西，和需要引入什么东西
 
新建一个空项目，新建两个文件a.ts,b.ts
 
a.ts
 
export var prop1;

var prop2;

export function func1(){

}

function func2(){

}

export class Clazz1{

}

class Clazz2{

}
 
b.ts
 
import {Clazz1, func1, prop1} from "./a";

console.log(prop1);

func1();

new Clazz1();

export function f(){

}
 
在b中只能用a向外暴露的属性，方法，类。b中也可以向外暴露。
 
注解
 
注解为程序的元素（类，方法，变量）加上更直观更明了的说明，这些说明信息与程序的业务逻辑无关，而是供指定的工具或框架使用的。
 
类型定义文件
 
类型定义文件（*.d.ts）
 
类型定义文件用来帮助开发者在TypeScript中使用已有的JavaScript的工具包。如：JQuery。
 
可以按照一个工具npm install typings –global来下载这些类型定义文件

 
文章目录
 
定义
介绍
提示
ts与js的区别
  
搭建ts运行环境
安装node.js
VSCode使用
安装TypeScript
 

 
定义
 
介绍
 
程序更容易理解——如变量的类型只有在程序运行时才确定，如函数的参数、返回值等
效率更高
更少的错误，可以杜绝一些常见错误
非常好的包容性。TS 是JS超级，完全兼容 javascript
但增加了一定的学习成本
 
官网：
 
官网
 
中文网
 
 
超集：意思就是JavaScript的所有语法都支持
 
Type：TypeScript 强调其优点【类型】
 
在JavaScript中我们定义变量类型后，下面可以更换类型
 
但是在TypeScript中不可以
 
 
TypeScript中
 
 
TypeScript中编写的代码不能直接在页面中运行，需要编写为JavaScript代码才可以在页面中运行
 
下面JavaScript我就写js TypeScript我就写ts了
 
提示
 
在js中我们我们在做的时候不管如何去传值都不会有报错
 
ts中我们可以直接在函数接收的时候告诉他我们需要什么类型的值，必须包含哪几个属性给我传递过来，如果传值类型不对，就会给我们提示，如果我们定义了传值包含属性，不传值直接调用也会报错哦
 
 
ts在我们编写时会给我们做出对应得提示哦（代码语义通俗易懂）
 
 
而js就没有对应提示，需要我们自己去编写
 
 
ts中我们可以使用type xx={xx:xx}来做定义
 
 
也可以使用 interface xx {xx:xx}去定义
 
 
如果我们属性写错或者不存在会有对应提示
 
 
js则没有
 
 
ts与js的区别
 
TypeScript
JavaScript
JavaScript 的超集用于解决大型项目的代码复杂 性
一种脚本语言，用于创建动态网页
可以在编译期间发现并纠正错误
作为一种解释型语言，只能在运行时发现错误
强类型，支持静态和动态类型
弱类型，没有静态类型选项
最终被编译成 JavaScript 代码，使浏览器可以理 解
可以直接在浏览器中使用
支持模块、泛型和接口
不支持模块，泛型或接口
社区的支持仍在增长，而且还不是很大
大量的社区支持以及大量文档和解决问题的支 持
搭建ts运行环境
 
安装node.js
 
官网
 
 
建议大家选长期稳定版，然后大家就可以进行傻瓜式安装
 
安装完之后win+r运行输入cmd调出命令行工具输入node -v 就会出现对应得版本
 
 
npm -v 也可以出现对应版本就证明成功了
 
 
VSCode使用
 
在设置中找到下面区域设置为single
 
 
tab设置缩进2个空格
 
 
安装插件
 
 
记得勾选哦
 
 
安装TypeScript
 
打开终端输入如下代码进行全局安装
 
npm install -g typescript
 
我们在运行node xxx.ts时会报如下错误是因为node无法解析ts语法
 
 
我们需要运行 tsc xxx.ts解析编译为js文件
 
 
然后在运行node xxx.js即可
 
ts可以写以前学的JS代码
ts类型的文件浏览器端不支持，无法进行解析
ts类型的文件中如果有ts语法，node也无法进行解析
ts文件需要使用 tsc编译器转换为js文件
 
此时ts运行环境配置后我们需要每次都要进行编译在运行，非常的麻烦，我们可以安装一个新插件ts-node
 
运行npm i ts-node -g即可安装完毕
 
然后我们就可以运行ts文件了
 
 
此时运行环境配置完成

 
 
感谢内容提供者：金牛区吴迪软件开发工作室
 
 
现在typescript越来越火了，各种项目都会用到typescript，我们今天就来说一下dvajs项目如何使用typescript（此文为CSDN吴小迪所写，翻版请说明来处）：
 （本文默认dvajs的东西都弄好并可以启动了，如果未配置dvajs的部分请看：dvaJS安装以及脚手架生成的目录讲解）
 
第一步：
 
全局安装typescript
 
$ npm i typescript -g
 
第二步：
 
切到项目目录
 项目内部安装typescript 以及 ts-loader(将tsx尾缀的文件转换为js的工具)等
 
$ cnpm i link typescript
$ cnpm i --save-dev ts-loader source-map-loader
$ cnpm i --save-dev @types/react @types/react-dom
 
 
第三步：
 
在项目根目录新增tsconfig.json文件
 文件内容如下：
 
{
  "compilerOptions": {
    "strictNullChecks": true,
    "moduleResolution": "node",
    "allowSyntheticDefaultImports": true,
    "experimentalDecorators": true,
    "jsx": "preserve",
    "noUnusedParameters": true,
    "noUnusedLocals": true,
    "target": "es6",
    "lib": [
      "dom",
      "es7"
    ]
  },
  "exclude": [
    "node_modules",
    "lib",
    "es"
  ]
}
 
第四步：
 
测试我们的配置是否已经OK
 在你的src文件夹下的routes文件夹中新增Test.tsx文件
 文件内容如下：
 
import * as React from 'react'
import { render } from 'react-dom'

interface IAppProps {}
interface IAppState {}

class App extends React.Component<IAppProps, IAppState> {
  public render(): JSX.Element {
    return (
      <div>
        这是typescript了哦~
      </div>
    )
  }
}

export default App;
 
而后在router.js文件中把IndexPage指向此文件：
 
import React from 'react';
import { Router, Route, Switch } from 'dva/router';
import IndexPage from './routes/Test';

export default function RouterConfig({ history }) {
  return (
    <Router history={history}>
      <Switch>
        <Route path="/" exact component={IndexPage} />
      </Switch>
    </Router>
  );
}
 
编译后如果你的页面出现了你写的内容说明已经与笔者一样配置ok了~
 
如果没有，请在下方评论，笔者会及时回复帮助你解决。