TS学习——快速入门

TypeScript简介

  1. TypeScript是JavaScript的超集。
  2. 它对JS进行了扩展,向JS中引入了类型的概念,并添加了许多新的特性。
  3. TS代码需要通过编译器编译为JS,然后再交由JS解析器执行。
  4. TS完全兼容JS,换言之,任何的JS代码都可以直接当成JS使用。
  5. 相较于JS而言,TS拥有了静态类型,更加严格的语法,更强大的功能;TS可以在代码执行前就完成代码的检查,减小了运行时异常的出现的几率;TS代码可以编译为任意版本的JS代码,可有效解决不同JS运行环境的兼容问题;同样的功能,TS的代码量要大于JS,但由于TS的代码结构更加清晰,变量类型更加明确,在后期代码的维护中TS却远远胜于JS。

1、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

    • 进入命令行
    • 输入:npm i -g typescript
  4. 创建一个ts文件

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

    • 进入命令行

    • 进入ts文件所在目录

    • 执行命令:tsc xxx.ts

2、基本类型

  • 类型声明

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

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

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

    • 简而言之,类型声明给变量设置了类型,使得变量只能存储某种类型的值

    • 语法:

      • let 变量: 类型;let 变量: 类型 =;function fn(参数: 类型, 参数: 类型): 类型{...
        }
        
  • 自动类型判断

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

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

    • let decimal: number = 6;
      let hex: number = 0xf00d;
      let binary: number = 0b1010;
      let octal: number = 0o744;
      let big: bigint = 100n;
      
  • boolean

    • let isDone: boolean = false;
      
  • string

    • let color: string = "blue";
      color = 'red';let fullName: string = `Bob Bobbington`;
      let age: number = 37;
      let sentence: string = `Hello, my name is ${fullName}.I'll be ${age + 1} years old next month.`;
      
  • 字面量

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

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

    • let d: any = 4;
      d = 'hello';
      d = true;
      
  • unknown

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

    • let unusable: void = undefined;
      
  • never

    • function error(message: string): never {throw new Error(message);
      }
      
  • object(没啥用)

    • let obj: object = {};
      
  • array

    • let list: number[] = [1, 2, 3];
      let list: Array<number> = [1, 2, 3];
      
  • tuple

    • let x: [string, number];
      x = ["hello", 10]; 
      
  • enum

    • enum Color {Red,Green,Blue,
      }
      let c: Color = Color.Green;enum Color {Red = 1,Green,Blue,
      }
      let c: Color = Color.Green;enum Color {Red = 1,Green = 2,Blue = 4,
      }
      let c: Color = Color.Green;
      
  • 类型断言

    • 有些情况下,变量的类型对于我们来说是很明确,但是TS编译器却并不清楚,此时,可以通过类型断言来告诉编译器变量的类型,断言有两种形式:

      • 第一种

        • let someValue: unknown = "this is a string";
          let strLength: number = (someValue as string).length;
          
      • 第二种

        • let someValue: unknown = "this is a string";
          let strLength: number = (<string>someValue).length;
          

3、编译选项

  • 自动编译文件

    • 编译文件时,使用 -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

