TypeScript常用知识点整理

介绍

TypeScript 是 JavaScript 的一个超集，添加了静态类型支持和更多现代编程特性，提高了代码的可靠性和可维护性。最终会被编译成标准的 JavaScript 代码运行。

使用npm install -g typescript进行全局安装

将编写好的ts代码进行运行，第一种是手动运行直接输入对应的命令tsc加对应的ts文件，另一种是使用vscode tsc --init自动运行

基础

1，原始数据类型

JavaScript的类型分为两种:原始数据类型(Primitive data types）和对象类型(Objecttypes)。
原始数据类型包括:布尔值、数值、字符串、null 、 undefined以及ES6中的新类型 symbol等。

一，布尔类型，字符串，数字类型，undefined和null在ts中的使用

export{}
//布尔类型
let flag:boolean=true
console.log(flag)
//数字类型
let num:number=20
console.log(num)
//字符串类型
let str1:string='李四'
str1='张三'
console.log(str1)

//undefined和null
let unf:undefined=undefined
let nu:null=null
console.log(unf,nu)

编译完成转成js之后的代码

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
//布尔类型
let flag = true;
console.log(flag);
//数字类型
let num = 20;
console.log(num);
//字符串类型
let str1 = '李四';
str1 = '张三';
console.log(str1);
//undefined和null
let unf = undefined;
let nu = null;
console.log(unf, nu);

2，数组

在ts中进行数组的定义

export{}
//定义数组和前两种基本数据类型有所不同
//方式一
let arr1:number[]=[1,2,3]
console.log(arr1)
//方式二使用泛型
let arr2:Array<number>=[4,5,6]
console.log(arr2)

被转成js之后

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
//定义数组和前两种基本数据类型有所不同
//方式一
let arr1 = [1, 2, 3];
console.log(arr1);
//方式二使用泛型
let arr2 = [4, 5, 6];
console.log(arr2);

3，对象

表示非原始类型，除了number，string，boolean之外的类型

export{}
let obj:object={}
let obj2:object={a:1}
obj = new String()
obj=obj2
console.log(obj)

被编译js之后

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
let obj = {};
let obj2 = { a: 1 };
obj = new String();
obj = obj2;
console.log(obj);

4，any类型

在typescript中，任何类型的值都可以赋值给 any ， any 也可以赋值给任意类型

export{}

let type1:any=true
type1=222
console.log(type1)

let newArr:any[]=[1,2,3,4]
console.log(newArr)

被转换成ts之后和最终的输出结果

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
let type1 = true;
type1 = 222;
console.log(type1);
let newArr = [1, 2, 3, 4];
console.log(newArr);

5，void类型

它表示空值，代表没有任何返回值的函数

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

转换成ts之后及输出

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
function fun1() {
    console.log(123);
}
console.log(fun1());

6，类型推断

ts在没有明确指定类型的时候会推测一个类型,分两种情况

1，定义变量的时候，直接给变量赋值，则定义类型为对应的类型

2，定义变量的时候，没有赋值，则定义类型为any类型

export{}

let t1=123//这里t1是number类型,如果给t1一个字符串则会有错误提示
let g2;//这里的g2可以是任意类型的，相当于any
g2=123
g2=''
g2=[]

7，联合类型

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

export{}
//定义布尔类型和number类型的
let f:boolean|number=true//表示这个值可以接受布尔值和number两种的任意一种
f=123
f=false
console.log(f)

8，接口-对象类型

什么是接口?

1，在面向对象语言中，接口(Interfaces)是一个概念，它是对行为的抽象，而具体如何行动需要由类(classes）去实现( implement);
2，TypeScript 中的接口是一个非常灵活的概念，除了可用于对类的一部分行为进行抽象以外，也常用于对「对象的形状(Shape)」进行描述;

3，接口它是对行为的抽像，用于行为的描述，理解为一种约束;

4，定义中的属性和类型必须要和使用的相同;

interface Person{
    name:string,
    age:number,
    height?:number,//加了问了表示是一个可选属性,这个属性可以有，也可以没有
    readonly add:string,//定义一个只读的，对其行为进行一个约束
}
let P:Person={
    name:"李四",
    age:18,
    height:24,
    add:"某某区"
}
//如果在对id进行操作,则会给出错误提示
P.id='某某区1'//这里会错误提示

9，接口-数组类型

接口对数组进行约束

interface InewArray{
    [index:number]:number//表示接口里面有任意值，并且只能是number类型
}
//进行定义
let arr:InewArray=[1,2,3,4]//如果这里面传入非number类型，会有错误提示
console.log(arr)//1，2，3，4

10，接口-函数类型

对函数进行约束

//定义了一个add函数，a和b都是number类型
//后面的number表示这个函数的返回为number类型
function add(a:number,b:number): number{
    return a+b
}
console.log(add(1,2))
//另一种定义函数的方式
//这里的问号也是代表可选参数,必选参数不可以放在可选参数的后面
let res=function(a:string,b?:string):string{
    return a+b
}
console.log(res('type','script'))
//多个参数的情况
function fn(x:string,y:string,...args:number[]){
    console.log(x,y,args)
}
fn('','',1,2,3)
//多个函数类型
function add2(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
    }
}
add2(2,3)
add2('张三','李四')

11，类型断言

将一个联合类型断言为其中一个类型

//定义一个函数，获取到一个数字或字符串的长度
//类型断言，可以手动指定一个类型,两种方式
//1，变量 as 类型
//2,<类型> 变量
function StringLength(x:string|number):number{
    if((x as string).length){
        return (<string>x).length
    }else{
        return x.toString().length
    }
}
console.log(StringLength('typescript'))
console.log(StringLength(123))

将任何一个类型断言为any

进阶

1，类型别名

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

type s=string//给类型起别名
let str:s='typescript'
console.log(str)
//另一种使用方式
type all=string|number|boolean
let a1:all=123
console.log(a1)

2，字符串字面量类型

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

//例如指定只能取以下的几个值
type stringName='张李'|'李四'|'王五'
//这里的name只能取上面三个中的一个
let name:stringName="李四"
console.log(name)

3，元组

数组合并了相同类型的对象，而元组合并了不同类型的对象

//定义一个元组
let Arr:[number,string]=[123,'Script']
//添加内容的时候，需要的是number和string类型即可
Arr.push(456)
Arr.push('hhh')
//如果添加的数据越界会给出错误提示

4，枚举

枚举(Enum)类型用于取值被限定在一定范围内的，比如一周只能有七天，颜色限定为红
绿蓝等。

1，常数项

枚举的使用

enum NumberType{
    one=1,
    two=2,
    three,
    four
}
console.log(NumberType)

注意点：

1，每个数据值都可以是元素
2，如果没有手动赋值，默认第一个参数为0,后面的递增加1
3，后面的值如果没有手动赋值，会根据前面的值递

编译成js之后

(function (NumberType) {
    NumberType[NumberType["one"] = 1] = "one";
    NumberType[NumberType["two"] = 2] = "two";
    NumberType[NumberType["three"] = 3] = "three";
    NumberType[NumberType["four"] = 4] = "four";
})(NumberType || (NumberType = {}));
console.log(NumberType);

2，计算所得项

//计算所得项
enum abs{
    red,
    //这里写了计算所得项，需要放置在已经确定的赋值枚举项之前
    blur='blur'.length
}

5，类

1，在类中定义属性和方法

//ts中的类
class Person {
    //对被传入的属性进行类型限定
    constructor(name, age) {
        this.name = name;
        this.age = age;
    }
    say(str) {
        console.log("haha", str);
    }
}
let Obj = new Person("张三", 28);
Obj.say("王五");

编译成js之后

class Person {
    constructor(name, age) {
        this.name = name;
        this.age = age;
    }
    say(str) {
        console.log("haha", str);
    }
}
let Obj = new Person("张三", 28);
Obj.say("王五");
//编译成ts后输出  haha 王五

2，使用类进行继承

//使用类进行继承  父类
class Dog{
    name:string
    age:number
    constructor(name:string,age:number){
        this.name=name
        this.age=age
    }
    say(str:string){
        console.log("ha",str)
    }
}
//子类
class cat extends Dog{
    constructor(name:string,age:number){
        //调用父类的构造函数，使用super
        super(name,age)
    }
    jump(str:string){
        console.log("jump",str)
    }
}

let cat1=new Dog("旺财",4)
console.log(cat1.say("来财"))
let cat2=new cat("花猫",3)
console.log(cat2.jump("小多多"))

被编译之后的js代码

class Dog {
    constructor(name, age) {
        this.name = name;
        this.age = age;
    }
    say(str) {
        console.log("ha", str);
    }
}
//子类
class cat extends Dog {
    constructor(name, age) {
        //调用父类的构造函数，使用super
        super(name, age);
    }
    jump(str) {
        console.log("jump", str);
    }
}
let cat1 = new Dog("旺财", 4);
console.log(cat1.say("来财"));
let cat2 = new cat("花猫", 3);
console.log(cat2.jump("小多多"));

3，修饰符public，private 和 protected

TypeScript 可以使用三种访问修饰符(Access Modifiers)，分别是 public(公共) 、private(私有的) 和protected(受保护的)
1，public 修饰的属性或方法是公有的，可以在任何地方被访问到，默认所有的属性和方法都
是 public
2，private修饰的属性或方法是私有的，不能在声明它的类的外部访问
3，protected 修饰的属性或方法是受保护的，它和 private 类似，区别是它在子类中也是允许
被访问的

4，接口继承类

class newDog{
    name:string
    age:number
    constructor(name:string,age:number){
        this.name=name
        this.age=age
    }
    say(str:string){
        console.log("ha",str)
    }
}
//接口只会继承类中的实例属性和方法
interface newCat extends newDog{
    age:number
}
let person:newCat={
    name:"",
    age:18,
    say(){

    }
}
console.log(person)

6，类与接口的联合使用

一般来讲，一个类只能继承自另一个类，有时候不同类之间可以有一些共有的特性，这时候就可以把特性提取成接口（interfaces)，用implements关键字来实现。这个特性大大提高了面向对象的灵活性。

interface Ising{
    sing()
}
interface Sdance{
    dance()
}
class obj1 implements Ising{
    sing(){

    }
}
class obj2 implements Sdance{
    dance(){
        
    }
}

const o1=new obj1()
const o2=new obj2()
o1.sing()
o2.dance()

7，接口的合并

如果定义了两个相同名字的函数，接口或类，那么它们会合并成一个类型

//合并的数据要一模一样，有一处不同会有错误提示
interface Dog{
    name:"来财"
}
interface Dog{
    name:"来财",
    age:15
}

const cat:Dog={name:"来财",age:15}
console.log(cat)

8，泛型

泛型(Generics）是指在定义函数、接口或类的时候，不预先指定具体的类型，而在使用的时候再指定类型的一种特性。
1，具体使用

/*
1,定义一个函数，传入两个参数，第一个参数是数据，第二个参数是数量
2,函数的作用：根据数量产生对应个数的数据，存放在一个数组中
*/
//这里的T表示可以输入任何类型
//如果没有确定会自动进行类型推断
function newGetArr<T>(value:T,count:number):T[]{
    let arr:T[]=[]
    for(let i=0;i<count;i++){
        arr.push(value)
    }
    return arr
}
console.log(newGetArr(123,3))

2，对数据互换位置

function updataStr<T,U>(t:[T,U]):[U,T]{
    return [t[1],t[0]]
}
console.log(updataStr(['456',123]))

3，泛型约束

在函数内部使用泛型变量的时候，由于事先不知道它是哪种类型，所以不能随意的操作它的属性
或方法。

//获取参数的长度,约束这个任意输入的类型，必须有length属性
interface Llength{
    length:number
}
//通过接口约束类型
function getLength<T extends Llength>(x:T):number{
    return x.length
}
console.log(getLength('123'))

4，泛型接口和泛型类

//泛型接口
interface IArr{
    <T>(value:T,count:number):Array<T>
}
let newGetArr2:IArr=function<T>(value:T,count:number):T[]{
    let arr:T[]=[]
    for(let i=0;i<count;i++){
        arr.push(value)
    }
    return arr
}
console.log(newGetArr2(123,3))
//泛型类
class Person1<T>{
    name:string
    age:T
    constructor(name:string,age:T){
        this.name=name
        this.age=age
    }
}
const p1 = new Person1<String>("ts","123")
const p2 = new Person1<number>("456",20)
console.log(p1,p2)

typeSscript使用感受：

1，有一定的学习成本，感觉和学一门新语言差不多;

2，和直接使用javascript写代码相比，typescript需要编写更多的代码无形之中增加了工作量；