TypeScript概括

浅谈-开篇前言

TypeScript是JavaScript的超集（遵循ECMAScript6语法），这个语言添加了基于类的面向对象编程。TypeScript作为JavaScript很大的一个语法糖，本质上是类似于css的less、sass，都是为了易于维护、开发，最后还是编译成JavaScript，只要是js可以运行的地方它都可以运行。

ES是什么？ES6和ES5之间的关系？和JS和TS的关系？

简单来说ES就是一种规范，ES6和ES5就是这个规范的不同版本，JS实现了ES5，TS实现了ES6，JS和TS是客户端不同的版本。

TypeScript相对于JavaScript的优势

支持 ES6 的规范
强大的 IDE 支持
2.1 类型检查
为变量指定类型 -> 减少开发阶段的几率
2.2 语法提示
根据上下文，把所可能需要的类、变量方法、关键字都会有提示 -> 提高开发效率
2.3 重构
方便修改变量、方法名、文件名(IDE会自动修改) -> 提高代码质量和效率
angular2 的开发语言

学习TypeScript的收益

强大的静态类型系统
完善的内部代码库
几乎所有的API都能得到准确的智能提示
可以帮助团队更好的理解架构内容的数据流向

搭建TS开发环境

sudo npm install -g typescript

目前的主流浏览器还不完全支持ES6的语法所以目前想要在浏览器运行TS代码需要Compiler编译器来将TS代码转换为浏览器支持的JS代码

tsc 文件名.ts
文件名.ts -> 文件名.js

Type类型

所有类型都是any类型的子类型

元类型(primitive types)

number、boolean、string、null、undefined

对象类型(object types)

所有类、模块、接口、字面量

TypeScript 新特性

字符串新类型

多行字符串

console.log(`
<a>1</a>
<sapn>2</span>
`)

字符串模版

let tt= 1
console.log(`你好我叫${tt}`)

自动拆分字符串

function test_n(template,name,age){
    console.log(template)
    console.log(name)
    console.log(age)
}
var myname = "兰海"
var getAge = ()=>{
    return 19
}
/*
直接函数调用 函数名`` 
->会将里面的 模版string 作为第一个参数 返回一个数组['我叫','，今年','!'] 根据模版字符串切割
->第一个模版和第二个模版分别对应函数中的第二第三参数 只会返回对应的值 // 兰海  // 19
*/
test_n`我叫${myname}，今年${getAge()}!`

参数新类型

参数类型

在参数名称后面使用冒号来指定参数的类型
类型推断机制 -> 根据编写的值来设定该变量的参数类型
(自定义类型)(字符串数组类型)(数字数组类型)(元组类型)(联合类型)(显式类型)

设置参数类型类型推断机制

var myname: string = "兰海"

//-> [ts] 后续变量声明必须属于同一类型。变量“myname”必须属于类型“string”，但此处却为类型“number”。
// 因为在前面已经定义了变量的类型 所以后续再给变量赋值必须遵循之前声明的类型
var myname = 1; // 报错