4、webpack

  • 通常情况下,实际开发中我们都需要使用构建工具对代码进行打包,TS同样也可以结合构建工具一起使用,下边以webpack为例介绍一下如何结合构建工具使用TS。

  • 步骤:

    1. 初始化项目

      • 进入项目根目录,执行命令 npm init -y
        • 主要作用:创建package.json文件
    2. 下载构建工具

      • npm i -D webpack webpack-cli webpack-dev-server typescript ts-loader clean-webpack-plugin
        • 共安装了7个包
          • webpack
            • 构建工具webpack
          • webpack-cli
            • webpack的命令行工具
          • webpack-dev-server
            • webpack的开发服务器
          • typescript
            • ts编译器
          • ts-loader
            • ts加载器,用于在webpack中编译ts文件
          • html-webpack-plugin
            • webpack中html插件,用来自动创建html文件
          • clean-webpack-plugin
            • webpack中的清除插件,每次构建都会先清除目录
    3. 根目录下创建webpack的配置文件webpack.config.js

      • const path = require("path");
        const HtmlWebpackPlugin = require("html-webpack-plugin");
        const { CleanWebpackPlugin } = require("clean-webpack-plugin");module.exports = {optimization:{minimize: false // 关闭代码压缩,可选},entry: "./src/index.ts",devtool: "inline-source-map",devServer: {contentBase: './dist'},output: {path: path.resolve(__dirname, "dist"),filename: "bundle.js",environment: {arrowFunction: false // 关闭webpack的箭头函数,可选}},resolve: {extensions: [".ts", ".js"]},module: {rules: [{test: /\.ts$/,use: {loader: "ts-loader"     },exclude: /node_modules/}]},plugins: [new CleanWebpackPlugin(),new HtmlWebpackPlugin({title:'TS测试'}),]}
        
    4. 根目录下创建tsconfig.json,配置可以根据自己需要

      • {"compilerOptions": {"target": "ES2015","module": "ES2015","strict": true}
        }
        
    5. 修改package.json添加如下配置

      • {......"scripts": {"test": "echo \"Error: no test specified\" && exit 1","build": "webpack","start": "webpack serve --open chrome.exe"},......
        }
        
    6. 在src下创建ts文件,并在并命令行执行npm run build对代码进行编译,或者执行npm start来启动开发服务器

5、Babel

  • 经过一系列的配置,使得TS和webpack已经结合到了一起,除了webpack,开发中还经常需要结合babel来对代码进行转换以使其可以兼容到更多的浏览器,在上述步骤的基础上,通过以下步骤再将babel引入到项目中。

    1. 安装依赖包:

      • npm i -D @babel/core @babel/preset-env babel-loader core-js
      • 共安装了4个包,分别是:
        • @babel/core
          • babel的核心工具
        • @babel/preset-env
          • babel的预定义环境
        • @babel-loader
          • babel在webpack中的加载器
        • core-js
          • core-js用来使老版本的浏览器支持新版ES语法
    2. 修改webpack.config.js配置文件

      • ......
        module: {rules: [{test: /\.ts$/,use: [{loader: "babel-loader",options:{presets: [["@babel/preset-env",{"targets":{"chrome": "58","ie": "11"},"corejs":"3","useBuiltIns": "usage"}]]}},{loader: "ts-loader",}],exclude: /node_modules/}]
        }
        ......
        
      • 如此一来,使用ts编译后的文件将会再次被babel处理,使得代码可以在大部分浏览器中直接使用,可以在配置选项的targets中指定要兼容的浏览器版本。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/211356.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Android 样式小结

关于作者&#xff1a;CSDN内容合伙人、技术专家&#xff0c; 从零开始做日活千万级APP。 专注于分享各领域原创系列文章 &#xff0c;擅长java后端、移动开发、商业变现、人工智能等&#xff0c;希望大家多多支持。 目录 一、导读二、概览三、使用3.1 创建并应用样式3.2 创建并…

DJI ONBOARD SDK—— 基础控制功能 Joystick的讲解,使用和扩展

DJI ONBOARD SDK/DJI OSDK ROS—— 基础控制功能 Joystick的使用 概述 使用OSDK/OSDK_ROS 的无人机飞行控制功能&#xff0c;能够设置并获取无人机各项基础参数&#xff0c;控制无人机执行基础飞行动作&#xff0c;通过Joystick 功能控制无人机执行复杂的飞行动作。 Joystic…

【精彩回顾】恒拓高科亮相第十一届深圳军博会

2023年12月6日-8日&#xff0c;由中国和平利用军工技术协会、全国工商联科技装备业商会、深圳市国防科技工业协会等单位主办以及政府相关部门支持&#xff0c;深圳企发展览有限公司承的“2023第11届中国&#xff08;深圳&#xff09;军民两用科技装备博览会&#xff08;深圳军博…

02 CSS基础入门

文章目录 一、CSS介绍1. 简介2. 相关网站3. HTML引入方式 二、选择器1. 标签选择器2. 类选择器3. ID选择器4. 群组选择器 四、样式1. 字体样式2. 文本样式3. 边框样式4. 表格样式 五、模型和布局1. 盒子模型2. 网页布局 一、CSS介绍 1. 简介 CSS主要用于控制网页的外观&#…

C#如何使用SqlSugar操作MySQL/SQL Server数据库

一. SqlSugar 连接MySQL数据库 public class MySqlCNHelper : Singleton<MySqlCNHelper>{public static SqlSugarClient CnDB;public void InitDB() {//--------------------MySQL--------------------CnDB new SqlSugarClient(new ConnectionConfig(){ConnectionString…

穷举问题-搬砖(for循环)

某工地需要搬运砖块&#xff0c;已知男人一人搬3块&#xff0c;女人一人搬2块&#xff0c;小孩两人搬1块。如果想用n人正好搬n块砖&#xff0c;问有多少种搬法&#xff1f; 输入格式: 输入在一行中给出一个正整数n。 输出格式: 输出在每一行显示一种方案&#xff0c;按照&q…

玩转大数据12:大数据安全与隐私保护策略

1. 引言 大数据的快速发展&#xff0c;为各行各业带来了巨大的变革&#xff0c;也带来了新的安全和隐私挑战。大数据系统通常处理大量敏感数据&#xff0c;包括个人身份信息、财务信息、健康信息等。如果这些数据被泄露或滥用&#xff0c;可能会对个人、企业和社会造成严重的损…

Unity 资源管理之Resources

Resources是一个特殊的文件夹&#xff0c;用于存放运行时加载的资源。 Resources文件夹中可以放置各种类型的资源文件&#xff0c;如纹理、模型、音频、预制体等&#xff0c;一般用来存储预制体和纹理信息。 通过API可以加载和访问该文件夹及其子文件夹中的资源。 当我们打包…

大数据Doris(三十五):Unique模型(唯一主键)介绍

文章目录 Unique模型(唯一主键)介绍 一、创建doris表 二、插入数据

【华为OD题库-076】执行时长/GPU算力-Java

题目 为了充分发挥GPU算力&#xff0c;需要尽可能多的将任务交给GPU执行&#xff0c;现在有一个任务数组&#xff0c;数组元素表示在这1秒内新增的任务个数且每秒都有新增任务。 假设GPU最多一次执行n个任务&#xff0c;一次执行耗时1秒&#xff0c;在保证GPU不空闲情况下&…

海外独立站站长常用的ChatGPT通用提示词模板

目标市场&#xff1a;如何确定目标市场&#xff1f; 用户需求&#xff1a;如何了解用户需求&#xff1f; 网站设计&#xff1a;如何设计一个优秀的网站&#xff1f; 用户体验&#xff1a;如何提升用户体验&#xff1f; 功能规划&#xff1a;请帮助我规划网站的功能。 内容…

linux 应用开发笔记---【标准I/O库/文件属性及目录】

一&#xff0c;什么是标准I/O库 标准c库当中用于文件I/O操作相关的一套库函数&#xff0c;实用标准I/O需要包含头文件 二&#xff0c;文件I/O和标准I/O之间的区别 1.标准I/O是库函数&#xff0c;而文件I/O是系统调用 2.标准I/O是对文件I/O的封装 3.标准I/O相对于文件I/O具有更…

SpringBoot 项目 Jar 包加密,防止反编译

1场景 最近项目要求部署到其他公司的服务器上&#xff0c;但是又不想将源码泄露出去。要求对正式环境的启动包进行安全性处理&#xff0c;防止客户直接通过反编译工具将代码反编译出来。 2方案 第一种方案使用代码混淆 采用proguard-maven-plugin插件 在单模块中此方案还算简…

调用别人提供的接口无法通过try catch捕获异常(C#),见鬼了

前几天做CA签名这个需求时发现一个很诡异的事情&#xff0c;CA签名调用的接口是由另外一个开发部门的同事(比较难沟通的那种人)封装并提供到我们这边的。我们这边只需要把数据准备好&#xff0c;然后调他封装的接口即可完成签名操作。但在测试过程中&#xff0c;发现他提供的接…

[后端卷前端2]

绑定class 为什么需要样式绑定呢? 因为有些样式我们希望能够动态展示 看下面的例子: <template><div><p :class"{active:modifyFlag}">class样式绑定</p></div> </template><script>export default {name: "goo…

人力资源服务展示网站作用有哪些

就业劳务问题往往是不少人群关注的问题&#xff0c;每个城市都聚集着大量求业者&#xff0c;而人力资源管理公司每年也会新增不少&#xff0c;对求业者来说&#xff0c;通过人力资源公司可以快速便捷的找到所需工作&#xff0c;而对公司来说&#xff0c;市场大量用户可以带来收…

C语言第十八集(动态内存管理)

1.malloc函数可以开辟一块空间,具体搜: 2.malloc函数申请的空间在内存的堆区 而且它只负责帮你申请空间,不负责帮你清理空间 3.free函数可以释放内存 4.free函数释放的是内存中的堆区,具体搜: 5.在free函数调用完后记得把对应的指针设为空指针 6.calloc函数跟malloc函数差…

揭秘字符串的奥秘:探索String类的深层含义与源码解读

文章目录 一、导论1.1 引言&#xff1a;字符串在编程中的重要性1.2 目的&#xff1a;深入了解String类的内部机制 二、String类的设计哲学2.1 设计原则&#xff1a;为什么String类如此重要&#xff1f;2.2 字符串池的概念与作用 三、String类源码解析3.1 成员变量3.2 构造函数3…

[今来] 神话故事:金马和碧鸡

文章目录 金马山和碧鸡山神话传说金马坊和碧鸡坊金马碧鸡 金马山和碧鸡山 昆明山明水秀&#xff0c;北枕蛇山&#xff0c;南临滇池&#xff0c;金马山和碧鸡山则东西夹峙&#xff0c;隔水相对&#xff0c;极尽湖光山色之美。金马山逶迤而玲珑&#xff0c;碧鸡山峭拔而陡峻&…

[Java][Map]linkedhashmap的引入

我们可以看到&#xff1a; linkedhashmap中元素的读取是有顺序的&#xff0c;基于这种双向链表 我们可以优先读取8索引bucket上的元素 然后读取3索引bucket上的元素&#xff0c;以及其挂载的元素 最后读取0索引bucket上的元素 bucket是hashbucket! 这种写法是很有序的 也是…