发现TypeScript也逐渐地在不同类型的项目中出现；第一次真正接触到是在帮朋友看一个问题时候发现写的代码有些不同，也突然意识到自己以后可能也会使用它，就赶快在网上找了一些视频来学习；
这些视频是入门的，包括一些安装，数据类型，继承，类定义和属性接口等；看完这些视频大概是懂了，但是如何在项目上去写，什么时候用，哪里用可能还是需要实践才可以，回头去找一些demo瞧瞧去；下面附上视频地址bilibili:https://www.bilibili.com/video/av38379328/?p=14;
下面的这些总结就是通过边看视频边记录下来的：
TypeScript是微软开发的自由和开源的编程语言，是JavaScript的超集，遵循ES5,ES6规范，扩展了JavaScript的语法；最新的Vue,React也可以集成TypeScript;
(1) 如何使浏览器能够解析 .ts文件？
tsc ts文件 // 生成对应的.js文件
(2)vsCode如何配置自动编译.ts文件？
//第一步 确定生成js文件位置
cd 项目
tsc --init //生成tsconfig.json
进行修改：
{
...
"outDir": "./js" 生成文件位置
}
//第二步 任务 ->运行任务 -> tsc监视-tsconfig.json
//第三步 直接在index.html引入js文件
(3)数据类型
增加了类型校验，必须制定类型；有利于代码编写更加规范，利于维护；
var bool:boolean = true; var num:number = 111; var str:string = "string"; //ts定义数组方式 var arr:number[] = [1,2,3] //制定数组所有的数据类型必须相同 或者 var arr:Array<number> = [1,2,3] //元组类型 let arr:[number,string]=[123,'hahah'] 不能使纯字符串 //枚举类型 enum Flag {success = 1,error = 2}; let s: Flag = Flag.success; enum Color {red,blue,'orange'}; var c:Color = Color.red; console.log(c); //如果没有标识符 它的值对应的下标 0 enum Color {red,blue=3,'orange'}; var c:Color = Color.orange; console.log(c); //如果没有标识符 它的值对应的下标 4 //任意类型 var num:any = 123; //任意类型用处 var oBox:any = document.getElementById('box'); oBox.style.color = 'red'; //定义未赋值就是undefined var num: number | undefined; conosle.log(num);//undefined; //void类型： typescript中的void表示没有任何类型，一般用于定义方法的时候没有返回值。 function run:void(){console.log('aa')} function run:number(){ return 12;} 有返回值 //never类型： 是其他类型（包括null 和undefined）的子类型。带表从来不会出现的值 var a:undefined; a = undefined; var a:never; a = 12; //错误写法 a = (() => { throw new Errpr('错误')； })()
(4)定义函数
//函数声明法 function fn():string{ return 'fn' } //匿名函数法 var fun = function():number{ return 12; } //ts定义方法传参 function getTs(name: string,age:number):string{ return `${name} --- ${age}` } console.log(getTs('xiaoming',18)) //方法可选参数 // es5里面方法的实参和形参可以不一样，但是ts中必须一样，如果不一样就需要配置可选参数； function getTs(name: string,age?:number):string{ if(age){ return `${name} --- ${age}` }else{ return `${name} --- age保密` } } getTs('xiaoming') //可选参数 注意可选参数必须配置到参数的最后面，就是age? //默认参数 //es5里面没法设置默认参数，es6和ts中可以设置默认参数 function getTs(name: string,age:number=20):string{ if(age){ return `${name} --- ${age}` }else{ return `${name} --- age保密` } } getTs('xiaoming') //age可传可不传 //剩余参数 ... function sum(...res:number[]):number{ var sum = 0; for(var i = 0; i < res.length; i ++){ sum += res[i] } return sum; } sum(1,2,3) //函数重载 //java中的方法重载，重载指的是两个或者两个以上的同名函数，但他们的参数不一样，这时会出现函数重载的情况。 //typescript中的重载，通过为同一个函数提供多个函数类型定义下来多种功能的目的； //ts为了兼容es5一级es6重载的写法和java中有区别； //es5中出现同名方法，下面的会替换上面的方法； function fn(name:strign):string; function fn(age:number):number; function fn(str:any):any{ if(typeof str === 'string'){ return str; }else{ return str + 'haha'; } } fn('xiaoming'); fn(20); fn(true);//错误未找到
（5）es5 类的定义和静态类
//静态方法
function Person(){}
Person.getWork = function(){}
Person.getWork() //静态方法调用
//原型链+构造函数继承： 实例化子类时候没办法给父类传参
function Parent(name,age){
this.name = name;
this.run = function(){
console.log(`${name}running`);
}
}
Person.prototype.sex = '男'；
Person.prototype.work = function(){
conosle.log('working')
}
function web(name,age){}
Web.prototype = new Person();
var w = new Web('xiaoming',20); //实例化的时候没法给父类传参
w.run(); //undefined
//原型链+对象冒充继承
function Parent(name,age){
this.name = name;
this.run = function(){
console.log(`${name}running`);
}
}
Person.prototype.sex = '男'；
Person.prototype.work = function(){
conosle.log('working')
}
function web(name,age){
Person.call(this,name,age)
}
Web.prototype = new Person();
var w = new Web('xiaoming',20); //实例化的时候没法给父类传参
w.run(); //xiaomingrunning
(6)TypeScript中类，继承，类里面的修饰符
//1.定义类
class Person{
name: string; //属性 前面省略了PUBLIC关键词
constructor(n:string){ //构造函数 实例化的时候触发的方法
this.name = n;
}
run():void{
conosle.log(this.name);
}
}
var p = new Person('xiaoming');
p.run() //小明
class Person{
name: string;
constructor(n:string){ //构造函数 实例化的时候触发的方法
this.name = n;
}
getName():string{
return this.name;
}
setName(name:string):void{
this.name = name
}
}
var p = new Person('xiaoming');
p.getName(); //xiaoming
// 2.ts中实现继承 extends super
// 父类的的方法和子类相同，假如子类中含有父类相同的方法，则最先调用子类本身的方法
class Person{
name: string;
constructor(name:string){ //构造函数 实例化的时候触发的方法
this.name = name;
}
run():string{
conosle.log(`${this.name} 在运动`);
}
}
var p = new Person('xiaoming');
p.run(); //xiaoming在运动
//继承
class Web extends Person{
constructor(name:string){ //构造函数 实例化的时候触发的方法
super(name); //初始化 调用父类的构造函数
}
}
var w = new Web('xiaoming');
w.run(); //xiaoming在运动
//3. 类里面的修饰符 typescript里面定义属性的时候给我们提供了 三种修饰符
public :公有 在当前类里面 子类类外面都可以访问；
protected ： 保护类型 在当前类里面 子类里面可以访问，类外面没法访问；p.name就会报错
private ： 私有 在当前类里面可以访问， 子类和类外部没法访问；
属性如果不加修饰符 默认就是公有
(7）ts静态属性，静态；
//1.静态方法和实例方法
class Person{
public name: string;
static age:nmber = 20; //静态方法声明
constructor(name:string){
this.name = name;
}
run():string{ // 实例方法
conosle.log(`${this.name} 在运动`);
}
static print(){ //静态方法
console.log('print方法'+Preson.sex); //若想调用属性必须使用static声明
}
}
Person.print(); //静态方法调用
Person.sex;
//2.多态： 父类定义一个方法不实现，让继承他的子类去实现，每个子类都有不同的表现
// 多态属于继承
class Animal {
name: sring ;
constructor(name: string){
this.name = name;
}
eat(){
console.log('eat'); //只有eat方法，没有实际内容，由子类决定
}
}
class Dog extends Animal{
constructor(name: string){
super(name)
}
eat(){
return this.name+'吃狗粮'
}
}
class Cat extends Animal{
constructor(name: string){
super(name)
}
eat(){
return this.name+'吃猫粮'
}
}
//2.ts中 抽象方法和抽象类： 他是提供其他继承的基类，不能直接被实例化；
//用abstract关键字定义抽象类和抽象方法，抽象类中的抽象方法不包含具体实现并且在派生类中实现；
//abstract抽象方法只能放在类里面
//抽象类和抽象方法用来定义标准，标准：Animal这个类要求他的子类必须包含eat方法
//标准：
abstract class Animal{
public name: string;
constructor(name: string){
this.name = name;
}
abstract eat():any; //抽象类中的抽象方法不包含具体实现并且在派生类中实现；
run(){
console.log('其他方法可以不实现');
}
}
var a = new Animal() // 错误写法
class Dong extends Animal{
constructor(name: any){
super(name)
}
//抽象类的子类必须实现抽象类里面的抽象方法
eat(){
conosle.log(this.name + "吃狗粮")
}
}
var d = new Dog('二哈');
d.eat();
这些看着其实还是比较清晰的，也可能会代码不小心敲错，有需要的话可以直接找视频观看；