1、什么是typescript？

typescript是以javascript为基础构建的语言，是javascript的超集。TS扩展了JS，并添加了类型，可以在任何支持JS的平台中执行。

TS不能被JS解析器直接执行，TS文件最后要被编译器编译成JS文件执行。（安装好编译器后，在终端输入tsc ‘文件名’ ，可以将TS文件编译成JS文件）

TS与JS相比，增加了类型与提示，适用于大型项目。

2、TS的常用类型

number 任意数字
string 任意字符串
boolean 布尔值
字面量 限制变量的值就是该字面量的值
any 任意类型
unknown 类型安全的any
void 空值
never 不能是任何值
object 对象类型
array  数组类型
enum   枚举

3、类型注解

let num:number = 50

let str:string = 'Hello'

let s:symbol = Symbol()

let bigN:bigint = 5555555n

let b:boolean = true

4、字面量类型

// 字面量类型就是值必须是字面量的值，往往配合联合类型使用

let a:'张三' | '李四'

a = "张三"

5、any类型

// any类型就是任意类型，值不论是什么都不会报错

let b:any

b = 1
b = '王五'
b = true

6、unknown类型

let c:unknown

c = 1
c = '王五'
c = true

let d:string
d = b
// unknown类型是比any更加安全的类型，当把unknown类型的赋值给string类型时会报错，any不会
d = c

7、void与never类型

// void表示空值，一般用于函数返回值
function fn():void{
 return 
}

// never类型用的比较少，代表不能是任何值，常用于报错信息
function fn2():never{
 throw new Error('报错了')
}

8、对象类型

// 规定对象内部属性的类型
const person1: { name: string; age: number } = {
  name: 'ifer',
  age: 18,
}

// 注意点：如果把右边的对象字面量抽离为了变量，右边在满足左边类型的基础上，可以有一些额外的数据
const o = {
  name: 'ifer',
  age: 18,
  address: '河南',
}
// 如果 o 是后端返回的，这种方式，可以满足后端后续增加参数
const person2: { name: string; age: number } = o

9、数组的类型注解

// 第一种注解数组类型的方式
const arr1:string[] = ['a','b']
// 后续 push 的也只能注解要求的类型
// arr1.push(1)
// 拿到某一个元素，绝对出来的也是此类型相关的提示
arr1[0].includes('a')

// 第二种注解数组类型的方式：泛型的方式
const arr2:Array<number> = [1,3]
// 拿到某一个元素，绝对出来的也是此类型相关的提示
arr2[0].toFixed(2)

10、联合类型

// temp 可以是 number 或 string
let temp: number | string = 8

11、类型别名

// 场景：如果一个复杂的类型使用了多次，就可以起一个别名，用起来方便，改起来也方便
type CumArr = (number | string | boolean)[]

const arr: CumArr = [1, 3, '5']
const arr3: CumArr = [1, '3', '5']

12、函数类型

分别指定

// 函数声明
function add(num1: number, num2: number): number {
    return num1 + num2
}

// 箭头函数
const add = (num1: number, num2: number): number => {
    return num1 + num2
}

整体指定

// 解释：可以通过类似箭头函数形式的语法来为函数添加类型，注意这种形式只适用于函数表达式。
type AddFn = (num1: number, num2: number) => number

const add: AddFn = (num1, num2) => {
    return num1 + num2
}

13、元组

// 特殊的数组，固定了长度和每一个索引对应的类型
// const arr: [number, number] = [108, 188]

// 给元素内部的元素对应的类型起个别名，语义化
const arr: [精度: number, 纬度: number] = [108, 188]

14、enum枚举

enum Gender {
  man,
  woman,
}

const userInfo = {
  sex: Gender.man,
}

15、接口的使用

interface IStu {
  name: string
  sex: string
  score: number
  height: number
  study?: () => void
  play?: (type: string) => void
}

16、接口的继承

interface Point2D {
  x: number
  y: number
}

// 接口可以通过 extends 继承
interface Point3D extends Point2D {
  z: number
}

17、interface vs type

18、TS编译

在终端使用 tsc ‘ts文件名’ 可以将ts文件编译成js文件

tsc ‘ts文件名’ -w 开启监视模式，自动编译更新。

创建tsconfig.json文件，使用 tsc -w 命令，可以对所有ts文件进行监视

19、tsconfig.json配置

{
    // include 用来指定哪些ts文件需要编译
    // exclude 不需要被编译的文件目录
    // ** 表示任意目录
    // * 表示任意文件
"include": [
"./src/**/*"
],
"exclude": [
"./src/hello/**/*"
]

}

// compilerOptions 编译器的选项
"compilerOptions"：{
 // target 用来指定ts被编译为的ES的版本
 "target"："es2015",
 // module 用来指定要使用的模块化的规范
 "module"："es2015"，
 // lib 用来指定项目中要使用的库
 "lib"：["es6"，"dom"]，
 // outDir 用来指定编译后文件所在的目录
 "outDir"："./dist"
 // outFile 将代码合并为一个文件
 "outFile"："./dist/app.js"
 // allowJs 是否对js文件进行编译，默认是false
 "allowJs"：true，
 // checkJs 是否检查js代码是否符合语法规范，默认是false
 "checkJs"：true，
 // 是够移除注释
 "removeComments"：true
 // 不生成编译后的文件
 "noEmit"：false
 // 当有错误时不生成编译后的文件
 "noEmitOnError"：true，
}

// 用来设置编译后的文件是否使用严格模式，默认false
"alwaysStricpt"：true，
// 所有的检查类型总开关，默认false
"strict"：true
// 不允许隐式的any类型
"noImplicitAny"：true
// 不允许不明确类型的this
"noImplicitThis"：true
// 严格的检查空值
"stricNullChecks"：true，

typescript总结