提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档


文章目录


目录

文章目录

1、TypeScript的定义

2、TypeScript的特征

3、TypeScript的运行环境

（3.1）TypeScript环境安装

（3.2）TypeScript编译运行

4、变量声明和基础类型

（4.1）基础类型

（4.1.1）string、number、boolean

（4.1.2）数组

（4.1.3）元组

（4.1.4）枚举

（4.1.5）Any

（4.1.6）void、Null 和 Undefined

（4.1.7）never

（4.1.8）object

5、类型断言

6、初始接口

（6.1）可选属性

（6.2）任意属性

（6.3）只读属性

1、TypeScript的定义

添加了类型系统的 JavaScript，适用于任何规模的项目。

它强调了 TypeScript 的两个最重要的特性——类型系统、适用于任何规模。

什么是 TypeScript？

  • TypeScript 是添加了类型系统的 JavaScript，适用于任何规模的项目。
  • TypeScript 是一门静态类型、弱类型的语言。
  • TypeScript 是完全兼容 JavaScript 的，它不会修改 JavaScript 运行时的特性。
  • TypeScript 可以编译为 JavaScript，然后运行在浏览器、Node.js 等任何能运行 JavaScript 的环境中。
  • TypeScript 拥有很多编译选项，类型检查的严格程度由你决定。
  • TypeScript 可以和 JavaScript 共存，这意味着 JavaScript 项目能够渐进式的迁移到 TypeScript。
  • TypeScript 增强了编辑器（IDE）的功能，提供了代码补全、接口提示、跳转到定义、代码重构等能力。
  • TypeScript 拥有活跃的社区，大多数常用的第三方库都提供了类型声明。
  • TypeScript 与标准同步发展，符合最新的 ECMAScript 标准（stage 3）。

2、TypeScript的特征

（1）类型系统


（2）适用于任何规模


（3）与标准同步

TypeScript的缺点：

        1、有一定的学习成本，需要理解接口（Interfaces）、泛型（Generics）、类（Class）、枚举类型（Enums）等前端工程师可能不是很熟悉的概念；
        2、短期可能会增加一些开发成本，毕竟要多写一些类型的定义，不过对于一个需要长期维护的项目，TypeScript 能够减少其维护成本；
        3、集成到构建流程需要一些工作量；ts-loader
        4、可能和一些库结合的不是很完美；

3、TypeScript的运行环境

（3.1）TypeScript环境安装

（1）安装node.js（10以上的版本都可以）

（2）npm i -g typescript

（3）查看TypeScript的版本：tsc -v

（4）创建tsconfig.js文件：tsc --init

（3.2）TypeScript编译运行

运行方式一：

（1）创建app.ts文件

（2）进入app.ts文件所在目录，执行命令：tsc app.ts

（3）运行：node app.js

运行方式二（直接运行）：

（1）安装全局的ts-node模块 ：npm install -g ts-node

（2）运行ts文件：ts-node app.ts

自动编译：

（1）终端 -> 运行任务 -> 选择里面的tsc:监视

使用tsconfig进行构建：

（1）tsc --build tsconfig.json


4、变量声明和基础类型

JavaScript 的类型分为两种：原始数据类型（Primitive data types）和对象类型（Object types）。

原始数据类型包括：布尔值、数值、字符串、null、undefined 以及 ES6 中的新类型 Symbol 和 ES10 中的新类型 BigInt。

变量声明示例如下：

（4.1）基础类型

（4.1.1）string、number、boolean

string、number、boolean变量声明示例如下：
var names:string="明明";

var age:number=20;

var c:boolean=true;

console.log(names,age,c);//隐式推论，通过赋初始值，var str:string
var str="hello vue3" 
console.log(str);

（4.1.2）数组

数组的表示方法：

「类型 + 方括号」表示法，数组的项中不允许出现其他的类型

let fibonacci: number[] = [1, 1, 2, 3, 5];

数组泛型Array<elemType> 来表示数组：

数组示例如下：

let arr4:Array<number|string>;
arr4=[100,200,"hello","word"]
console.log(arr4);let arr=[10,20,30,40,50] 
console.log(arr);

//数组定义类型的两种方式
let arr:number[]=[10,20,30,40,50] 
let arr3:Array<number>=[1,2,3,4,5]
arr=arr3;

let arr2:string[]=["hello","vue3"]
console.log(arr,arr2);//自定义数组类型
type mytype="666"|boolean|100
let arr5:Array<boolean|mytype>;
arr5=["666",100,false,true]
console.log(arr5)

（4.1.3）元组

元组

元组类型允许表示一个已知元素数量和类型的数组，各元素的类型不必相同。 比如，你可以定义一对值分别为 string和number类型的元组。

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

元组：每一位的类型和顺序严格执行

元组示例如下：

元组：每一位的类型和顺序严格执行
let arr:[number,string,boolean];
arr=[100,"string",false]

//解构赋值
let arr:[number,string]=[100,"px"]
let a:number=arr[0]
console.log(a);

（4.1.4）枚举

枚举

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

枚举使用enum 关键字来定义

枚举示例如下：

枚举成员会被赋值为从 0 开始递增的数字，同时也会对枚举值到枚举名进行反向映射：

enum Days {Sun, Mon, Tue, Wed, Thu, Fri, Sat};

