• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

TypeScript的基本使用(1)

原作者: [db:作者] 来自: [db:来源] 收藏 邀请
  • js
    • 优点:不容易报错
    • 缺点:
      • ES6前使用面向对象比较麻烦(需要结合原型+构造函数);
      • 没有变量类型,会根据值来定义数据类型;js的变量是动态类型--可能会导致后面做运算时因为值发生改变,数据类型不匹配可能导致不会报错,只有当程序执行到才会报错。
      • js定义函数时参数没有类型的限制,我们可以在调用函数时传任意数据类型,这样就导致在执行某个语句后程序才出现报错的情况
  • ts
    • 是微软开发的,为了解决js所带来的缺点,但不是为了替代js(因为js对于前端的影响非常大)
    • 引入了数据类型,让js从动态语言转成静态语言。即变量声明时可以指定类型,类型一旦执行不能发生变化,否则会提示报错(但还是可以编译,后期我们可以通过webpack配置解决)。
    • 目前情况下,ts文件不能直接被JS解析器直接执行。即ts文件不能在浏览器上直接执行
    • ts可以通过配置让js变得严谨或者松散
    • ts中可以使用js中所有的语法

typescript编译

默认情况下.ts文件是不能直接在浏览器使用的,需要通过node中的typescript进行编译生成js。

步骤:

  1. 下载并安装Node.js
  2. 使用npm全局安装typescript
npm i -g typescript
  1. 创建hello.ts文件,并编写代码
let a:string = "hello typescript"
  1. 使用tsc命令进行编译
tsc hello.tsc

基本类型

类型有:number、string、boolean、字面量、any、unknown、void、never、object、array、tuple、enum

用法:

let a:number = 20

字面量

let n1:10
n1 = 10
# n1 = 20 报错

unknown类型和any类型

  • 可以将任意类型的值赋值给unknown类型或any类型的变量;
  • 可以将any类型的变量赋值可以任意类型的变量;但是不能将unknown类型的变量赋值给任意类型(any类型除外)的变量
  • 简单理解为any会导致原本变量定义的数据类型不起作用了;或者理解为any权力最大,可以做任何的赋值操作。所以如果一个类型不确定时推荐使用unknown
let n1:unknown
let n2
n1 = 10
n1 = "hello"
n2 = 20
n2 = "ts"

let n3:string = "ok"
n3 = n2
# n3 = n1  这里会报错

类型断言

有些情况下,变量的类型对于我们来说是很明确,但是TS编译器却并不清楚,此时,可以通过类型断言来告诉编译器变量的类型,一般用在变量设置为unknown类型时

let n1:unknown
let s = "hello"
n1 = "ts"
# s = n1   报错

# 方式1: 变量 as 类型
s = n1 as string; 
# 方式2: <类型>变量
s = <string>n1

对象

let o :{name:string} = {name:'zs'}
# 下面会报错
# let o: { name: string } = { name: 'zs', age: 20 }

# 属性设置多个;propName是变量别名,可以随意起
let o1:{name:string,[propName:string]:any} = {name:'ls',age:18}

函数

let sum: (n1: number, n2: number) => number

sum = function (n1, n2) {
  return n1 + n2
}

数组

let arr1: string[];
arr1 = ['i','love','ts']
let arr2: Array<number>;
arr2 = [10,20,30]

元组

固定长度的数组

let t1: [string,number]
t1 = ['ok',200]

枚举

enum Gender{
  Male,
  Female
}

let o:{name:string,gender:Gender}
o = {name:'莉莉',gender:Gender.Female}

其他

或者

# n1的值可以是10或者string
let n1: 10 | string
n1 = 'hello'
n1 = 10

并且

let j: { name: string } & { age: number };
j = {name: '孙悟空', age: 18};

编译选项

自动编译单个文件

使用 -w 指令后,TS编译器会自动监视文件的变化,并在文件发生变化时对文件进行重新编译。【-w,表示watch】

tsc -w hello.ts

自动编译整个文件夹

