TypeScript入门

1.第一个TS程序

具体新建ts项目的方法参见：(20条消息) VsCode下新建TypeScript项目_vscode创建ts项目_Hello JOJO的博客-CSDN博客

在编写好ts代码后，需要进行编译成js代码，通常用自动编译，编译好的位置可以在tsconfig.json文件里的"outDir": "./dist"下写位置路径。

2.类型申明

1）通过类型申明，可以指定ts（参数，形参）的类型，ts编译器，自动检查。类型申明给变量设置了类型，使用变量只能存储该类型的值

let num: number = 10
num = 11
function abc(a: string){
    console.log(a);
    
}
abc('123')

2）原始数据类型

布尔类型: boolean

let flag:boolean=true
flag=false

数字类型

let a:number=10
a=11

字符串类型

let str:string='123'
str=''

3）数组和对象类型

有两种定义数组的方式

let arr1:number[]=[1,2,3]
arr1=[1,2,3]

//用泛型定义数组
let arr2:Array<number>=[10,20,30]

对象类型

let obj:object={}
obj=String

3.any和void两种类型

any代表任何类型的函数值

let h:any = 123;
h = true;
h = "123"
h = {}

void代表空值，指没有任何返回值的函数.void的位置可以写其他的数据类型

function fun1(): void{
    console.log(123);
}
console.log(fun1());

第二个console.log打印出来的是undefined

4.类型推断

ts会在没有明确指定类型的时候推测一个类型。

分为两种情况：

1）定义变量的时候，直接给变量赋值，则定义类型为对应的类型，比如let t = 123;

2) 定义变量的时候，没有赋值 比如：let g;

5.联合类型

表示取值可以为多种类型中的一种

let f: boolean| number |string = true
f = 123 //再次赋值，走类型推断，给变量定义一个类型
f = "123"

6.接口（对象类型）

1）接口（Interfaces）来定义对象的类型。它是对行为的抽象，而具体如何行动需要由类（classes）去实现（implement），接口一般首字母大写，定义接口时一般加上大写字母I；定义的变量比接口少了一些属性是不允许的；定义接口时可以加上问号？，定义对象？的属性代表可有可无。比如：

interface IPerson{
    name:string,
    age:number,
    sex?:string
}
let p:IPerson={
    name:"张三",
    age:18,
    sex:"男"
}

2）有时候我们希望一个接口允许有任意的属性，指的是定义属性名的时候不确定类型。

使用 [propName: string] 定义了任意属性取 string 类型的值。

需要注意的是，一旦定义了任意属性，那么确定属性和可选属性的类型都必须是它的类型的子集：

一个接口中只能定义一个任意属性。如果接口中有多个类型的属性，则可以在任意属性中使用联合类型：

interface IPerson{
    name:string,
    age:number,
    sex:string,
    //[propName:string]:any属性
    [propName:string]:string|number
}
let p:IPerson={
    name:"张三",
    age:18,
    sex:"男"
}

7.接口（数组类型）

用接口去定义数组，并对数组进行约束，写法如下：

interface INewArray{
    //任意属性，index表示数组中的下标
    [index:number]:number
}
//[1,2,3,4]
// 0,1,2,3
let arr:INewArray=[1,2,3,4]

8.接口（函数类型）

定义函数的方式，首先命名函数，然后写出函数表达式。在例子中，a和b指的是number类型，小括号后的是函数返回值是number

//ts 函数申明，命名函数
function add(a:number, b:number):number{
    return a+b
}
console.log(add(1,2));

9.剩余函数和重载函数

ES6 中，可以使用 ...rest 的方式获取函数中的剩余参数（rest 参数）

函数重载：函数名相同，形参不同的多个函数。可以通过重载定义多个函数的类型。例如，下面实现字符串拼接和数字相加

//函数重载申明
function newAdd(x:string,y:string):string
function newAdd(x:number,y:number):number

function newAdd(x:string|number,y:string|number):string | number{
    if(typeof x=='string'&& typeof y=='string'){
        return x + y
    } else if(typeof x == 'number'&& typeof y=='number'){
        return x+y
    }
}
console.log(newAdd(2,4));

10.类型断言

定义一个函数，获取到一个数字或字符串的长度

//类型断言
//1.变量 as 类型 2.<类型>变量
function getLength(x:string|number):number{
    if((x as string).length){
        return(<string>x).length
    }else{
        //将x转化为字符串，然后算长度
        return x.toString.length
    }
}
console.log(getLength(1234));

任何一个类型可以断言为any类型

11.类型别名和字符串字面量类型

类型别名用来给一个类型起新名字

type s = string
let str: s="123"

字符串字面量类型：用来约束取值只能是某几个字符串中的一个

12.元组

合并了不同类型的对象

let Tarr:[number,string]=[123,"123"]
//添加内容的时候，需要是number或string类型
Tarr.push(456)
Tarr.push("456")

13.枚举

使用枚举类型给一组数值赋予名称

14.类

1)属性和方法：描述了所创建的对象共同的属性和方法

实例化对象,new的时候，会执行类中的构造方法constructor

class Animal {
    name;
    constructor(name) {
        this.name = name;
    }
    sayHi() {
        return `My name is ${this.name}`;
    }
}

let a = new Animal('Jack');
console.log(a.sayHi());

2）类的继承：使用 extends 关键字实现继承，子类中使用 super 关键字来调用父类的构造函数和方法

class Animal {
    name:string
    age:number
    constructor(name:string,age:number) {
        this.name = name;
        this.age = age
    }
    sayHi(str:string) {
        console.log('hi,'+str);
    }
}

class Dog extends Animal {
    constructor(name: string,age: number) {
    // 调用父类的 constructor(name),使用super
        super(name,age); 
    }
  }

3）存取器

可以帮助我们控制对对象成员的访问

class Name{
    firstName: string
    lastName: string
    constructor(firstName:string,lastName:string){
        this.firstName=firstName
        this.lastName=lastName
    }
    //设置存取器
    //读取器：用于读取数据
    get fullName(){
        return this.firstName+this.lastName
    }
    //设置器：用来设置数据
    set fullName(value){
        console.log(value); 
    }
}

4）静态成员

使用 static 修饰符修饰的方法称为静态方法，它们不需要实例化，而是直接通过类来调用，在下面的例子里只能由A来引用

class A{
    static name1:string
    static sayHi(){
        console.log('hi');      
    }
}
const a1 = new A()
console.log(A.name1);
A.sayHi()

5）三种类修饰符

TypeScript 可以使用三种访问修饰符（Access Modifiers），分别是 public、private 和 protected。

• public 修饰的属性或方法是公有的，可以在任何地方被访问到，默认所有的属性和方法都是 public 的
• private 修饰的属性或方法是私有的，不能在声明它的类的外部访问
• protected 修饰的属性或方法是受保护的，它和 private 类似，区别是它在子类中也是允许被访问的

class B{
    public name1:string
    public constructor(name:string){
        this.name1=name
    }
    p(){
        console.log(this.name1);
    }
}
const b = new B("张三")
console.log(b.name1);
b.p()

6）readonly以及参数属性。readonly定义在参数上，那就是创建并初始化这个age参数

class X{
    readonly age:number//只读属性
    constructor(age:number){
        this.age=age
    }
    update(){

    }
}
const x = new X(13)
console.log(x)

7)抽象类和类的类型