带你了解typescript

Posted 2021-07-04 stay_少年与梦

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了带你了解typescript相关的知识，希望对你有一定的参考价值。

TypeScript 是什么？

1.TypeScript（简称：TS）是 javascript 的超集（JS 有的 TS 都有）。
2. TypeScript = Type + JavaScript（为 JS 添加了类型系统）。
3. TypeScript 是微软开发的开源编程语言，设计目标是开发大型应用。
4. 可以在任何浏览器、任何计算机、任何操作系统上运行。

javaScript是什么？

JavaScript 是什么JavaScript（缩写：JS）是一种运行在客户端（比如：浏览器）中的编程语言。当应用于浏览器时，为网站提供动态交互特性，让网页“动”起来。

JavaScript 与 TypeScript 的区别

TypeScript 是 JavaScript 的超集，扩展了 JavaScript 的语法，因此现有的 JavaScript 代码可与 TypeScript 一起工作无需任何修改，TypeScript 通过类型注解提供编译时的静态类型检查。
TypeScript 可处理已有的 JavaScript 代码，并只对其中的 TypeScript 代码进行编译。

运行环境

JavaScript 的运行环境：1 浏览器 2 Node.js。 Node.js 让 JavaScript 摆脱了浏览器的束缚，可以实现服务端/桌面端编程等。其他：微信小程序、微信小游戏等等。

typescript特点

以js为基础构建的语言
可以在任何支持js的平台中执行
ts扩展了js，并添加了类型

注意

ts不能被js解析器直接执行

typescript语法增加了什么？

类型
支持es的新特性
添加了es语法不具备的新特性
丰富的配置选项

TypeScript开发环境搭建

下载node.js

安装node.js（推荐安装稳定版）
使用npm全局安装typescript

window+R 进入命令窗口
输入npm i -g typescript
查看是否安装成功
tsc -V

创建一个ts文件

在这里插入图片描述

使用tsc对ts文件进行编译
- 进入命令行
- 进入ts文件所在目录
- 执行命令：tsc xxx（你的文件名）.ts

基本类型

类型声明

类型声明是TS非常重要的一个特点
通过类型声明可以指定TS中变量（参数、形参）的类型
指定类型后，当为变量赋值时，TS编译器会自动检查值是否符合类型声明，符合则赋值，否则报错
类型声明就是给变量设置了类型，使得变量只能存储某种类型的值

语法：

 let 变量: 类型;
 
 let 变量: 类型 = 值;
 
 function fn(参数: 类型, 参数: 类型): 类型{
     ...
 }

自动类型判断

TS拥有自动的类型判断机制
当对变量的声明和赋值是同时进行的，TS编译器会自动判断变量的类型
所以如果你的变量的声明和赋值时同时进行的，可以省略掉类型声明

类型：

类型	例子	描述
number	1, -33, 2.5	任意数字
string	‘hi’, “hi”, `hi`	任意字符串
boolean	true、false	布尔值true或false
字面量	其本身	限制变量的值就是该字面量的值
any	*	任意类型
unknown	*	类型安全的any
void	空值（undefined）	没有值（或undefined）
never	没有值	不能是任何值
object	{name:‘小红’}	任意的JS对象
array	[1,2,3]	任意JS数组
tuple	[4,5]	元素，TS新增类型，固定长度数组
enum	enum{A, B}	枚举，TS中新增类型

number类型

示例

let age:number=18;
let hex: number = 0xf00d;
let binary: number = 0b1010;
let octal: number = 0o744;
let big: bigint = 100n;

boolean类型

示例

let isStudying:boolean=true
let isplayStudying:boolean=false
console.log(isStudying);
console.log(isplayStudying);

string类型

示例

let food:string='糖葫芦'
console.log(food);

let color: string = "blue";
    color = 'red';

字面量

也可以使用字面量去指定变量的类型，通过字面量可以确定变量的取值范围
示例

