什么是typescript？typescript的特点、typescript的安装与编译、typescript的原始和内置类型、typescript类型注解基本语法、typescript常见类型

最新推荐文章于 2024-09-13 11:24:28 发布

Ensoleile2021

最新推荐文章于 2024-09-13 11:24:28 发布

阅读量2.5k

点赞数 1

文章标签： typescript javascript 前端

本文链接：https://blog.csdn.net/weixin_51525398/article/details/122194512

版权

本文介绍了TypeScript，JavaScript的超集，提供类型系统和对ES6+的支持。讨论了其特点，如静态类型检查、类型推论，并详细讲解了类型注解、原始和内置类型、变量作用域以及类和泛型等核心概念。适合前端开发者学习。

摘要由CSDN通过智能技术生成

前言

typescript官网

一、 typescript介绍

TypeScript 是 JavaScript 的一个超集，主要提供了类型系统和对 ES6+ 的支持，让javascript变成强类型语言。它由 Microsoft 开发，代码开源于 GitHub 上。

1、特点

可以在开发阶段和编译阶段就发现大部分错误，这总比在运行时候出错好
不显式的定义类型，也能够自动做出类型推论
即使 TypeScript 编译报错，也可以生成 JavaScript 文件
Google 开发的 Angular 就是使用 TypeScript 编写的
TypeScript 拥抱了 ES6+ 规范

2、痛点

有一定的学习成本，需要理解接口（Interfaces）、泛型（Generics）、类（Classes）、枚举类型（Enums）等前端工程师可能不是很熟悉的东西短期可能会增加一些开发成本，多写一些类型的定义。对于长期维护的项目，TypeScript 能够减少其维护成本

3、安装

npm install -g typescript  \  yarn global add typescript
tsc -v 测试  c就是compile（编译）

4、编译

编译所完成的事情，就是把ts的代码转换成js的代码。因为浏览器或者node环境最终识别的是js，而不是ts。

 tsc test.ts
//监听
 tsc test.ts --watch

类型不匹配时，编辑报错，但可以生成js（编辑通过），如果不希望编译通过需要配tsconfig.json

使用步骤：

1、新建test.ts
    随便写上一些代码，js的代码就行（因为ts完全支持js）
2、使用命令：tsc  test.ts 把ts编译成js
    在当前目录下就会产生一个test.js文件。
3、新建html文件，引入test.js文件，就ok了。

编辑器推荐使用vscode，因为，vscode对ts的提示非常好。

二、TypeScript 类型

1、原始类型

js里本来就有的(基本)类型：number、string、boolean、null、undefined、Symbol

ts里新增的类型：void、any、never、联合、函数、数组类型、类 …

2、内置对象类型

DOM

Document、HTMLElement、NodeList …

内置类

Boolean、Error、Date、RegExp、Math …

三、类型注解

1、基本语法：

声明 变量:类型;           //定义变量，没有赋值时，默认值是： undefined
声明 变量:类型=值;        //定义变量并赋值。严格要求值是定义的类型

如：

let n:number; //定义一个变量n，类型是number，没有赋值，默认值是undefined
let num:number = 12; //没有问题
num = "hi"; //出错，类型不对。

let str:string = "hello";

2、不同类型的数据互相赋值的规则（类型权重）

类型权重
	any > boolean number string void 联合、函数、数组类型、类 > null undefined -> never

权重高的类型，接受权重低的类型值；
反之不对；
同等权重的数据不能互相赋值（特殊情况：null和undefined可以互相赋值）；

如：

//权重高的类型，接受低权重的类型值
let a:any;
a = 12;
a ="hello";

//权重低的类型，也可以接受权重高的类型
let a1:number;
let b1:any="hello";
a1 = b1;
console.log(a1);

let n = null;
n = 12;
console.log(n);

//同类型权重的数据不能互相赋值（特殊情况：null和undefined可以互相赋值）；
//null和undefined可以互相赋值
let t = null;
t = undefined;

void类型可以赋值为null和undefined。其它类型不行
any类型

any类型可以赋值为任何类型的数据，但是，类型依然是any类型

四、ts变量作用域

1、全局作用域(项目) 默认

在一个项目目录下，所有文件的变量都暴露在全局

2、模块作用域(文件)

变量封闭在模块内部，在内部全局使用。所以，只有在文件内部使用了export（export default）就会让全局变量变成模块作用域。

如：

let temp:number; //定义变量，作用域范围是当前文件（模块）
temp = 12;

export {};

3、函数作用域，块级作用域等等

五、类型

1、类型推论

定义变量时，没有明确的指定数据类型，ts会依照**值**推断出一个类型。

let a = "hi"; //虽然没有明确类型，但是ts推论出a变量是字符串类型
a=200; //这句话不能通过

2、联合类型

一个变量的取值可以是多种类型。

如：
let temp: string | number; //表示temp变量的取值可以是string，也可以是number

temp = 12;//没有问题
temp = "hi";//没有问题
temp = false;//不行。

3、对象类型

对象的类型使用class或者**接口**（interface）来描述，也可以使用type定。
class我们已经学过，接口如何使用
接口的定义，就是为了描述对象。



**1、interface**
//定义类型（自定义类型）
//格式
interface 接口名{
    键:类型。
}

//还记得nodejs中的那个schema吗。

interface IPerson{
    name:string,//必须的属性值
    readonly sex:string|number, //只读,联合类型
    age?:number//可选的属性值 
}

let p1:IPerson={
    name:"张三疯",
    sex:"男",
    // wife:"梅超风" //不行，我们定义的p1类型IPerson里没有wife
};