tsconfig.json是ts编译器的配置文件,ts编译器可以根据它的信息来对代码进行编译

  1. 在项目根目录下创建空的tsconfig.json文件
  2. 然后执行tsc -w命令会实时监控当前目录以及子目录下的所有文件的变化,对.ts后缀的文件进行自动编译

编译子选项

include

  • 默认情况下当前目录以及子目录下的所有文件都会进行编译,如果要对某几个目录下的文件进行编译的话,则需要指定此选项。
  • 默认值为:["**/*"]
// 对src、test目录下的所有文件以及所有子文件都进行编译
"include": ["src/**/*","test/**/*"]

exclude

  • 定义不需要进行编译的目录
"exclude":["node_modules"]

extends

  • 定义多个配置文件,当配置文件需要按结构进行分离时可采取此方式
// 会自动包含config目录下的basic.json文件
"extends": "./config/basic"

files

  • 指定被编译的文件列表
"files":["1.ts","2.ts","3.ts"]

compilerOptions

重点

  • 此选项包含多个子选项,用来完成对编译的配置
target
  • 设置ts代码编译的目标版本
  • 可选值:ES3(默认)、ES5、ES6/ES2015、ES7/ES2016、ES2017、ES2018、ES2019、ES2020、ESNext
"compilerOptions":{
  "target":"ES6"
}
outDir
  • 默认情况下,编译后的js文件会和ts文件位于相同的目录,设置outDir后可以改变编译后文件的位置
"compilerOptions": {
    "outDir": "dist"
}
outFile
  • 默认情况下一个ts文件对应编译成一个js文件,如果需要打包成一个js文件的话则可以设置此选项
"compilerOptions":{
  "outFile":"dist/bundle.js"
}
allowJs
  • 默认情况下不对js文件进行编译,如果需要进行编译的话则可以设置此选项
"compilerOptions":{
  "allowJs": true
}
removeComments
  • 默认情况下会对注释进行打包输出,如果在打包文件中不想输出注释内容则可以设置此选项
"compilerOptions":{
  "removeComments": true
}
noEmit
  • 默认情况下会对代码进行编译,可以看到编译生成的文件,如果不想编译生成文件则可以设置此选项
"compilerOptions":{
  "noEmit": true
}
module
  • 指定要使用的模块化规范
  • 可选值有:none, commonjs, amd, system, umd,es6, es2015, es2020, esnext
noEmitOnError
  • 默认情况下语法错误也能进行编译,如果错误不想编译则可以设置此选项
"compilerOptions":{
  "noEmitOnError": true,
}
strict
  • 开启严格模式,开发中会开启,让程序更严谨
"compilerOptions":{
  "strict": true,
}

设置了严格模式后,会对代码进行空值的判断。如果存在空值的可能则需进行下面的处理

let btn = document.querySelector("btn")
// 如果btn为空则不进行事件函数的处理
btn?.onclick=function(){
  alert('test')
}

Webpack使用TS[待验证]

  • 通常情况下,实际开发中我们都需要使用构建工具对代码进行打包,TS也可以结合构建工具一起使用。
  • 简单来说,使用webpack对ts进行编译生成js。

使用步骤如下:

  1. 使用npm ini -y初始化项目
  2. 安装开发时依赖
npm install -D webpack webpack-cli  typescript ts-loader
  1. 根目录下创建webpack.config.js文件
const path = require('path')

module.exports = {
  entry: './src/index.ts',
  output: {
    path: path.resolve(__dirname,'dist'),
    filename: 'bundle.js'
  },
  module:{
    rules:[
      {
        test:/\.ts$/,
        use:'ts-loader',
        exclude: /node-modules/
      }
    ]
  },
  /* 
  	默认情况下,xx.ts不能直接使用"import"和"export"的方式 加载或者导出
    解决ts文件可以使用"import"或"export"方式加载或导出
  */
  resolve:{
    extensions: [".ts",".js"]
  }
}
  1. 创建tsconfig.json配置文件,指定ts编译时的规则
{
  "compilerOptions": {
    "module": "ES2015",
    "target": "ES2015",
    "strict": true
  }
}
  1. package.json中的script属性配置打包命令
{
  "script":{
    "build": "webpack"
  }
}
  1. 执行打包命令
