深入浅出 TypeScript｜青训营TypeScript VS JavaScript TypeScript Java

TypeScript VS JavaScript

TypeScript	JavaScript
JavaScript的超集	脚本语言，创建动态网页
强类型	弱类型
编译时，错误会报错，停止运行	不会编译，只能运行中查看错误
不能改变变量的数据类型	变量可以赋值不同类型

TS类型安全，不会有隐性问题

type VS interface

type	interface
定义对象或函数，可以继承	定义对象或函数，可以继承
用来定义别名方便使用	用来定义对象使用
可以定义基本类型	不可以定义基本类型
不可以合并重复声明	可以合并重复声明

基础类型

boolean、number、string...

let str: string = "jimmy";
let num: number = 24;
let bool: boolean = false;//这里接收的是布尔值，不是布尔值对象(let b:boolean = new Boolean())
let u: undefined = undefined;
let n: null = null;
let obj: object = {x: 1};
let big: bigint = 100n;
let sym: symbol = Symbol("me");

any、unknown、void

let anys:any = "小满穿黑丝"
anys = []
anys = 18
anys = {}
anys = Symbol('666')
//any类型就跟原生的是一样的，能够给任意的类型进行定义，所以在在 TypeScript 中，任何类型都可以被归为 any 类型。这让 any 类型成为了类型系统的 顶级类型 (也被称作 全局超级类型 )。
let unknow:unknown = {a:():number =>123}
unknow.a()//报错
//unkonwn类型是不能够去调用属性跟函数的，它是 any 类型对应的安全类型
function add(x:any[]):void 
//void 无返回值

never
数组类型[]
元组类型tuple

函数类型

**定义：**TS定义函数时定义输入参数类型和输出类型

**输入参数：**参数支持可选参数（?操作符）和默认参数（直接给参数赋值）

**输出参数：**没有给输出类型可以自动推断，比如没有返回值就是void;

interface：

interface A{
     readonly name:string//这个readonly是只读属性，意思就是说只能读取，不能将其他值赋值给他
    age?:number//这个问号就是可选的意思，条件稍微宽松了一些，下面引用这个age的话有没有这个属性都可以，不会报错
}

let obj:A = {
    name = "嗷嗷叫"//这里如果不写name就会报错，因为我们在上面定义了A类型集合，并且在这个变量中引入了(里面必须要有name属性且类型为字符串)
    age	 = 18
}

类：

与Java的类相似，添加了public、private、protected修饰符，抽象类，interface约束类。

联合类型：

联合类型能够让我们可选我们自己需要的类型部分，如果需要的类型超过或者达到2个，那就可以使用。

那为什么不使用any呢？那是因为我们需要的并不是所有类型都能通过，我只希望这两个或者3个类型能够通过，如果需要的类型超过或着达到两个都使用any的话，那就和JavaScript原生没有区别了

//例如我们的手机号通常是13XXXXXXX 为数字类型 这时候产品说需要支持座机
//所以我们就可以使用联合类型支持座机字符串
let myPhone: number | string  = '010-820'
 
//这样写是会报错的应为我们的联合类型只有数字和字符串并没有布尔值
let myPhone: number | string  = true//报错

交叉类型：

多种类型的集合，联合对象将具有所联合类型的所有成员

interface Pople{
    name:string
    age:number
}
interface Man{
    sex:number
}
const text = (man:Pople & Man):void => {//这里通过了&将Pople跟Man交叉在了一起，则man需要处理Pople也要处理Man。还可以继续跟更多个interface
    console.log(man)
}
text({
    name:"小王"
    age:18
    sex:1//如果sex不写是会报错的，会提示你少写了一个sex
})

类型断言:

语法格式，值 as 类型或者 <类型>值

当 S 类型是 T 类型的子集，或者 T 类型是 S 类型的子集时，S 能被成功断言成 T。这是为了在进行类型断言时提供额外的安全性，完全毫无根据的断言是危险的，如果你想这么做，你可以使用 any。

interface A{
    run:string
}
interface B{
    build:string
}

let fn(type:A | B) =>{
    console.log((<A>type).run);
}

fn({
    build:"123"//这里是没办法传过去的，断言是不能够滥用的，因为我们确实没有.run这个内容
})

**函数重载：**通过不同的传参，判断函数

function fn(params:number):void//第一套规则
function fn(params:string,params2:number):void//第二套规则
function fn(params:any,params?:any):void{
    console.log(params)
    console.log(params2)
}

let a = fn(1,1)
//输出1跟undefined，因为遵循的是第一套规则
let a = fn("1",1)
//输出"1"跟1，遵循的是第二套规则

泛型

let arr1:Array<number> = [1,2,3,4,5]
let arr2:Array<string> = ["1,2,3,4,5"]
let arr3:Array<boolean> = [true]

//泛型数组套娃写法(还能够决定数组里面数组的类型之类的)
let arr4:Array<Array<number>> = [[123],[456]]

声明文件

declare：需要类型声明文件
.d.ts：声明文件定义
@types：TS类型包
tsconfig.json：定义TS的配置

深入浅出 TypeScript｜ 青训营

TypeScript VS JavaScript

type VS interface

基础类型

函数类型

更多

深入浅出 TypeScript｜青训营