在前端，作为一个成熟的开发者，80%的bug来源于数据的类型不匹配，这个问题来源于js的设计思路，他就是一个轻数据类型的编程语言，他对数据类型不是很关注，
很多时候数据在内部会按照他默认的行为发生变化。
具体怎么发生变化在此不再赘述，请自行建立js文件在命令行中用node xx执行js文件测试，你也可以在浏览器里面使用它的编辑器测试。
那如何要js用起来不那么憋足呢？此时就请typescript入场，ts这个东西是在js的基础上对数据做了重类型的封装，除此之外，和其他都是js原生 。 首先在你的编辑器里面建立2个文件testjs.js和testts.ts
testjs.js
testjs.js
function green(name){
return `hello,${name}`
}
var result=green("lisi ");
console.log(result)---------------lisi
var result=green({name:123});
console.log(result)---------------hello,[object Object]
说明：字符串用``,里面用${}获取值，这个是es6的语法，用来替换"hello"+name;
是不是没有去计较你到底传入的什么东西。那怎么使用ts呢？
使用npm之前，请先安装node，安装好node以后npm库就能自动使用了，具体的操作可以在百度里面搜索node安装步骤，记得配环境变量啊！
npm install -g typescript
在testts.ts文件里面写代码
function green(name:string){
return `hello,${name}`
}
var result=green("11111111");
console.log(result)
注意：此时的name一定是字符串，不然就会报错
在命令行里面执行：tsc greeter.ts
执行完这个命令以后你会在你的目录里面发现他自动多出来一个文件叫testts.js文件，这个文件就是tsc命令编译后的ts文件。
在testts文件里面执行node testts.js得到hello，11111111这个结果
请注意的是，如果修改了name值就要用tsc去编译文件，不然执行node以后他还显示的是上次编译之后的内容。
node执行的一定是js文件，为不能执行ts文件，如果你写node testts回车，此时node会在你所在的目录下面找testts.js文件执行。
下面我们说一个比较复杂的高阶函数的例子，在ts里面使用interface（接口）来定义复杂的数据类型。
interface Person {
firstName: string;
lastName: string;
}
function greeter(person: Person) {
return `hello!${person.firstName} ${person.lastName}`
}
let user = {firstName: "Jane", lastName: "User" };
const result=greeter(user)
console.log(result)
一定记住的是interface他只是一个定义数据类型的语法糖而已。所谓的语法糖就是你只要这么写，编译器就能认识的东西。 interface定义了对象的属性和属性的类型，也就是说传入的对象属性必须包含firstName和lastName，并且此时2个属性的类型也必须是字符串，不能是其他类型。
tsc testts.ts
node testts.js
获得结果 接下来看一个例子：
interface Person {
firstName: string;
lastName: string;
}
function greeter(person: Person) {
return `hello!${person.firstName} ${person.lastName}$(person.fullName)`
}
let user = {firstName: "Jane", lastName: "User",fullName:"aaaaaaa" };
const result=greeter(user)
console.log(result)
此时就会报person里面没有fullname这个属性的错误。
下面介绍类，在testjs文件里面
function greeter(person) {
return "hello!" + person.firstName + " " + person.lastName;
}
class Student{
constructor(firstName,lastName){
this.firstName=firstName;
this.lastName=lastName;
}
}
var user = new Student("Jane", "User");
var result = greeter(user);
console.log(result);
执行node testjs------hello!Jane User
在testts.ts里面 需求点：greeter需要传入一个对象，对象里面包含fristname和lastname他的类型是字符串，此时我们需要用类来new对象，而不是像上面的例子一样直接用{}字面量来创建对象。
interface Person {
firstName: string;
lastName: string;
}
function greeter(person: Person) {
return `hello!${person.firstName} ${person.lastName}`
}
class Student{
constructor(firstName,lastName){
this.firstName=firstName;
this.lastName=lastName;
}
}
let user =new Student( "Jane","User");
const result=greeter(user)
console.log(result)
执行tsc testts以后报错了：说在Student类里面没有firstName,lastName这2个属性，是不是差异了？我明明有，你咋能说没有呢？
如果我们修改代码：为属性添加public
interface Person {
firstName: string;
lastName: string;
}
function greeter(person: Person) {
return `hello!${person.firstName} ${person.lastName}`
}
class Student{
constructor(public firstName,public lastName){
this.firstName=firstName;
this.lastName=lastName;
}
}
let user =new Student( "Jane","User");
const result=greeter(user)
console.log(result)
执行tsc testts命令后居然成功了，说明：ts的类的构造器里面的参数必须加public，在构造函数的参数上使用public等同于创建了同名的成员变量。
此时你已经可以将typescript用到项目里面了，vue和react都是typescript写的，所以你在用的时候可以直接使用，不用再考虑tsc编译的事情了。具体参看项目中使用ts的文档。
