TypeScript 的编译和类型

如何创建编译bianyiTypeScript文件

全局安装完TypeScript（下文统称TS）后新建名为hello.ts的文件，在里面输入TS代码。

export class hello {
  showHello(name:any):void {
    console.log(name)
  }
}

新建TS文件成功，但是浏览器不支持解析TS文件，我们需要将其解析成JS文件。打开命令行控制台，进入hello.ts所在的文件夹。输入tsc hello.ts开始解析TS文件。解析后会在hello.ts文件的同级目录新建一个hello.js文件。
hello.js文件内容：

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.hellow = void 0;
var hellow = /** @class */ (function () {
    function hellow() {
    }
    hellow.prototype.showHello = function (name) {
        console.log(name);
    };
    return hellow;
}());
exports.hellow = hellow;

这里再介绍一个自动解析TS文件的方法，创建TS文件后打开命令行控制台输入tsc init。
会生成一个scconfig.json的配置文件，这里简单介绍一下基本的几个设置。

"target": "es5",   //编译的JS文件是什么版本的语法
"outDir": "./js", //开启这个属性来设置解析的JS文件路径 

设置完后运行项目就会自动解析TS文件。

TypeScript的对象类型

TS中支持给变量和函数定义类型

var name:string = 'linzijian';//字符串类型
var age:number = 18;//数字类型
var gril:boolean = false;//布尔值类型
var city:any;//任何类型

在变量名后用冒号+类型给一个变量定义类型，如果值的类型与定义的类型不同，就会有语法提示错误信息。对于代码的编写和维护有了很大的提升。提高了代码的可读性。此外需要注意，如果值与类型不同，代码还是可以解析，并不会导致报错，只是会有提示。

function getAge(age:number):void{
	console.log(age)
}//void类型的函数并不需要返回值
function getName(name:string):string{
	return name;
}//设置函数返回值类型

函数类型设置void可以没有返回值，或者设置返回值的类型。

TypeScript中的参数操作

• 参数默认值
  : 参数默认值顾名思义是在参数不指定值的时候拥有一个默认值。

class hello {
 showHello(name:string = 'linzijian'):void {
   console.log('hello '+name)
 }
}
var sjq = new hello();
sjq.showHello();//打印 hello linzijian
sjq.showHello(shijiaqi);//打印 hello shijiaqi
}

这里需要注意有默认值的参数必须在最后声明。

• 可选参数
  : 在传参的时候可选择是否传入该参数

class hello {
 showHello(name:string,age:number,gril?:boolean):void {
   console.log('hello '+name + 'age:' + age + 'gril:' + gril)
 }
}
var sjq = new hello();
sjq.showHello('shijiaqi',18);//打印 hello shijiaqi age:18 gril:undefined

此时不会报错，如果获取gril参数并不会报错，而是显示 undefined，同样可选参数也和默认值参数一样需要在正常参数后声明。

TypeScriot中的字符串

TS中的字符串支持ES6中的模板字符串功能，用两个反引号来描述模板字符串：

var background: string = 'red';
var width: number = 300;
var height:number = 300;
var html = `<div style = 'width:${width}px;height:${height}px;background:${background};'></div>`;
document.body.innerHTML = html;

上面这行代码会在网页上渲染一个长宽300px的红色正方型，模板字符串内使用变量不在需要繁琐的+号连接，采用了${}来声明变量。

TS中的模板字符串还可以拆分字符串：

class hello {
 showHello(str1:any,str2:any,str3:any):void {
   console.log(str1)//打印 0: "我有" 1: "块钱,你有" 2: "块钱，我们有" 3: "块"
   console.log(str2)//打印 10
   console.log(str3)//打印 20
 }
}
var num1: number = 10;
var num2:number = 20;
var num3:number = 30;
var sjq = new hello();
sjq.showHello`我有${num1}块钱,你有${num2}块钱，我们有${num3}块` 

如果要拆分字符串，方法就不能带小括号，直接在方法名后跟上模板字符串，拆分的规则是除变量外的所有字符串以变量拆分为一个数组，传入第一个参数str1，变量按顺序传入之后的参数。如果变量多余参数数量，就会出现TS的警示报错。

总结

目前我感觉TypeScript对于代码的规范和后期的维护起到了很大的作用，特别适合多人协作，增加了代码的可读性和美观性。以上为个人观点，如果有误还望指正~~