let color: 'red' | 'blue' | 'black';
    let num: 1 | 2 | 3 | 4 | 5;

any类型

any表示任意类型，一个变量设置类型为any后相当于对该变量关闭了ts的类型检测。
代码示例：

let d:any;
d=10;
d="sf";

unknown

表示未知类型的值

let notSure: unknown = 4;
    notSure = 'hello';

注意

unknown 实际上就是一个类型安全的any
unknown类型的变量，不能直接赋值给其他变量

void

用来表示空，以函数为例，就表示没有返回值的函数
示例

function fn():void{
   
}

never

表示永远不会返回结果

function fn2():never{
   throw new Error("报错")
}

object

表示一个对象

let hah:object;
hah={};
hah=function(){

}

array

数组的类型声明：
1.类型[ ]
2.Array<类型>

string [ ]表示字符串数组

let ee:string[];

number[ ] 表示数值数组

let g:Array<number>

元组

元组就是固定长度的数组

语法：[类型,类型,类型]
示例：

let h:[string,string];
h=['hah','jaja']

enum 枚举类型

示例

enum Gender{
    male=0,
    female=1,
}
let i:{name:string,gender:Gender};
i={
    name: 'male',
    gender:Gender.male
}
console.log(i.gender===Gender.male);

类型断言

有些情况下，变量的类型对于我们来说是很明确，但是TS编译器却并不清楚，此时，可以通过类型断言来告诉编译器变量的类型。
作用：可以用来告诉解析器变量的实际类型

语法;
1. 变量 as 类型
2. <类型>变量

s=e as string;//第一种
s=<string>e;//第二种

编译选项

自动编译文件

编译文件时，使用 -w 命令后，TS编译器会自动监视文件的变化，并在文件发生变化时对文件进行重新编译。
示例：

tsc xxx.ts -w

自动编译整个项目

