带你了解typescript

Posted 2022-11-25 stay_少年与梦

文章目录

• TypeScript 是什么？
• javaScript是什么？
• JavaScript 与 TypeScript 的区别
• • 运行环境
  • typescript特点
  • • • 注意
• typescript语法增加了什么？
• • TypeScript开发环境搭建
• 基本类型
• • • 类型：
    • • number类型
      • boolean类型
      • string类型
      • 字面量
      • any类型
      • unknown
      • **注意**
      • void
      • never
      • object
      • array
      • 元组
      • enum 枚举类型
      • 类型断言
  • 编译选项
  • • • • 自动编译文件
        • 自动编译整个项目
• 总结

---

TypeScript 是什么？

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

javaScript是什么？

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

JavaScript 与 TypeScript 的区别

1. TypeScript 是 JavaScript 的超集，扩展了 JavaScript 的语法，因此现有的 JavaScript 代码可与 TypeScript 一起工作无需任何修改，TypeScript 通过类型注解提供编译时的静态类型检查。

2. TypeScript 可处理已有的 JavaScript 代码，并只对其中的 TypeScript 代码进行编译。

运行环境

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

typescript特点

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

注意

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

typescript语法增加了什么？

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

TypeScript开发环境搭建

1. 下载node.js

• 64位：https://nodejs.org/dist/v14.15.1/node-v14.15.1-x64.msi
• 32位：https://nodejs.org/dist/v14.15.1/node-v14.15.1-x86.msi

2. 安装node.js（推荐安装稳定版）

3. 使用npm全局安装typescript

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

4. 创建一个ts文件

5. 使用tsc对ts文件进行编译

   • 进入命令行

   • 进入ts文件所在目录

   • 执行命令：tsc xxx（你的文件名）.ts

基本类型

1. 类型声明

• 类型声明是TS非常重要的一个特点

• 通过类型声明可以指定TS中变量（参数、形参）的类型

• 指定类型后，当为变量赋值时，TS编译器会自动检查值是否符合类型声明，符合则赋值，否则报错

• 类型声明就是给变量设置了类型，使得变量只能存储某种类型的值

• 语法：

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

2. 自动类型判断

• 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	enumA, 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没有的功能，语法也更加的规范，更方便了我们写代码中，快速的找到语法上的错误。
我们学习它，慢慢就会喜欢上它的。

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