TypeScript起步

TypeScript 由微软开发的编程语言，是JavaScript 的一个超集。

JavaScript非常灵活，是一种解释语言，源代码不需要经过编译，直接在浏览器上运行时被解释，在运行时才会进行数据类型检查。

JavaScript在完整保留 JavaScript 运行时行为的基础上，通过引入静态类型系统来提高代码的可维护性，减少可能出现的 bug。

let age:number=18 
console.log(age.length)

如这段代码，编译时会报错Property 'length' does not exist on type 'number'.

类型注解

TypeScript提供了很多数据类型，通过类型对变量进行限制，称之为类型注解，使用类型注解后，就不能够随意变更变量的类型。
类型注解可以为变量、函数的参数及返回值添加约束
注解的格式：: 类型

let age:number=18 // : number是类型注解

在学习TypeScript之前，请保证先熟悉了JS基础、ES6和NPM的简单实用。

安装

一、全局安装typescript

npm install -g typescript

安装完成后就可以使用 tsc命令来执行 TypeScript 的代码

• 查看版本号

tsc -v

通常使用 .ts 作为 TypeScript 代码文件的扩展名扩展名.ts,之后我们大部门情况下会把TypeScript简称为ts。

var message= "Hello World" 
console.log(message)

如果这段代码保存在hello.ts文件中，浏览器无法执行
在命令行上，运行TypeScript编译器：

tsc hello.ts

编译后hello.ts同级的文件夹中会出现hello.js文件，是编译后生成的es5代码。

生成 tsconfig.json 配置文件

tsconfig.json文件用于配置编译选项，ts编译器可以根据它的信息来对代码进行编译,tsconfig.json 文件所在目录即为项目根目录。

tsc --init

tsconfig.json中的配置项比较多，常见的有：

{
	// 编译器的选项
  "compilerOptions": {
  	 "target": "esnext", // 指定ts被编译为的es的版本 其中esnext表示ECMAScript的下一个版本
  	 "module": "ESNext", // 指定生成代码的模块化标准，'none', 'commonjs', 'amd', 'system', 'umd', 'es6', 'es2015', 'es2020', 'es2022', 'esnext', 'node16', 'nodenext'
  	 "moduleResolution": "Node", // 指定模块解析（查找）策略，有"node"和"classic"两种类型
  	 "lib": ["ESNext", "DOM"], // 指定项目中要用的库，前端运行代码不需要改变其默认值
  	 "skipLibCheck": true, // 跳过库文件的类型检查
  	 "outDir": "./dist", // 指定编译后文件所在的目录
  	 "baseUrl": ".", // 非相对模块的导入可以相对于baseUrl或通过下文会讲到的路径映射来进行解析
  	// 路径映射，相对于baseUrl
    "paths": {
      "@/*": ["src/*"],
      "#/*": ["types/*"]
    },
    "types":[] // 指定需要包含的模块，只有在这里列出的模块的声明文件才会被加载
    "removeComments": false //是否移除注释
  },
  // 指定被编译的`文件列表`，编译文件较少时适用
  files:["hello.ts"],
  // 指定被编译文件所在目录（**表示任意目录，*表示任意文件）
  include:["src/**/*.ts","types/**/*.d.ts","mocks/**/*.ts"],
  // 指定不需要被编译的文件目录
  exclude:[],
  // 定义被继承的配置文件，可以将不想重复写的配置项引入进来
  extends:{}
}

生成tsconfig.json文件后，在命令行执行tsc会按照tsconfig.json的配置编译整个项目。