typescript比Java难学 typescript

一、ts

1、ts运行环境搭建

2、变量 / 类型 （共有）

3、TS特有的类型 - 变量的类型

4、函数的参数、返回值类型

5、对象类型

6、联合类型

7、类型别名

8、类型断言

9、非空类型断言

10、可选链

11、 !! 和 ??的作用

12、字面量类型

13、字面量推理

14、类型缩小

let str:string="你好 ts"

let str1:string = "你好，typesrcipe"

let flag:boolean=true

flag=false

let a:number = 1234
console.log(a)



// 我们以前es5语法
var arr=[1, "3232", false]

// 数组类型（array） ts中定义数组有两种方式
// 第一种： 定义数组
let arr1:number[]=[1,2,34,45]
console.log(arr1);
// 第二种定义数组的方式
let arr2:Array<number>=[1,2,32,4545,34]


// 元祖类型（tuple）属于数组的一种
let arr3:[string,number,boolean] = ["ts", 2.3, true]

// 枚举类型
enum Flag {success=1, error=-1}
var f:Flag=Flag.success
console.log(f);     //1


// enum Color {red, blue, oragne}
// var c:Color=Color.blue
// console.log(c);     //输出：1，如果我们没给里面的值赋值的话，就是默认的索引位置


enum Color {red, blue=5, oragne}
var c:Color=Color.red
var c1:Color=Color.blue
var c2:Color=Color.oragne
console.log(c);     //输出： 0
console.log(c1);     //输出： 5
console.log(c2);     //输出： 6,因为没有赋值，以orange为基准，加1



// #任意类型(any)
var num:number = 123;
// num ='strinnum';        //报错
// 我们需要这么定义
var num1:any = 1324;
num1 = "string"            //编译通过
//任意类型的用处
var oBox:any = document.getElementById('box')
oBox.style.color='red'


// null 和 undefined 其他（never类型）数据类型的子类型
var num:number;
console.log(num);   //输出： undefined

var num11:undefined;
console.log(num11);   //输出： undefined

var num11:undefined | undefined;
console.log(num11);   //输出： undefined

// 一个元素可能是number类型，也可能是null 可能是undefined
var num2:number | null | undefined
console.log(num2);

// void类型: typescript中的void表示没有任何类型，一般用于定义方法的时候方法没有返回值
// es5的定义方法： 我们之前定义方法是这么定义的
function run(){
    console.log('run');
}
run();
// 在ts中，如果该方法没有返回值
function run1():void{
    console.log('run1');
}


// never类型: 是其他类型（包括null和undefined）的子类型，代表从不会出现的值
// 这意味着声明never的变量只能被never类型所赋值
var a3:undefined;
a3=undefined;

var b:null;
b=null;

var n:never;
//n=132;    //错误的写法
n =(() =>{
    throw new Error('错误')
})()



// 4函数的定义
// 4.1es5定义函数的两种方法
// 第一种： 函数声明法
function run11(){
    return 'run11';
}
run11()
// 第二种：匿名函数 
var run22 = function(){
    return 'run2'
}
run22();

//4.2ts中，我们是这么定义函数的的：
// 第一种：函数声明法
function srun():string{
    // return 123    //错误写法
    return 'srun'
}
// 第二种：匿名函数 
var srun2 = function():string{
    return 'srun2'
}
srun2();    /*调用方法 */

//4.3ts定义方法传参
// 第一种
function getInfo(name:string, age:number):string{
    return  `${name}----------${age}`;
}
getInfo("yicheng", 13)

// 第二种
var getInfo1=function(name:string, age:number):string{
    return  `${name}----------${age}`;
}
getInfo1("yicheng", 13)

// 没有方法的返回值
function vrun():void{
    console.log('vrun.');
    
}

// 4.4方法可选参数
// es5中里面方法的实参和形参可以不一样,但是ts中必须一样,如果不一样,需要配置可选参数
// 参数,可传可不传,直接加个 ?
function getInfo2(name:string, age?:number):string{
    if(age){
        return  `${name}----------${age}`;
    }else{
        return  `${name}----------年龄保密`;
    }
}
getInfo2("yicheng")
getInfo2("yichengi", 23)
// 注意: 参选参数必须配置到参数的最后面


// 4.5默认参数
// es5里面没法设置默认参数,es6和ts中都可以设置默认参数
function getInfo22(name:string, age:number=22):string{
    if(age){
        return  `${name}----------${age}`;
    }else{
        return  `${name}----------年龄保密`;
    }
}
getInfo22('yicheng')    //会把20给我们打印出来
getInfo22('yicheng',30) //如果传入30,会把30给我们打印出来

