TypeScript
js的超集 type+js 为js添加了类型系统
ts解析包
npm i -g typescript
运行 ：tsc hello.ts 会生成js文件
npm i -g ts-node
ts-node 可“直接” 在node中运行ts
ts-node hello.ts
ts不能在浏览器中直接运行,需要把ts转成js
生成tsconfig.json
在项目文件夹在 运行 tsc --init 生成tsconfig
ts编译器的配置文件
主要参数：
ts编译器的配置文件
include :用来制动那些ts文件需要编译
路径：** 任意目录
* 任意文件
exclude :不需要被编译
有默认值（一般不需要用）
compilerOptions :编译器的选项
target ：指定ts换成es版本
module :指定要使用的模块化规范
lib : 指定要用到的库，一般不用
outDir ：指定编译后的文件放在的目录
outFile :将编译后的文件合并
allowJs :是否对js文件进行编译 。默认false
checkJs :是否检查js语法 。默认false
removeComments :是否移除注释 。默认false
noEmit :不生成编译后的文件 。默认false
noEmitOnError :有错误的时候，不编译
alwaysStrict :编译后的文件是否使用严格模式
noImplicitAny ：不允许any类型
ts命令的监视模式
//单个文件监听编译
tsc --watch index.ts
tsc index.ts -w
//全文件监听编译（要有 tsconfig.json）
//监听所有的ts
tsc -w
注释
// 单行 ctrl + /
/* */ 多行 shift + ctrl +/
数据类型
number，string, boolean，array(数组)，tuple(元组),enum(枚举)，any(任意类型),null,undefined,void,never（其他类型），unknown（未知）
function ruyn():void{ console.log(666);}
注：
null,undefined 可以作为其他类型的子类型，
let dat:number=undefined
变量
1.声明变量并指定类型
let age:number;age=13
let age：number=13
let ags:number|string; //可以是数字或者字符
2.变量赋值
let num:number;
console.log(num)
变量定义但是不赋值，输出undefined
类型注解
给变量添加类型约束 （number）
数据类型
1.基本数据类型（原始类型）
number，string, boolean,undefined,null
number:整数+浮点数
2.复杂数据类型（对象类型）
类
class Mas{
name:string,
age:number
}
类型推论(推断)
1.声明变量并初始化
2.决定函数
对于简单的类型不需要写注解（ts可推断）
类型别名 （type alias）
type Nace ={name:string,age:15}
数组
let arr：string []=[]
let arr:Array=[22] (泛型)
如果数组的元素类型 不相一致，
let arr:(number | string) []=['sss',1]
let persson:{name:string,age:number}[]=[
{
name:"ddd",
age:12
}
]
type Nameee ={name:string,age:15}
let persson:Nameee[]=[
{
name:"ddd",
age:12
}
]
元组
元组中的类型可以不同
let arr:[string,number]=["ddd",12]
枚举
组织有关数据的一种方式 ，索引从1开始
实例：只有固定的集中情况
enum 枚举名称 {成1，成2，...}
约定枚举名称，成员名称，以大写字母开头
可作为变量的注解
enum Gen{Fe,M}
let use:Gen
Gen.Fe //访问
注： 枚举成员是只读的，可以访问，不能赋值，
枚举成员的值为数字的枚举：数字枚举 且是自增的。
enum F{
fss=1,
M
}
console.log(F.fss) //1
console.log(F[1]) //fss
枚举成员的值为字符串的枚举：字符串枚举 必须初始化
函数
function fun(arr:number[]){ }
实参要与形参一一对应，且符合形参的类型要求
函数类型：
通过接口的方式作为函数的类型使用
interface Ifunoutn{
(a:string,b:string):string
}
const funs:Ifunoutn=function(a:string,b:string):string{
return
}
返回值
function fun(arr:number[])：number{
return 123
}
:后的为返回值类型
function add（{one，two}：{one：number,two:number}）{
return one+two
}
add({one:1,two:1})
方法的可选参数
可选参数必须放后面
function getMsg(name:string,age?:number):string {
return name
} ,//age可以传，可以不传，
默认参数
function run(age:number=20,name:string) { }
剩余参数
// 扩展运算符
function run(...result:number[]):number {
var sum=0;
for (let i = 0; i <resullt.length ; i++) {
sum+=resullt[i]
}
return sum
}
sum(1,2,3,5,5)
可以
function run(a:number,...resullt:number[]):number {
console.log(a)
var sum=0;
for (let i = 0; i <resullt.length ; i++) {
sum+=resullt[i]
}
return sum
}
重载
function zhong(xixi:string):void;
function zhong(age:number):void;
function zhong(str:any):void {
console.log(str);
}
zhong(666)
类的访问类型
this是实例对象，static修饰的是静态属性，不能通过实例对象直接调用静态属性
通过类名.静态属性
class 类名 {
//实例属性
属性名：类型;
//静态属性
static 属性名：类型;
constructor(参数：类型){
this.属性名=参数
}
方法名(){
...
}
}
内外部可以调用
public
只能内部调用
private
只能内部调用 在继承中的类中可以使用
protected
只读
readonly
class Per{
name:string,
private age:number,
say:()=>{
//内部调用 age只能在内部调用
console.log(this.name)
console.log(this.age)
}，
}
let per=new Person()
//外部调用
per.name="单独的
//错误 ，不能在外部调用
per.age=0
per.say()
类的构造函数
利用在子类中调用父类用super，在子类中有constructor必须要有super（）
calss Pers{
public name:string；
constructor ( name:string){
this.name=name;
}
}
//简写
calss Pers{
constructor (public name:string){
}
}
//子类继承父类
class Tea extends Person{
constructor(public age:number){
super("dddd") //子类有constructor，必须要有super（参），此为父类
}
}
//外部访问受保护的 利用get 方法获取 set 改变
class Xia{
constructor(private _age:number){}
get ages(){
return this._age
}
set age(age:number){
this._age=age
}
}
let dddd=new Xia()
dddd.ages()
dddd.age=20
抽象类和只读
//只读
class Per{
public readonly _name:string
constructor(name:string){
this._name=name
}
}
//抽象
abstract class Person{
abstract skill() //抽象方法
}
class xixiixi extends Person{
skill(){ //必须要实现抽象类
}
}
类型保护
interface Per{
name:string;
skill:()=>{}
}
interface Per2{
name:string;
say:()={}
}
//方法一
function sss(na:Per | Per2){
if(na.say){
//断言
(na as Per2).say()
}else{
(na as Per2).skill()
}
}
对象
对象是结构化的，就是什么属性或方法
类型注解
let person: {
name: string;
age: number;
say: (num: string) => string;
}
接口（注解）
接口和接口之间是继承（extends） 类和接口之间是实现（implement）
interface 表示接口，接口名约定以 I 开头
接口中的属性不能有实际的值，方法为抽象方法
interface IestIn{
name:string
age:number
height?:number // height为可选值
[propname:string]:any //key自定义，可选可不选
say():string //返回值string类型
}
let p:IestIn={
name:"dfadf",
age:12
}
类也可以继承接口
类的类型，可以通过接口来实现
class Perdson implement IestIn{
name:string;
construstor(name:string){
this.name=name
}
age=12
say(){
return "dd"
}
}
接口继承接口
interface Infedd extends IestIn{
weuight:string
}
为了使接口表示函数类型，需要给接口一个调用签名
interface Isfunctin {
(pram1: string, pram2: string): boolean
}
const xxxx:Isfunctin = function (pram1: string, pram2: string): boolean {
return true
}
类型断言
值 as 更具体的类型
在获取document元素时，获取的时大类型的元素，图片的src属性不能使用，需要把类型转小才能
let img=document.querySelector("#imgs") as HTMLImageElement
img.src=""
//两种格式
let str="ddd"
(<string>str)。length
（str as string）
类型推断
没有明确的类型说明，系统自动推断一个类型
泛型
定义接口，函数，类的时候，不能预先确定数据的类型
般用 T
函数或者类，如果遇到类型不能明确
function join <T> (f:T,s:T){
//f,s为T类型
console.log(111）
}
jion <string> ("ddd","ddd");//T为string
//数组的使用 一般用 T
function muuu <T> (pra:T[]){
}
muuu<string> (['dddd'])
function muuu <T extends Per>(){
}
泛型接口
class Xx{
id:number
name:string
constructor(id:number,name:string){
this.id=id
this.name=name
}
}
interface Iss<T>{
data:Array<T>
add:(t:T)=>{}
}
class Qq implement Iss<Xx>{
data:Array<Xx>
add:(t:Xx)=>{
this.data.push(t)
}
}
const hahha:Qq=new Qq()'
hahha.add(new Xx(111,"休息"))
泛型类
class Claxx <T>{
name:T
}
const xx:Claxx<string> =new Claxx<string>()
命名空间
namespace 使用命名空间可以取消全局变量，使之模块化，不再是全局变量，要暴露成全局变量，用export 导出
运行生成单文件
需要需改tsconfig.json中的 "module":"amd" 和 "outFile":"./build/page.js"
要
多态
父类引用指向子类对象（左大右小），
不同类型的对象针对相同的方法，产生了不同的行为
var cat:Animal=new Cat("你")
声明文件
当使用第三方库时候，我们需要引入他的声明文件，才能够获取相应的代码补全，接口提示等功能，
声明语句：如果需要ts对新的语法进行检查，需要加载对应的类型说明代码
declare var jQuery: (selector:string)=> any;
声明文件：把声明语句放到一个单独的文件（jQuery.d.ts）中，ts会自动解析到项目中所有声明文件
下载声明文件：npm install @type/jquery --save-dev
