ts是什么

官方文档中文版：

ts是js类型的超集，它可以编译成纯js。提供了静态类型检查和面向对象编程特性。

ts可以在任何浏览器、任何计算机和任何操作系统上运行(tsc后)，并且是开源的

ts上手ts全局安装

npm install -g typescript

ts的作用

当我们创建一个1.ts，代码如下，我们会发现编译器会报错，告诉我们类型错误，这就展示了ts的一个作用。类型限制，js本来是一个弱类型语言，而ts是js的超集，完全兼容js，并且我们可以将变量写成强类型。

let a = 1
a = '2'
console.log(a);

但是我们利用node 1.ts去运行这份代码，会发现一点问题都没有，就像我们执行js代码一样，如果想让这份代码像我们看见编译器上的效果一样，我们可以通过npx tsc 1.ts来执行这份代码，他便会执行出错。或者你也可以选择安装一个ts-node（不过，大家看到tsc会不会有困惑？事实上这就是在编译一份ts代码成js代码，这个就像我们曾经没有编辑器时，用黑框命令行javac，将代码编译成.class文件，以便后续能在虚拟机上运行）

（当然，我们也可以用tsc 同时编译多份代码。）

npm i -g ts-node

除此之外，ts还可以防手抖，(敲错某个字母)

由此，我们就能发现，ts能够以更严谨的视角去规范我们的代码，这在大型项目中显得尤为重要，这也让我们后期在使用上也会更加方便，例如我们封装了一个格式化日期的函数，使用者并不知道该传递一个字符串还是需要一个Date对象，有了强制类型以后就不再有这些困扰

注意：由于ts是强类型，并不存在隐式类型转换，例如 1 + true 会报错

ts类型推断

ts存在类型推断，即便我们没有声明时限定类型，只要开始赋值了，这个变量出生时长什么样，他就是什么类型

由此可以推知，事实上函数的返回值类型是什么，也不需要我们去写

ts配置文件

官方文档：/docs/handbo…

我们可以在ts文件中创建一个tsconfig.json文件做配置，具体有哪些配置项大家可以自行查阅官方文档

下面举个例子：

// ts中的配置
{
    "files": [
        "file1.ts",
        "file2.ts"
    ],
    "compilerOptions": {
        "outFile": "dist/app.js"
    }
}

ts的类型any类型，可以看见，这和js就没有区别了，它可以赋值成任意类型的值，如果我们不写any，没有赋值，那么就默认any类型。但是它可以污染其他变量，y本来是字符串类型，但是它会被any类型污染

// any
let x: any
x = 1
x = '1'
let y: string
y = x

unknown类型，可以赋值成任意类型的值，不可以污染其他类型，并且不能访问类型为unkonwn类型变量身上的属性、不能直接进行四则运算，需要进行收缩类型

// unknown
let x : unknown
x = true
x = 123
let y :string
y = x

let a:unknown = 1
a + 1 // 报错
// 收缩类型
if(typeof a === 'number'){
    a + 1
}

never类型，不存在值

function foo() :never {
    throw new Error('error')
}

default(js中本来就有的类型)

const a:boolean = true
const b:number = 123
const c:string = 'hello'
const d:symbol = Symbol('hello')
const e:bigint = 123456789n
const obj:object = {}
const foo:object = function(){}
const arr:object = []
const f: null = null
const g = undefined
const str：String = new String('hello')
const num:Number = new Number(123)
const bool:Boolean = new Boolean(true)
const obj1 = new Object()
let o: Object
o = true
o = 123 // new Number(123)
o = undefined // 报错
o = null // 报错

注意：当配置文件中允许any类型的存在（ "noImplicitAny": true），那么g会被推断成any类型，没办法变成undefined

特殊的类型

复杂类型(数组、元组、函数、对象)例如数组类型，number类型的数组，联合类型，泛型写法

let arr2: number[] = [1, 2, 3]
let arr: (number | string)[] = [1, 2, 3]
let arr1:Array<number | string> = [1, 2, 3]
// 也可以设置只读
const arr:readonly number[] = [1,2]

如果用泛型的写法，就不能写readonly了，但是ts提供了另一种写法

let arr4:ReadonlyArray<number> = [1,2]
let arr4:Readonly<number[]> = [1,2]
// as 断言
const arr = [1,2] as cosnt
// 二维数组
let arr:number[][] = [[1,2],[3,4]]

元组，类型声明写在里面。元组允许你在数组中混合不同类型的数据，并且保持对每个位置的类型控制。

const arr1:number[] = [1]
const tuple1:[number, string] = [1, 'hello']
// 可选，可以没有
let a:[number, string?] = [1]
// 只读
let x:readonly [number,number] = [1,2]
type read = Readonly<[number,number]>
let x:read = [1,2]

symbol

let x:symbol = Symbol()
// 不可修改的  unique  事实上就是const
const x:unique symbol = Symbol()

函数

返回值确定类型，但是如果确定了void 则不能返回值

function foo() {
    return 1
}
function foo():void{
let a = 1
return a // 报错
}

function foo(f:Function) {
    
}
function bar() {
    
}
foo(bar)
// 可选参数 ?  默认参数
function foo(x:number = 1,y?:number):[number:number?] {
    return [x,y]
}
foo(1,2)
// 当然参数也可以设置成只读
function foo(arg : readonly number[]){
    arg.push(1) // 报错
}
foo([1])

函数重载

// 函数重载
function reverse(str:string):string 
function reverse(str:number[]):number[] 
function reverse(str:string | number[]):string | number[] {
    if (typeof str === 'string') {
        return str.split('').reverse().join('')
    }else{
        return str.slice().reverse()
    }
}

对象 object Object {}区别

const obj: { a: number, b: number } = { a: 1, b: 2 }
const obj1: { a: number, b?: number } = { a: 1 }
const obj2: object = {a:1}  // object 广义上的，除了原始类型外的类型
obj2.a = 10 // 报错 obj2身上不存在a属性
const u:Object = new URL('http://www.baidu.com') // 所有的类的实例

小结

看到这里，你应该能大致明白ts是什么，ts的用法，ts的作用，后续持续更新ts高阶用法。