如果直接使用tsc指令，则可以自动将当前项目下的所有ts文件编译为js文件。
但是能直接使用tsc命令的前提时，要先在项目根目录下创建一个ts的配置文件 tsconfig.json
tsconfig.json是一个JSON文件，添加配置文件后，只需只需 tsc 命令即可完成对整个项目的编译
配置选项：
- include
  - 定义希望被编译文件所在的目录
  - 默认值：["**/*"]
  - 示例：
    - ```
    "include":["src/**/*", "tests/**/*"]
```
- 上述示例中，所有src目录和tests目录下的文件都会被编译
- exclude
  - 定义需要排除在外的目录
  - 默认值：[“node_modules”, “bower_components”, “jspm_packages”]
  - 示例：
    - ```
    "exclude": ["./src/hello/**/*"]
```
- 上述示例中，src下hello目录下的文件都不会被编译
- extends
  - 定义被继承的配置文件
  - 示例：
    - ```
    "extends": "./configs/base"
```
- 上述示例中，当前配置文件中会自动包含config目录下base.json中的所有配置信息
- files
  - 指定被编译文件的列表，只有需要编译的文件少时才会用到
  - 示例：
    - ```
    "files": [
        "core.ts",
        "sys.ts",
        "types.ts",
        "scanner.ts",
        "parser.ts",
        "utilities.ts",
        "binder.ts",
        "checker.ts",
        "tsc.ts"
      ]
```
- 列表中的文件都会被TS编译器所编译
- compilerOptions
  - 编译选项是配置文件中非常重要也比较复杂的配置选项
  - 在compilerOptions中包含多个子选项，用来完成对编译的配置
    - 项目选项
      - target
        
        设置ts代码编译的目标版本
        
        可选值：
        
        ES3（默认）、ES5、ES6/ES2015、ES7/ES2016、ES2017、ES2018、ES2019、ES2020、ESNext
        
        示例：
        
        "compilerOptions": { "target": "ES6" }
        
        如上设置，我们所编写的ts代码将会被编译为ES6版本的js代码
      - lib
        
        指定代码运行时所包含的库（宿主环境）
        
        可选值：
        
        ES5、ES6/ES2015、ES7/ES2016、ES2017、ES2018、ES2019、ES2020、ESNext、DOM、WebWorker、ScriptHost …
        
        示例：
        
        "compilerOptions": { "target": "ES6", "lib": ["ES6", "DOM"], "outDir": "dist", "outFile": "dist/aa.js" }
  - module
    - 设置编译后代码使用的模块化系统
    - 可选值：
      - CommonJS、UMD、AMD、System、ES2020、ESNext、None
    - 示例：
      - "compilerOptions": { "module": "CommonJS" }
    - outDir
      - 编译后文件的所在目录
      - 默认情况下，编译后的js文件会和ts文件位于相同的目录，设置outDir后可以改变编译后文件的位置
      - 示例：
        
        "compilerOptions": { "outDir": "dist" }
        
        设置后编译后的js文件将会生成到dist目录
    - outFile
      - 将所有的文件编译为一个js文件
      - 默认会将所有的编写在全局作用域中的代码合并为一个js文件，如果module制定了None、System或AMD则会将模块一起合并到文件之中
      - 示例：
        
        "compilerOptions": { "outFile": "dist/app.js" }
    - rootDir
      - 指定代码的根目录，默认情况下编译后文件的目录结构会以最长的公共目录为根目录，通过rootDir可以手动指定根目录
      - 示例：
        
        "compilerOptions": { "rootDir": "./src" }
    - allowJs
      - 是否对js文件编译
    - checkJs
      - 是否对js文件进行检查
      - 示例：
        
        "compilerOptions": { "allowJs": true, "checkJs": true }
    - removeComments
      - 是否删除注释
      - 默认值：false
    - noEmit
      - 不对代码进行编译
      - 默认值：false
    - sourceMap
      - 是否生成sourceMap
      - 默认值：false
    - 严格检查
      - strict
        启用所有的严格检查，默认值为true，设置后相当于开启了所有的严格检查
      - alwaysStrict
        总是以严格模式对代码进行编译
      - noImplicitAny
        禁止隐式的any类型
      - noImplicitThis
        禁止类型不明确的this
      - strictBindCallApply
        严格检查bind、call和apply的参数列表
      - strictFunctionTypes
        严格检查函数的类型
      - strictNullChecks
        严格的空值检查
      - strictPropertyInitialization
        严格检查属性是否初始化
    - 额外检查
      - noFallthroughCasesInSwitch
        检查switch语句包含正确的break
      - noImplicitReturns
        检查函数没有隐式的返回值
      - noUnusedLocals
        检查未使用的局部变量
      - noUnusedParameters
        检查未使用的参数
    - 高级
      - allowUnreachableCode
        检查不可达代码
        可选值：
        true，忽略不可达代码
        false，不可达代码将引起错误
      - noEmitOnError
        有错误的情况下不进行编译
        默认值：false

总结

今天我们学习了typescript的基础知识，
typescript相对于javascript而言，语法更加的严格，多了js没有的功能，语法也更加的规范，更方便了我们写代码中，快速的找到语法上的错误。
我们学习它，慢慢就会喜欢上它的。

最后作者创作不易,如果文章对你有帮助的话,记得点赞和评论哟，以便我们更好的学习

以上是关于带你了解typescript的主要内容，如果未能解决你的问题，请参考以下文章

带你了解typescript

带你了解Typescript的14个基础语法

一篇博文：带你TypeScript入门，两万字肝爆，建议收藏！

带你了解typescript

文章目录

TypeScript 是什么？

javaScript是什么？

JavaScript 与 TypeScript 的区别

运行环境

typescript特点

注意

typescript语法增加了什么？

TypeScript开发环境搭建

基本类型

类型：

number类型

boolean类型

string类型

字面量

any类型

unknown

注意

void

never

object

array

元组

enum 枚举类型

类型断言

编译选项

自动编译文件

自动编译整个项目

总结