TypeScript入门

一、什么是TypeScript?

• TypeScript是JavaScript的超集，静态类型和面向对象编程
• TypeScript适合大型应用或者多人协作

二、TypeScript vs JavaScript

• TypeScript更适合编写应用程序
• TypeScript跨平台、开源
• 开始于JS，，结束于JS
• 重用JS，直接引入JS流行的库
• 类、接口、模块
• 在Vue、Node、React中都可以使用TypeScript
• 强类型限制（JavaScript是弱类型）

三、环境配置

npm install typescript -g
tsc --init 初始化
npm install @types/node --dev-save

四、数据类型

• 静态数据类型（interface）

// 自定义静态类型  -- 并引用
interface Student{
    name:string,
    age:number,
    grade:string
}

let Joseph:Student = {
    name:'joseph',
    age:22,
    grade:'大学毕业'
}
console.log(Joseph)
//{ name: 'joseph', age: 22, grade: '大学毕业' }

如果使用了静态数据类型，不仅意味着变量的类型不可以改变，还意味着变量的属性和方法也跟着确定了。大大提升了程序的健壮性，并且编辑器这时候会给你很好的语法提示，加快你的开发效率

• enum: 枚举

// enum 
enum REN{ nan = '男人'， nv = '女人'， yao = '妖' }
console.log(REN.yao)

• any: 任意数据类型（类型转换不会报错）

// any 任意类型
var t: any = 10
t = 'Joseph'
t = 'true'
console.log( t ) // true

五、函数的定义

• 正常定义

// 函数传递的是形参（可指定类型） 返回值类型string
function findPerson(age: number): string{
    return '找到了'+ age + ' 岁的人！ '
}

var age:number = 18
var result:string = findPerson(age)
console.log( result ) // 找到18岁的人

注意点

• 1.必须用function定义
• 2.函数与变量名必须遵循规则
• 3.传递多个参数的时候，’ , '隔开

• 有可选参数的函数

// 有可选参数
// 不加 " ？ "的参数都是必须传递的
function findPerson(age: number, status? : string): string{
    let str:string = ''
    str = '找到了'+ age + ' 岁的 '
    if( status != undefined ){
        str = str + status
    }
    return str
}

var result:string = findPerson(18, ' 小可爱 ')
console.log( result ) // 找到18岁的小可爱

• 有默认参数的函数

// 有默认参数的函数
function findPerson(age: number = 18 , status? : string = '人' ): string{
    let str:string = ''
    str = '找到了'+ age + ' 岁的 '
    if( status != undefined ){
        str = str + status
    }
    return str
}

var result:string = findPerson()
console.log( result ) // 找到18岁的人

六、函数的三种声明方式

• 函数声明法

// 最常用
function add( n1:number, n2:number ): number{
    return n1 + n2
}
console.log( add( 1, 2 ) )

• 函数表达式法

var add = function( n1:number, n2:number ): number{
    return n1 + n2
}
console.log( add( 1, 2 ) )

• 箭头函数声明

// 箭头函数声明
var add = (n1:number,n2:number):number =>{
    return n1 + n2
}
console.log(add(1,5))

七、数组赋值法

• 字面量赋值

// 1.字面量赋值法
// number类型的数组
let arr1:number[] = []
let arr2:number[] = [1,2,3,4,5]
// 字符串类型的数组
let arr3:Array<string> = ['Joseph','Elas','Lily']
// 布尔值类型
let arr4:Array<boolean> = [true,false,true]

• 构造函数赋值

// 2.构造函数赋值法
let arr11:number[] = new Array()
let arr22:number[] = new Array(1,2,3,4)
let arr33:Array<string> = new Array('Joseph','Elas','Lily')
let arr44:Array<boolean> = new Array(true,false,true)

• 元祖

// 当你定义了类型之后，传入的值必须相符，否则报错，还有一种方法，元祖
let arr5:number[] = [1,2,'ss']   // 报错
let x : [number,string]
x = [10,'Joseph'] // 正确
x = ['joseph',10] // 报错

八、字符串声明

• 普通类型

// 普通类型
let joseph:string = 'zhanggen'
console.log(joseph)     // zhanggen
console.log(joseph.length)    // 8

• 引用类型

// 引用类型
let joseph1:String = new String('zhanggen')
console.log(joseph1)    // [String : 'zhanggen']
console.log(joseph1.length)     // 8

九、日期的声明

// 不传递任何参数
let d:Date = new Date()
console.log(d)

// 传递一个整数
let d1:Date = new Date(1000)  // 1970-01-01 00:00:00
let d2:Date = new Date(2000)  // 1970-01-01 00:00:00
console.log(d1)
console.log(d2)

// 传递一个字符串
let d3:Date = new Date('2020/08/24 00:00:00')
let d4:Date = new Date('2020-08-24 00:00:00')
console.log(d3)
console.log(d4)

十、正则表达式

// 正则表达式
// RegExp
// 构造函数声明法
let reg1:RegExp = new RegExp('Joseph')
console.log(reg1)

let reg2:RegExp = new RegExp('Joseph','Elas')
console.log(reg2)

// 字面量声明
let reg3:RegExp = /joseph/i
let reg4:RegExp = /joseph/Elas

//  两个常用的方法
// test(string)   --  返回true\false
// exec(string )   ---  返回数组

十一、面向对象编程

• 类的声明

// 类是多个对象具体事物的一个抽象
// 对象是类的具体实现
// 声明类
class Class1{
    name:string
    age:number
    constructor(name:string,age:number){
        this.name = name
        this.age = age
    }
    say(){
        console.log('您好丫！')
    }
}

let person:Class1 = new Class1('Joseph',21)
console.log(person)
person.say()

// Class1 { name: 'Joseph', age: 21 }
// 您好丫！

• 访问修饰符

// public  公开的
// protected  受保护的
// private   私有的
class Person{
    public sex:string
    protected name:string
    private age:number
    public constructor(sex:string,name:string,age:number){
        this.sex = sex
        this.name = name
        this.age = age
    }
    public sayHello(){
        console.log('Hello!')
    }
    protected sayHelloTim(){
        console.log('Tim')
    }
}

var joseph:Person = new Person('男','Joseph',21)
console.log(josephs.sex)    // public
console.log(josephs.name)    // protected
console.log(josephs.age)     // protected
josephs.sayHello()   // public
josephs.sayHelloTim()    // protected

// readonly   只读
class Man{
    public readonly sex:string = '男'   // 只读属性在声明的时候就要赋值，否则会报错
}
var man:Man = new Man()
man.sex = '女'   // 只读属性不可修改

• 类的继承

// 类的继承
class People{
    public name:string
    protected age:number
    private skill:string
    public constructor(name:string,age:number,skill:string){
        this.name = name
        this.age = age
        this.skill = skill
    }
    public insterest(){
        console.log('我的兴趣!')
    }
}

let peopleObj:People = new People('Joseph',23,'codeing')
// peopleObj.insterest()

// 创建子类
class PeopleSSS extends People{
    public height:number = 190

    public insterest(){
        super.insterest()
        console.log('建立电商平台')
    }

    public makeMoney(){
        console.log('赚钱！')
    }
}

let haoxuan = new PeopleSSS('张皓轩',18,'swimming')
haoxuan.insterest() 
// 我的兴趣
// 建立电商平台  
haoxuan.makeMoney()
// 赚钱