TypeScript 入门基础：安装、配置与核心语法详解

TypeScript 的核心特性包括：

• 它基于 javaScript 构建，最终编译为 JavaScript。
• 具备强大的类型系统。
• 它是现代 JavaScript 的超集。
• 适用于大型项目开发，编译生成的纯 JS 代码可在所有浏览器中运行。

TypeScript 是区分大小写的语言。本文将引导你完成 TS 的安装、环境配置以及基础入门学习。

一、安装 TS

使用前需先完成安装：

npm install -g typescript

安装完成后，通过执行 tsc -v 命令检查已安装的版本。

创建第一个 TS 文件：01.ts，代码示例如下：

(()=>{
 function show(msg){
  return "字符串："+msg
 }
 let str = "前端"
 console.log(show(str))
})()

通过 script 标签引入 HTML 文件。

<script  src="./01.ts"></script>

页面可正常运行，因为 TS 兼容 JS 语法，直接在 HTML 中引入 TS 文件即可使用。此外，也可通过 node 命令运行该文件，执行结果正常。

若在 TS 文件中加入 TS 特有的语法：

// 添加类型支持
(()=>{
 function show(msg:string){
  //添加 string 的意义在于传入的 msg值只能是字符串，不可以是其他类型
  return "字符串："+msg
 }
 let str = "前端"
 console.log(show(str))
})()

此时浏览器直接运行会报错，导致执行中断。

因此需要将 TS 文件编译为 JS 文件。打开命令行工具，执行：

tsc 01.ts

执行后将自动生成 01.js 文件，查看生成的 JS 代码如下：

function show(msg) {
 return "字符串：" + msg;
}
(function () {
 var str = "前端";
 console.log(show(str));
})();

总结：

• 在 TS 文件中编写标准 JS 代码，并在 HTML 中引入该 TS 文件，浏览器可直接运行。
• 若 TS 文件包含 TS 特有语法，直接在 HTML 中引入并在浏览器运行会报错，此时需先将其编译为 JS 文件。
• 在 TS 文件函数的形参中使用类型修饰符，最终编译生成的 JS 文件中将不包含该类型信息。
• TS 中的 let 修饰符，在编译后的 JS 文件中会转换为 var。

二、Vscode 自动编译 TS

新建项目目录，在当前目录下打开命令行工具，执行：

tsc --init

系统将自动生成 tsconfig.json 文件，代码如下：

{
 "compilerOptions": {
  "target": "es2016",                                
  "module": "commonjs",                               
  "outDir": "./js",                                  
  "esModuleInterop": true,                             
  "forceConsistentCasingInFileNames": true,      
  "strict": true,                                                  
  "skipLibCheck": true                               
 }
}

注意：

outDir 指定 TS 文件编译后 JS 文件的存放目录。若指定文件夹不存在，系统将自动创建。

strict 表示开启严格模式。

新建 index.ts 文件，代码如下：

(() => {
 function showStr(str:string) {
  return str 
 }
 let a: string = "前端人"
 // 调用函数
 console.log("a",showStr(a));
})()

类型注解：在函数形参后添加修饰符，用于限制传入参数的类型，string 表示仅允许字符串类型。

在命令行中运行：

tsc -w 
//或
tsc -watch

系统将自动生成 js 文件夹及 index.js 文件。执行此命令后，只要 TS 文件发生更改，就会自动重新编译。

一切运行正常，未出现任何错误。

若调用函数时传入数值参数：

console.log(showStr(123));

此时编辑器内报错：类型“number”的参数不能赋给类型“string”的参数。

TS 能够提供智能提示，是因为 TS 提供了静态代码分析功能，可分析代码结构及提供的类型注解。

然而，tsc 编译时虽会提示错误，但仍会生成 JS 文件。由于 JS 是弱类型语言，JS 在执行时不会报错。

三、入门 TS

基础数据类型

• 布尔值类型。例如：let isDone: boolean = false;
• number 为数值类型，TS 支持二、八、十、十六进制数据。例如：let decLiteral: number = 6;
• string 为字符串类型。例如：let name: string = "bob";
• 表示数组类型。在数组名后添加元素类型 [] 及数组值。例如：let list: number[] = [1, 2, 3];
• 元组类型。例如：let arr:[string,number,boolean] = ['str',1,true]
• 枚举，为一组数值赋予友好名称。例如：enum Color { red, green, blue }
• 任意类型，当不确定传入值的类型时，可使用 any 类型。例如：let notSure:any = 1
• 空值，与 any 相反，表示没有任何类型。例如：function show():void { }
• null 和 undefined
• never 类型，表示永不存在的值。function error(message: string): never { throw new Error(message); }

接口

接口简单来说是一种约束。在 TS 中，接口的作用是为这些类型命名，并为你的代码或第三方代码定义契约。

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

使用形式：

(() => {
 //定义一个接口
 interface Person{
  firstName:string,//添加类型限定
  lastName:string
 }
 function showFullName(person:Person) {
  // 添加类型限定之后，内部会自动提示接口内的字段
  return person.firstName + '_' + person.lastName
 }
 const p = {
  firstName: "Hello",
  lastName: "World"
 }
 console.log("姓名",showFullName(p));
})()

若将 p 中的 firstName 注释掉，就会报错，提示：

在本实例中，接口的意义在于限定传入 showFullName 函数内数据的属性限制。

接口优点：自动检测传入的数据是否符合接口规范，若不符合则会报错。

类

TypeScript 类介绍

传统的 JavaScript 程序使用函数和基于原型的继承来创建可重用的组件，但对于熟悉面向对象方式的程序员来说有些棘手，因为他们使用的是基于类的继承，并且对象是由类构建的。从 ECMAScript 2015（即 ECMAScript 6）开始，JavaScript 程序员将能够使用基于类的面向对象方式。使用 TypeScript，我们允许开发者现在就能使用这些特性，并且编译后的 JavaScript 可以在所有主流浏览器和平台上运行，无需等待下一个 JavaScript 版本。

TS 的类只是一种语法糖，本质仍由 JS 函数实现。

使用示例：

(() => {
  //定义一个接口
  interface Person{
    firstName: string,
    lastName:string
  }
  //定义一个类
  class Personal {
    //定义公共的字段属性
    firstName: string
    lastName: string
    fullName: string
    // 构造函数
    constructor(firstName: string,lastName:string) {
      //更新属性数据
      this.firstName = firstName
      this.lastName = lastName
      this.fullName = this.firstName + this.lastName
    }
  }
  
  const p = new Personal('你','好')
  
  function showFullName(person: Person) {
    return person.firstName + person.lastName
  }
  console.log("p",showFullName(p));
})()

到此这篇关于 typeScript入门基础介绍的文章就介绍到这了，更多相关 typeScript 内容请搜索本站以前的文章或继续浏览下面的相关文章，希望大家以后多多支持本站！