携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第1天，点击查看活动详情

前言

TS全称TypeScript，是以JavaScript为基础构建的语言，是JavaScript的超集，可以在任何支持JavaScript的平台中执行，它扩展了JavaScript并添加了类型,TS不能被JS解析器直接执行，只能转换为JS，才能继续执行

TS增加了什么？

类型
支持ES的新特性
添加ES不具备的新特性
丰富的配置选项
强大的开发工具

1.安装

1.安装nodejs，点进官网选稳定版直接下一步

2.安装tsnpm i --location=global typescript

3.写一个ts文件，输入tsc xxx.ts编译成js文件，即可食用

注：遇到一个大坑，路径问题，如果安装typescript后输入tsc，出现不是内部命令的字样，找到安装tsc的路径（npm config get predix即可得到路径），在环境变量里配置Path属性，在最下边新建，填入之前得到的路径

2.语法规范

1.基本类型

//声明变量a，指定类型为number
let a:number=10;

//声明变量b，指定类型为string
let b:string='xiaoming'

//声明变量c，指定类型为boolean
let c:boolean=false;
//如果变量的声明和赋值是同事进行的，TS可以自动对变量进行类型检测
let d=true

//函数 参数类型校验 + 返回值校验
function sum(e:number,f:number):number{
    return e+f
}
let result=sum(123,456)

2.联合类型

//可以使用 | 来连接多个类型（联合类型）
 let aa:'male' | 'female';
 aa='male'
 aa='female'

 let cc:string | number;
 cc=123
 cc='cds'

3.类型断言，可以用来告诉解析器变量的实际类型

语法：

变量 as 类型
<类型>变量

4.对象类型

//age表示可传可不传
let person:{name:string,age?:number}={name:'孙武',age:18}

//表示name属性是必须的，[propName:string]:any表示任意类型的属性
let a:{name:string,[propName:string]:any};
c={name:'你哈',age:18,gender:'男'

//设置函数结构的类型声明
//语法：（形参：类型，形参：类型...）=>返回值
let ee:(e1:number,e2:number)=>number;
ee=function(n1,n2){
    return n1+n2
}

5.数组类型

//对象类型的数组
let aaa:string[]
aaa=['nic']
//数字类型的数组-两种写法一样
let bbb:number[]
let ccc:Array<number>

6.元组类型

//元组：固定长度的数组
//语法：[类型，类型...]
let hh:[string,number]
hh=['hello',123]

7.枚举类型

//enum 枚举
enum Gender{
    male,
    female
}
let i:{name:string,gender:Gender}
i={
    name:'小米',
    gender:Gender.male
}

console.log(i.gender===Gender.male)//true

8.接口类型

接口可以在定义类的时候去限制类的结构，接口中的所有属性都不能有实际的值，接口之定义对象的结构，而不考虑实际值,在接口中所有的方法都是抽象方法

interface myInter{
    name:string,
    sayHello():void;
}

定义类时，可以使类去实现一个接口，实现接口就是使类满足接口的要求

class MyClass implements myInter{
    name:string;
    constructor(name:string){
        this.name=name
    }
    sayHello(){
        console.log('你好')
    }
}

9.泛型

在定义函数或是类时，如果遇到类型不明确就可以使用泛型

//定义了泛型T
function fn<T>(a:T):T{
    return a
}

//可以直接调用具有泛型的函数
fn(a:10)//不指定泛型，TS可以自动对类型进行推断

fn<string>(a:'hello')//指定泛型

泛型可以同时指定多个

function fn2<T,K>(a:T,b:K):T{
    return a
}
//传入的时候最好指定泛型的类型
fn2<number,string>(a:123,b:'hello');

表示泛型T必须实现Inter实现类（子类）

interface Inter{
    length:number;
}
//使用T泛型，实现Inter的接口
function fn3<T extends Inter>(a:T):number{
    return a.length
}

类中使用泛型

    class MyClass<T>{
        name:T;
        constructor(name:T){
            this.name=name
        }
    }
    
    const mc=new MyClass<string>(name:'孙武')

10.类型别名

//类型别名
type myType=1 | 2 | 3 | 4 | 5

let kk:myType
kk=3

3.编译选项

监视ts文件变化，变化时应用到js文件中

弊端：一行代码只对一个文件文件进行监视

tsc xx.ts -w

直接执行tsc命令，能监视当前目录的所以ts文件

前提：新建文件tsconfig.json，之后执行tsc -w，监视所有的ts文件

tsconfig.json

该文件是ts编译器的配置文件，ts编辑器可根据它的信息来对代码进行编译

"include" 用来指定哪些ts文件需要被编译   src文件夹下的任意目录下的任意文件
        路径：**表示任意目录
              *表示任意文件
    "exclude"不需要编译的文件目录
        默认值：["node_modules","bower_components"]
    "extends"
    "files" 指定被编译文件的列表，只有需要编译的文件少时才会用到
    "compilerOptions" 编译器的选项，此属性包含多个子选项，用来完成对编译的配置
        "target" 用来指定ts被编译为的ES的版本
        "module" 指定要使用的模块化的规范
        "lib" 用来指定项目中要使用的库,一般情况下不改

代码

{
   "include": [
       "./src/**/*"
   ],
   //hello文件下的文件不需要编译
   "exclude": [
       "./src/hello/**/*"
   ],
   "files": [
       "hello.ts",
       "sys.ts"
   ],
   "compilerOptions": {
       "target": "ES2015", //ESNext指定最新的ES的版本
       "module": "ES2015",
       "lib": ["DOM"]
   },
   //用来指定编译后文件所在的目录
   "outDir":"./dist",
   //将代码合并为一个文件
   "outFile":"",
   //是否对js文件进行编译，默认是false
   "allowJS":false,
   //是否检查js代码是否符合语法规范，默认为false
   "checkJS":false,
   //是否移除注释，默认false，会带过去
   "removeComments":false,
   //不生成编译后的文件
   "noEmit":false,
}

TS

前言