console.log(Days["Sun"] === 0); // true
console.log(Days["Mon"] === 1); // true
console.log(Days["Tue"] === 2); // true
console.log(Days["Sat"] === 6); // true

console.log(Days[0] === "Sun"); // true
console.log(Days[1] === "Mon"); // true
console.log(Days[2] === "Tue"); // true
console.log(Days[6] === "Sat"); // true//声明一个枚举类型
enum regiterData {EmailErr,pwDErr,VerifyErr}
console.log(regiterData["EmailErr"]);
console.log(regiterData["pwDErr"]);
console.log(regiterData["VerifyErr"]);

//输出值为：0 1 2

//给默认值
enum regiterData {EmailErr=200,pwDErr,VerifyErr}
console.log(regiterData["EmailErr"]);
console.log(regiterData["pwDErr"]);
console.log(regiterData["VerifyErr"]);

//输出值为：200 201 202

（4.1.5）Any

有时需要为那些在编程阶段还不清楚类型的变量指定一个类型。

let notSure: any = 4;
notSure = "maybe a string instead";
notSure = false; // okay, definitely a boolean
声明一个变量为任意值之后，对它的任何操作，返回的内容类型都是任意值。
let anyThing: any = 'hello';
console.log(anyThing.myName);

（4.1.6）void、Null 和 Undefined

void，无效的，表示没有任何类型。 当一个函数没有返回值时，其返回值类型是 void；

function warnUser(): void {
    console.log("This is my warning message");
}
声明一个void类型的变量没什么用，因为只能为它赋予undefined和null：
let unusable: void = undefined;

undefined和null两者各自有自己的类型undefined和null。 和 void相似

（4.1.7）never

`never`类型表示的是那些永不存在的值的类型。 
// 返回never的函数必须存在无法达到的终点
function error(message: string): never {
    throw new Error(message);
}

// 推断的返回值类型为never
function fail() {
    return error("Something failed");
}

（4.1.8）object

object表示非原始类型，也就是引用类型，是除number，string，boolean，symbol，null或undefined之外的类型，可以使用"对象", "数组对象"、string、number等为其赋值，null和undefined不行的。 之所以Object变量可以接收任何对象，是因为Object是所有类的父类。

object示例如下：

let obj:object=[1,2,3,4]
let obj2:object={age:200,name:"vue"}
console.log(typeof obj,typeof obj2);
console.log(typeof null); //objectlet a:Object = [1, 2, 3]
console.log(a);

5、类型断言

类型断言可以用来手动指定一个值的类型。

类型断言只能够「欺骗」TypeScript 编译器，无法避免运行时的错误。

语法: 值 as 类型 或者 <类型>值

类型断言有两种形式。 其一是“尖括号”语法：
let someValue: any = "this is a string";
let strLength: number = (<string>someValue).length;
另一个为as语法：
let someValue: any = "this is a string";
let strLength: number = (someValue as string).length;
类型断言不是类型转换，断言成一个联合类型中不存在的类型是不允许的。

6、初始接口

在 TypeScript 中，我们使用接口（Interfaces）来定义对象的类型。

TypeScript 中的接口是一个非常灵活的概念，除了可用于对类的一部分行为进行抽象以外，也常用于对「对象的形状（Shape）」进行描述。

接口的例子如下：

interface person{
    name:string,
    age:number
}
let dd:person
dd={
    name:"marry",
    age:22
}

dd 的形状必须和接口 person 一致。

接口一般首字母大写

以下两种情况都不允许：

定义的变量比接口少了一些属性是不允许的：

TypeScript运行环境_typescript

 

多一些属性也是不允许的：

TypeScript运行环境_数组_02

赋值的时候，变量的形状必须和接口的形状保持一致

（6.1）可选属性

有时我们希望不要完全匹配一个形状，那么可以用可选属性：

interface person{
    name:string,
    age?:number  //可选属性
}
let dd:person
dd={
    name:"marry"
}
console.log(dd);

可选属性的含义是该属性可以不存在。

这时仍然不允许添加未定义的属性

（6.2）任意属性

有时候我们希望一个接口允许有任意的属性，可以使用如下方式：

interface Person {
    name: string;
    age?: number;
    [propName: string]: any;
}

let tom: Person = {
    name: 'Tom',
    gender: 'male'
};

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

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

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

interface Person {
    name: string;
    age?: number;
    [propName: string]: string | number;
}

let tom: Person = {
    name: 'Tom',
    age: 25,
    gender: 'male'
};

（6.3）只读属性

可以在属性名前用 readonly来指定只读属性:

注：TypeScript具有ReadonlyArray<T>类型，它与Array<T>相似，只是把所有可变方法去掉了，因此可以确保数组创建后再也不能被修改。

readonly vs const：做为变量使用的话用 const，若做为属性则使用readonly。

readonly示例如下：

interface Person {
    readonly id: number; //id只能读，不能赋值
    name: string;
    age?: number;
    [propName: string]: any;
}

let tom: Person = {
    id: 89757,
    name: 'Tom',
    gender: 'male'
};

tom.id = 9527;

上例中，使用 readonly 定义的属性 id 初始化后，又被赋值了，所以会报错。

注意，只读的约束存在于第一次给对象赋值的时候，而不是第一次给只读属性赋值的时候