浅谈-开篇前言
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; // 报错
