typescript是javascript的超集,二者最本质的区别就体现在名字上面, type意为类型,从前的javascript,由于历史遗留及语言定位问题,一直以来虽然独霸前端技术栈,但也一直深受诟病。中小型项目尚可,真要在大型项目的场景中使用,就会暴露出许多问题,例如,定义变量类型不够明确,不会抛出异常报错信息,处理复杂业务能力欠佳等。而typescript的到来填补了许多坑。

环境搭建

首先,typescript是使用 node.js进行编写的javascript的超集,所以运行typescript需要先安装 node.js 环境,官网下载安装即可,安装完成之后,需要借助 node.js 的包管理器 npm ,进行typescript的全局安装,命令行指令如下

npm install -g typescript

安装完成之后就可以创建 以 .ts 为结尾的ts文件,需要注意的是,浏览器是不支持解析ts文件的,所以我们写完 ts代码后,还需要将 ts 文件编译为 js文件,在可以在浏览器中执行,例如 test.ts 文件,如果需要执行,就需要在当前文件的命令行下执行命令

tsc test.ts

然后 test.ts 同级目录下就会输出一个 test.js 的编译好的 js文件,html代码中引入 js文件, 既可以正常执行,值得注意的是,现在的 ts 文件,每次修改后都需要重新编译为 js 文件。

语法学习

ts 可以指定变量或者函数传参的类型,这点在大型项目中尤为重要,大型项目动辄一个js文件上千上万行代码,而js定义变量和函数传参等写法上又十分随意,时常会有类型错误导致程序异常,导致项目过大难以维护,加上js本身的机制上并不会抛出异常,所以遇到类型错误难以捕获,维护成本大大增加,使用ts之后,虽然前期写法上略显多余和臃肿,但是为之后的项目维护提前布局,从而提高了效率。
基本写法

<!-- 在ts文件中定义一个变量,变量后面紧跟冒号加数据类型,即可指定当前变量的数据类型 -->
let a:string = 'hello ts'
<!-- 当给 a 指定了数据类型为字符串 string 后,再次修改 a 的 值为 number 123时,程序就会抛出异常,告诉你此处需要的是一个字符串,而不是number类型 -->
a = 123
<!-- 此时,在命令行中输入编译命令, tsc test.ts 将文件编译为 js文件时,也会抛出错误信息,但是编译器依然会帮你将错误的ts语法代码编译为 js文件 -->

<!-- 函数传参时指定参数的类型可以有效防止传入的值与所需类型不一致的问题,例如此处,一个求和的函数,需要传入两个数字,进行相加得到结果,如果指定参数类型为 number ,但调用时传入其他类型的参数就会直接抛出异常,如果不在函数参数里指定数据类型,那么如果传入的是一个数字和一个字符串,那么就会进行字符串的拼串操作,得到的会是一个字符串,而非我们希望的数字 -->
function sum(a:number, b:number) {
    return a + b;
} 
let res = sum(2 , 7)

<!--  联合类型  在 ts中, | 表示或的意思,什么或者什么,所以a的值只可以在 male 和 demale之间才可以,否则,就会抛出异常。 | 既可以用来连接字面量,也可以用来连接类型 -->

let a: "male" | "famale"
let b: false | string

<!-- any  表示任意类型,定义为any的变量,可以是任意类型。但是当一个变量设置为any类型后,相当于是对这个变量关闭了 ts 的类型检测,之后不管赋值什么类型都不会抛出异常。 所以不建议使用-->
let c:any
c = 'hello'
c = 12
c = true

<!-- 当声名一个变量,但是不去赋值的时候,ts 解析器无法知道变量的数据类型,就会隐式的将 变量类型设置为 any ,  -->
let d

<!-- 当你暂时不知道变量的类型设置为什么比较好时,any并不是首选项,还可以使用 unknown, 表示未知类型的值,他的效果和 any 一样, 但是他们在使用上会有很大的差异, 举个例子,现在有一个变量 e的值为 string 类型, 变量 f 只声名未赋值,也就是 any 类型, 当把 f 赋值给e的时候,由于f是any类型,也就是任意类型,它显然是符合 e 的类型条件的,所以并不会报错,但是此时,f 就把自己的类型 any 也带给了 e ,导致 e 的类型从 string 变成了 any , 污染了其他变量。  而 unknown 类型的变量实际上就是一个类型安全的 any ,因为它不能直接赋值给其他变量  -->
let e = 'hello'
let f
e = f
当需要把 unknown 变量赋值给其他变量时, 可以先做一个类型判断后再进行赋值操作
if(typeof e === 'string') {
    e = f
}
还可以使用类型断言的方式强行指定类型
e = f as string
<!-- 或者 -->
e = <string> f;

<!-- void 为空的, 以函数为例,当给函数的返回值设置为 void 类型时,如果返回的值不为空类型(underfind 或者 null )就会报错 -->
function fn():void {
    return ;
}

<!-- never 类型,表示永远不会又返回结果。 适用于没有返回值的函数使用,比如专门用来捕获抛出异常的函数 -->
function fn1(): never {
    return
}

<!-- object 对象类型  { } 用来指定对象中可以包含哪些类型的属性-->
let g: {name: string}
g = {name: 'suibianshenme '}

<!-- [ccc: string]: string表示任意名称的字符串和 字符串类型的值 -->
let h: {name: string, [ccc: string]: string}
h = {name: 'suibianshenme ', ddd: 'sdhu'}