npm run build

注意

  • 在使用import导入文件时不能添加文件名后缀否则会报错。比如: import {n1} from './a'

babel[待验证]

  • JS中有不同的版本,比如:ES5,ES6,ES2020...等等。当我们采用新版本的JS去写代码时,低版本的浏览器无法识别,所以需要有一种可以将新语法的转换成旧版的,这样才能让低版本的浏览器去识别。

  • 其中tsconfig.jsoncompilerOptions属性有target选项,我们可以指定编译成js的版本,它只能做JS中简单的语法转换,但对于新增的技术它是不支持的(比如:ES6的Promise),这个时候就需要使用到babel可以兼容更多的浏览器

  • babel的作用

    • 把新语法转换成旧语法
    • 把新的类、对象转换成低版本浏览器支持的类。
    • 为了让代码有更好的兼容性,可以在不同的浏览器中使用,使用babel来帮助我们解决兼容性的问题

步骤:

  1. 安装开发时依赖
cnpm i -D @babel/core  @babel/preset-env babel-loader core-js
  • @babel/core --核心库
  • @babel/preset-env ---预设环境。我们需要兼容不同的浏览器环境,这个模块里面定义好了转换的代码
  • babel-loader的作用是将 babel和webpack结合的一款工具
  • core-js的作用是模拟js的运行环境,让老版本的浏览器可以使用到新标准的技术。里面装有所有兼容新功能的代码,在开发中我们经常是按需加载
  1. webpack.config.js配置
module:{
  rules:[
    {
      test:/\.ts$/,
      use:[
        //多个loader进行处理,则use使用数组的形式
        // 多个loader的执行顺序是从后往前。
        // ts-loader的作用是将ts转换为js;babel-loader的作用是将js转换为低版本浏览器可识别的js代码
        // 如果loader需要详细的配置,则将字符串形式转换为对象的形式
        {
          loader:"babel-loader",
          options:{
            // 设置预定义的环境【也就是假设你的代码是要在哪些环境下运行】
            presets:[
              [
                "@babel/preset-env",
                {
                  //指定浏览器的版本
                  targets:{
                    // 兼容chrome的58版本
                    "chrome":"58",
                    "IE":"11"        //也就是说兼容所有低版本的浏览器
                  },
                  //指定corejs的版本   【和当前安装的版本一致即可】
                  "corejs": "3",
                  // 使用corejs的方式
                  "useBuiltIns": "usage"        //按需加载
                }
              ]
            ]
          }
        },
        "ts-loader"
      ]
    }
  ]
}
  1. 使用上述配置和不使用上述配置,然后设置tsconfig.json中的compilerOptions属性的target属性配置为ES2015(这个就是ES6版本),测试ts文件中使用const定义变量的形式 是否在打包后的js文件中转换。

    • 不使用上述配置,打包后的js文件中 const定义的变量【没有】转换成var声明的变量

    • 使用上述配置,然后webpack配置targets中含有低版本的IE,那么const定义的变量【会】转换成var声明的变量

    • 注意

      • 上面使用const等普通的ES6语法是没有使用到corejs;当加载低版本浏览器不能识别的类或对象等情况时会使用到corejs中封装的代码,这样才能让低版本浏览器识别(比如:Promise)。------corejs只有在下面配置后才起作用
      "corejs": "3",
      "useBuiltIns": "usage"
      
      • 上面使用corejs按需加载后可能还是在IE不能成功运行,因为起打包后生成的js是箭头函数,IE不支持。babel可以将箭头函数转换为浏览器识别的函数。上面报错是因为webpack打包后自带生成箭头函数来处理打包后的js,我们可以告诉webpack使用普通函数打包不要使用箭头函数。webpack.config.js配置如下
      module.exports = {
        output: {
          environment:{
            arrowFunction: false
          }
        }
      }
      

鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
使用Typescript重构axios(二)——项目起手,跑通流程发布时间:2022-07-18
下一篇:
浅谈TypeScript发布时间:2022-07-18
热门推荐
热门话题
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap