TS

用户153165488510
153 阅读4分钟

TS初了解

弥补JS变量类型缺失

更加方便地进行类型检查和代码重构

提高代码的可靠性和可维护性

JS的缺陷

`let a = 10; ··· a = 'hi';`
  • JS是动态编程，即变量本身可以被赋的值更改类型。
  • 这样的 更改 会更改 变量a 本身的类型，a由数值变为字符串
  • 不友好，导致很多报错定位不准确的，甚至好多报错提示不出来

TS的优点，弥补了JS的什么缺点

  • TS 解决JS的缺陷
  • 从JS衍生出来的，并非替换
  • 在JS中引入了类型的概念，从动静语言变为静态语言
  • 可以在任何支持JS平台中执行TS，但是不能直接被浏览器执行
  • 开发完需要解析为TS
  • 开发会比之前多写很多，但是好维护

TS增加了什么

  • 类型：元祖
  • 支持ES新特性 同时 添加了ES不支持的新特性
  • 丰富的配置选项

TS环境搭建

  • TS需要编译为JS才可以执行，所以需要有自己的开发环境
  • TS的解析器 --- nodeJS
  • 下载node --- 安装TS解析器npm i typescript --- tsc验证安装
  • 写一个.ts文件 --- 通过命令 tsc XXX.ts 进行编译后 会生成一个同名.js文件

TS类型声明

  1. 声明变量 ：数据类型

let a:number; //声明一个变量a是数值类型
let b:String; //声明一个变量b是字符串
let c:boolean = false; // 声明一个变量直接赋值
let d = false; //此后d赋值别的类型会报错
function(a:number,b:number):number{return a+b}; //形参和返回值都设定变量类型
let a:10; //等同于声明常量
let b:boolean|string; //联合类型，可以是两种类型中一个

如果变量的声明和赋值是同时进行的，TS可以自动对变量进行类型检测

  1. 字面量

联合类型
值只在几个之内

let a:10;
let b:girl|boy;
let c:boolean | string;

3.any

any相当于关闭ts对类型检测，可以任意修改数据类型
实际开发中，不建议any类型
隐式any let a:any;
显示any let b;
any会修改已声明的变量（let a:string；let s;a=s;）

4.unknown

和any写法类似
any会修改已声明变量类型，unknown不会改变
let s:unknown;let t=10;t=s;//不可以直接赋值给已声明的变量

5.类型断言

用来告诉解析器变量的实际类型

6.void

用来表示函数返回空或者返回undefined||null
function fn():void{return}
function fn():void{return undefined}

7.never

用来表示函数永远不会返回结果

8.object

let a:object;//没实际ts意义
a:{name:string};//指定对象中只包含name属性
a:{name:string,age?:number};//加问号代表有没有age皆可
a:{name:string,[propNmae:string]:any};//除name以外包含任意类型

9.函数

let a = (n1:number,n2:number)=>numer;
a = function(n1,n2){return n1+n2}

10.arr

let arr:string[];//声明内容皆为字符串
let arr:Array<number>;//声明内容皆为字符串

11.元祖tuple

表示长度固定的数组
let a:[string,string];

12.枚举enum

enum Gende={male,female};
let i = {name:"embol",gender:"male"}
console.log(i.gender === Gender.male)

实际意义用来定义已知数据，方便后续判断使用

编辑配置

1.tsc XXX.ts 即可将文件转为浏览器可识别的XXX.js

2.tsc.XXX.ts -w 实时监控编译为对应js

3.在根目录下创建tsconfig.json就可以用tsc（tsc -w）命令编译(监听)所有文件

4.tsconfig.json

  • 默认空 {}会默认编译同级目录下的所有ts文件
  • include

包含在include中的文件会被编译

  {
    // ./**/*表示任意目录下的任意文件
    "include": [
        "./**/*"
    ]
  }
  • exclude

表示排除，除这些文件外需要编辑
有默认值：["node_modules","bower_conponents","jspm_packages"]

  {
     "exclude": [
        "./index.ts"
     ]
  }
  • compilerOptions

编译器的选项，包括target，module，

{
    "compilerOptions": {
        // 用來指定ts编译为js的版本
        // 'es3', 'es5', 'es6', 'es2015', 'es2016', 'es2017', 'es2018', 'es2019', 'es2020', 'es2021', 'es2022', 'esnext'
        "target":"es5",//  默认值ES3

        // 指定要使用的模块化规范
        // 'commonjs', 'amd', 'system', 'umd', 'es6', 'es2015', 'es2020', 'es2022', 'esnext', 'node12', 'nodenext'.
        "module": "commonjs",
    }
}
  • extends

继承，用于有多个配置文件时将别的文件引用到当前文件中

  • files

文件，用于小型项目编译直接放文件目录，类似于include

  • lib

一般不用。node需要特殊配置

  • outDir

用来指定编译后的文件所在目录

{
    "compilerOptions": {
        "outDir": "./dist"
    }
}
  • outFile

将多个ts编译为一个文件

{
    "compilerOptions": {
        "outFile": "./dist/app.js"
    }
}
  • allowJs

是否允许编译JS。默认值false

{
    "compilerOptions": {
        "allowJs": false
    }
}
  • checkJs

是否开启检查JS规范。默认值false

{
    "compilerOptions": {
        "checkJs": false
    }
}
  • removecomments

是否移除注释。默认false

{
    "compilerOptions": {
        "removecomments": false
    }
}
  • noEmit

不生成编译的文件。一般用于检查语法

{
    "compilerOptions": {
        "noEmit": false
    }
}
  • noEmitError

有错误时不编译

{
    "compilerOptions": {
        "noEmitError": false
    }
}
  • alwaysStrict

是否用严格模式。默认false
有引入模块时，JS会自动进入严格模式

{
    "compilerOptions": {
        "alwaysStrict": false
    }
}
avatar
文章
阅读
粉丝