一、初识TypeScript
typeScript是javaScript的一个超集，主要提供了类型系统和对ES6的支持，它由Microsoft开发，代码开源于GitHub上
他的第一个版本发布于2012年10月，经历了多次更新后，现在已成为前端社区中不可忽视的力量，不仅在Microsoft内部得到广泛运用，而且Google开发的Angular从2.0就开始使用了TypeScript作为开发语言，vue3.0也使用TypeScript进行了重构
TypeScript是由微软开发的自由和开源的编程语言，他是javaScript的一个超集，而且本质上向这个语言添加了可选的静态类型和基于类的面向对象编程
TypeScript提供最新和不断发展的javaScript特性，包括那些来自2015年的ECMAScript和未来的提案中的特性，比如异步功能和Decorators,以帮助建立健壮的组件
二、环境搭建
全局安装ts
npm install typescript -g
tsc -h //查看所有命令
tsc -v //查看版本号
tsc hello.ts //将.ts编译成.js文件，即使语法错误也会编译
tsc ./src/app.ts --outFile ./dist/app.js
tsc --rootDir ./src/* --outDir ./dist --watch //自动监听ts文件的变化并编译成js
tsc --init //生成ts配置文件tsconfig.json
tsc --watch //编写ts配置文件，指定’rootDir‘：’./src'和‘outDir':'.dist',再次运行
五分钟入门TypeScript
1、类型注解
TypeScript里的类型注解是一种轻量级的为函数或变量添加约束的方式
定义变量类型
let name:string = 'jne'
function greet(person:string){
return 'hello'+person
}
greet('jne')
greet(name)
greet()//会报错，这样定义参数是必填的
接口
定义一个接口
interface Person{ //定义接口一般首字母大写
firstName:string,
lastName:string
}
function greet (p:Person){
return hello ${p}
}
let user = {firstName:'Z',lastName:'z'}
greet（user)
类
class Student {
public fullName = ''
constructor(public firstName,public lastName){
this.fullName = ${firstName}${lastName}
}
}
// 接口
interface Person {
firstName:string,
lastName:string
}
// 类型注解
function greet(p:Person):string{
return hello ${p.firstName} ${p.lastName}
}
let user = new Student('在','ha')
greet（user)
四、基本数据类型
TypeScript支持与Javescript几乎相同的数据类型，此外还提供了实用的元组、枚举（enum)、any和void等
1.布尔 数字 字符串
//布尔
let isBol:boolean = false
//数据
let age:number = 20
//字符串
let str:string = 'a'
str = 'hah'
let msg = ${str}age
2. 数组 元组
//数组（type[] 或 Array)
let arr1:number[]=[1,2,3]
let arr2:string[]=['q','d']
let arr=[string,number]//只能一个string 一个number
let arr:(string|number)[]=[1,'q',3]//string,number不限制先后 不限制个数
let arr:Array< number|string >=['b','a']//string,number不限制先后，不限制个数
let arr3:Array< number>=[1,2,3]
let arr4:Array<string[]> = [['1'],['2','d']]
//元组 标识已知类型和数量的数组
let x:[string,number,boolean]=['hello',30,true]
x[3] = 'word'//会报错
3.枚举类型(定义枚举首字母要大写）
enum Cate {
office = '办公用品',
car,
clothe = '男装女装',
sport = '户外运动',
book = '图书音像'
}
let office_zh1 = Cate.office
4.any类型 void类型
//any类型
let noSure:any = 24
noSure = 'Nihao1'
noSure = [1,2,3]
let noSureArr:Array = ['hello',1,true]
let noSureArr:any[] = ['hello','a',1]
//void类型
声明一个void类型的变量没有什么大用，因为他只能赋值undefined和null
let v1:void= undefined
let v2:void = null
//当一个函数没有返回值时，你通常会见其返回类型时void
function foo(arg:any):void{
log("没有返回值")
}
5.对象不能动态添加属性
let obj = {a:1}
log(obj.a)//1
obj.a= 100 对
obj.b =3 //错误，对象不能动态添加属性
五.函数
1.函数声明
//一个函数有输入和输出，要在typescript中 进行约束
function sum (x:number,y:number):number{
return x+y
}
sum(1,3)
2.函数表达式
let sub = function (x:number,y:number):nubmer{
return x - y
}
//还可以通过接口的方式定义一个函数需要符合的形状
interface SearchFunc{
(source:string,subStr:string):boolea
}
let search：SearchFunc = function(source:string,subStr:string){
return source.search(subStr) !==-1
}
3.可选参数
//用？表示可选参数，可选参数必须在必须参数后面，可选参数后面不允许再出现必须参数了
function foo(a:string,b?:string):string{
if(b) return a+b
return a
}
foo('hello')
foo ('hello', 'word')
4.参数默认值
function bar(a:string='hello',b:string):string{
return a+b
}
bar(undefined,'world')
bar ('h1','list')
5.剩余参数
//函数中的剩余参数可以用...rest的方式获取
function push（arr:any[],...rest:any[]):any[]{
return [...arr,...rest]
}
6.参数不知道有几个
//...arg:number[]接收
function sum(...arg:number[]):number{
return [...arg]
}
六、接口
什么是接口？ 在面向对象的语言中，接口（interface）是一个很重要的概念，它是对行为的抽象，而具体如何行动需要由类（classes）去实现（implement) TypeScript中的接口是一个非常灵活的概念，除了可以用于对类的一部分行为进行抽象以外，也常用于对 对象的形状（shape)进行描述
在TypeScript中，我们使用接口（interface)来定义对象的类型
interface Person {
name:string,//必须属性
age:number,
mobile?:number,//可选属性
[propName:string]:any,//任意属性
readonly role:number,//只读属性
}
//赋值的时候，变量的形状必须和接口的形状保持一致
let tom:Person= {
name:"tom",
age:30,
mobile:11,
gender:'male',
role:1
}
注意：对只读属性的约束是在第一个给对象赋值的时候
泛型
泛型是指，函数、接口、类的时候不指定具体的类型，而是在使用的时候指定类型
function print(arg:T):void{
log{arg}
}
print('hello')
print(1)
pront(13.3)
function add< T >(a:T,b:T,c:T):void{
log(a,b,c)
}
add(1,2,3)
add('1','b','c')
add(1,'3','c')
###1.支持使用多个泛型
function swap< T,U >(tup:[T,U]):[U,T]{
return [tup[1],tup[0]]
}
swap<number,string>([100,'1']) //['1',100]
interface MyU{a:number,b:number}
swap<boolean,MyU>([true,{a:1,b:11}])