// 4.6剩余参数
function sum(a:number, b:number, c:number, d:number):number{
    return a+b+c+d;
}
// 三点运算符   接受新传递过来的值
// 第一种写法
function sum1(...result:number[]):number{
    var sum = 0;
    for(var i = 0; i < result.length; i++){
        sum += result[i];
    }
    return sum;
}
alert(sum1(1,2,2,33,23))

// 第二种写法
function sum11(a:number, b:number, ...result:number[]):number{
    var sum = a+b;
    for(var i = 0; i < result.length; i++){
        sum += result[i];
    }
    return sum;
}
alert(sum1(1,2,2,33,23))

// 4.7typescript函数重载: 通过为同一个函数提供多个函数类型定义来试下多种功能的目的。
// es5中出现同名方法，下面的会替换上面的方法
function css(config){
    console.log("config");
}
function css(config, value){
    console.log("config, value");
    
}

// ts中的重载
function getInfo3(name:string):string;

function getInfo3(age:number):string;

function getInfo3(str:any):any{
    if(typeof str === 'string'){
        return '我叫：' + str;
    }else{
        return '我的年龄是' + str;
    }
}
alert(getInfo3('张三'))     //正确写法
alert(getInfo3(20))         //正确写法

// alert(getInfo3(true))         //错误写法


// 4.8箭头函数
// this直向的问题， 箭头函数里面的this指向上下文

// es5的写法
setTimeout(function(){
    alert('run')
}, 1000)

// es6写法
setTimeout(() =>{
    alert('run')
})



// 5.类
// 5.1 es5里面定义： 类

// a. 最简单的类
function Person(){
    this.name='张三';
    this.age=20;
}
//不是直接调用，我们需要实例化：
var p = new Person()
p.name;
p.age;

// b. 构造函数和原型链里面增加方法
function Person(){
    this.name='张三';      //属性
    this.age=20;

    this.run = function(){       //实例方法，我们只有通过new后才可以调用，
        alert(this.name + '在运动');
    }
}
// 我们可以通过原型链来扩展属性和方法, 但是，原型链上面的属性会被多个实例共享， 构造不会
person.prototype.sex='男'
person.prototype.work=function(){
    console.log(this.name + '工作');
}

var p = new Person();
alert(p.name)

p.run();
// 这样，我们也可以调用原型链的方法
p.work();

// c.类里面的静态方法
Person.getInfo=function(){
    alert('我是静态方法');
}
// 调用静态方法
Person.getInfo();


// 5.2 Web类 继承Person类， 用得最多得就是原型链 对象冒充的组合继承模式
// 对象冒充
function Web(){
    Person.call(this);  //对象冒充继承
}
//调用
var w = new Web();
w.run();    //对象冒充，可以继承构造函数里面得属性和方法
w.work();   //报错，对象冒充，可以继承构造函数里面得属性和方法，但是没法继承原型链上的属性和方法、


// 原型链继承
function Web(){

}
Web.prototype = new Person();   //原型链实现基础
var w = new Web();
// 原型链实现继承： 可以继承构造函数里面的属性和方法， 也可以继承原型链上面的属性和方法
w.run();
w.work();


// 原型链继承的缺陷
function Person(name, age){
    this.name = name;
    this.age = age;
    this.run = function(){
        alert(this.name + '在运动');
    }
}
Person.prototype.sex = '男'
Person.prototype.work=function(){
    alert(this.name + '在工作')
}

function Web(name, age){

}
Web.prototype = new Person();

var w = new Web('赵四', 20)     //实例化子类的时候无法给父类传参
w.run();



// 5.3、ts中定义类
class Person{
    name:String;    //属性 前面省略了public关键词
     
    constructor(n:string){
        this.name = n;
    }

    run():void{
        alert(this.name)
    }
}
var p = new Person('张三');
p.run();


class Person{
    name:string;   
     
    constructor(name:string){
        this.name = name;
    }

    getName():string{
        return this.name;
    }

    setName(name:string):void{
        this.name = name;
    }
}
var p = new Person('张三');
alert(p.getName());     //张三

p.setName('李四')
alert(p.getName());     //李四


// 5.4、ts中继承: 通过两个关键字 extends、super
class Person{
    name:string;
    constructor(name:string){
        this.name = name;
    }

    run():string{
        return `${this.name}在运动`
    }
}

var p = new Person('王五')
p.run();
class Web extends Person{

}
class Web extends Person{
    constructor(name:string){
        super(name);    //初始化父类的构造函数
    }
}
var w = new Web('李四');  //直接报错， 我们应该改成这样


// 5.5、父类子类探讨： 首先去子类找，再去父类找
class Web extends Person{
    constructor(name:string){
        super(name);    //初始化父类的构造函数
    }

    run():string{
        return `${this.name}在运动-子类`;
    }

    work(){
        alert(`${this.name}在工作`)
    }
}
var w = new Web('李四'); 
alert(w.run()); //  执行的是子类的run()方法