p1.name="张四疯";
// p1.sex="女";//不行，不能改
p1.age = 12; //没有问题
// p1.wife ="梅超风"; //这句话在编译时会报错，因为，我们定义的p1类型IPerson里没有wife

console.log(p1);


2、type
type IPerson={
    name:string,
    sex:string|number,
    age?:number
}

5、数组元素的类型

// 变量:类型[] 
// 变量:Array<类型>   //等价于： 变量:类型[]
// let 变量:(类型名|类型名2)[]

let arr:number[] = [1,2,3,4]

let arr2:(number|string)[]=['aa',12]

let arr3:Array<number>=[12,3]

6、函数中的类型限制

对函数的限定，能够限定形参的类型，返回值的类型。

形参：输入

返回值：输出

即：函数的限定就是限定它的输入和输出

//1、声明式

//注意：下面的代码是定义函数
//function 函数名(参数:类型):返回类型{函数体}
function sum(x:number, y:string):number {
    
}

//2、函数表达式
//注意：下面的代码是定义函数类型
//定义函数类型，不赋值
//let 变量:输入类型 => 输出类型 

// 1、定义一个变量show3，show3是函数类型
let show3:(m:number,n:string,a?:string)=>number;

// 2、给变量show赋值（相当于定义函数）
show3 = function(t:number,s:string){
    return t;
}
// 3、调用函数
let b = show3(12,"23","12");


//函数表达式
//定义的同时赋值
//let 变量:输入类型 => 输出类型 = function(参数){}
let show3:(a:number,b:string,c?) => number = function (a,b){
  return a;
}



//接口定义函数类型(自定义类型)
interface Func {
    (a:number,b:string):boolean
  }

let show5:Func = function(a:number,b:string){
    return true;
}

show5(12,"hi");

// void类型修饰函数返回值时，表示函数不能有任何返回值
function fn():void{
    return "hi"; //出错
}

7、类型断言（断定）

绕过编译器的类型推断，手动指定一个值的类型

类型断言的注意点：

1）、类型断言不做类型转换
2）、自定义类型也可以用来做断言
3）、权重最低

**格式：**
1）、<类型>变量 
2）、变量 as 类型

(<string>a).length   //断言字符串
(a as string).length //断言字符串

如：
function fn(a:string|number):boolean{
    //a.length; 这么写是错的，因为，a的取值有两种可能性，length没法直接使用，会报错
    // 使用断言，就不会报错
    
    let n:number = (<string>a).length;  //当a是string时，使用length属性。如果是number，不会给n赋值。那么，n是undefined，
    
    console.log(n);
    return <boolean>0;//这是不对的，因为，类型断言不做类型转换
}

fn("hello"); //5
fn(120);//undefined

8、类

在TS中，不支持es6类的写法。支持es7类的写法。

class Person{
    constructor(){
        //声明了一个属性，并且赋值
        this.name = "张三疯";//这不行了，这是es6的写法
    }
}


class Person{
    //声明一个属性name，并且赋初值。
    name = "张三疯";//这可以，es7的写法
    
    constructor(){
    }    
    
}

es7类的写法：


class Person{
    //声明实例属性
    name1="张三疯"; //定义属性name，值为 张三疯
    age:number;//age属性没有赋值

    //实例方法
    show(){
        console.log(this.name1,this.age);
    }
    //构造函数
    constructor(name,age){
        //赋值
        this.name1 = name;
        this.age = age;
    }

    //静态属性(类的属性)
    static count=0;
    
    //静态方法（类的方法）
    static max(){
        return 110;
    }    
}


let p = new Person("张三疯","男");
p.show();

console.log(Person.count);
console.log(Person.max());

ES7类的访问控制符

控制类内部的属性(实例，类)|方法(实例，类) 的被访问权限

//public   公共的，谁都可以访问(类内、外)，默认就是public
//private  私有的，当前类内使用
//protected  受保护的，当前类内部+子类内部可以使用。

class Person {

  public namee:string='张三丰';//实例属性
  private age:number; //私有的，只能当前类内部使用
  protected address:string; //受保护的，当前类内部及其子类内部
  address2:string; //不加的情况下 是public

  protected static VER:string='1.11.1' //类属性 静态属性
	
	constructor(namee:string,age:number){
	   	this.namee = namee;//实例属性第一次的修改
    	this.age = age||0;//实例属性第一次的修改
  }

  private show(){}   //私有的实例方法
  private static show2(){} //私有的类方法（静态方法）
}

9、泛型

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

其实就是，把类型也当作变量（类型是可变的，未知的），在使用时，把类型变量放在<> 里，表示类型的声明。

1)、函数泛型

//定义 function 函数名<类型变量声明>(length: number, value: 类型变量): Array<类型变量> {}

//如： function 函数<T>(length: number, value: T): Array<T> {}；其中T就是类型的变量名

//调用 函数<string>(参数) //给变量T赋值为string。

//栗子

function fn<T>(a1:T,a2:T):Array<T>{
    return [a1,a2];
}

console.log(fn<number>(12,23));

console.log(fn<string>("hello","world"));

console.log(fn<number>("hello","world")); //这个不行，因为，要求T 是number类型，而传入的参数"hello"是string类型。

2)、类泛型

//定了了Person类，并声明了两个类型T和U。
class Person<T,U>{
    p1:T; //属性p1的类型是T
    p2:U; //属性p2的类型是U


    constructor(p1:T,p2:U){
        this.p1 = p1;
        this.p2 = p2;
    }

    show():void{
        console.log(this.p1,this.p2);
    }
    
}
//实例化时，给T赋值为string，U赋值为number
let p = new Person<String,number>("hello",2);
p.show();