TypeScript（基础类型和高级类型）

山岚832

于 2024-10-08 01:21:00 发布

阅读量393

点赞数 9

文章标签： typescript javascript 前端

本文链接：https://blog.csdn.net/2302_81009692/article/details/142749204

版权

前言

一、JavaScript 与 TypeScript 的区别

前言

TypeScript 是 JavaScript 的一个超集，支持 ES6 标准。

TypeScript 由微软开发的编程语言。

TypeScript 设计目标是开发大型应用，它可以编译成纯 JavaScript，编译出来的 JavaScript 可以运行在任何浏览器上。

一、JavaScript 与 TypeScript 的区别

TypeScript 是 JavaScript 的超集，扩展了 JavaScript 的语法，因此现有的 JavaScript 代码可与 TypeScript 一起工作无需任何修改，TypeScript 通过类型注解提供编译时的静态类型检查

JavaScript 中操作的都是数据，TypeScript 中类型系统操作是类型，JavaScript 和TypeScript 中很多操作是类型，只是操作对象不一样

二、基础类型

1.布尔类型

ts:

// boolean
var flag: boolean = true;

2.数值类型

ts:

// number
var age: number = 18;

3.大数值类型

ts:

// bigint
var moneny: bigint=1000000000000000n

4.字符串类型

ts:

// string
var msg: string = "jay";
msg = "joLin";

5.数组类型

ts:

// array
// 方式一：数组元素类型[]
// 方式二：Array<数组元素类型>
var arr: number[] = [1, 2, 3, 4, 5, 6];
// 该方式功能很强大
var arr1: Array<string> = ["你好", "hi", "hello"];

6. null和undefined类型

ts:

let n: null = null;
let u: undefined = undefined;
console.log(n, u);

7.any类型(不建议使用)

ts:

// any
let a: any = 123;
a = "hhhhhhh";
a = true;
console.log(a);

8.unknown类型

ts:

// unknown
// 是any的安全类型
// 可以把unknown类型变量的值赋值给有效的值
var value: unknown;
value = 1;
value = "jay";
value = true;
value = [];
value = {};
var value1: unknown = value;
var value2: any = value;




// 不可以吧unknown类型赋值给具体的类型
// var  value2:string = value

9.元组类型Tuple

ts:

// 元组类型Tuple
// 类似于数组但是里面的元素可以是不同类型的
let tp: [string, number, string, string[]] = [
  "jay",
  18,
  "man",
  ["music", "joLin"],
];
console.log(tp);

10. void类型

ts:

// void类型
// 他表示没有任何类型，如果一个函数没有返回值，就可以使用void
function fn(): void {
  var name = "jay";
  console.log(name);
  // return name //报错
}
fn();

11.字面量类型

ts:

// 字面量类型
// 通常和联合一起使用，表示类型或的关系
type EventType = "click" | "change";
var ev: EventType = "click";
document.body.addEventListener(ev, function () {});

三、高级类型

1.联合类型

ts：

// 就是js中的短路
// 要么是a类型的属性或方法要么是b类型的属性或方法两者取其一
function getNum(a: number | string, b: number | string) {
  // 字符串拼接
  return "" + a + b;
  // 加法运算
  // return +a + +b;
}
console.log(getNum(5, 9));
console.log(getNum("5", "你好"));

编译成js:

// 就是js中的短路
// 要么是a类型的属性或方法要么是b类型的属性或方法两者取其一
function getNum(a, b) {
    // 字符串拼接
    return "" + a + b;
    // 加法运算
    // return +a + +b;
}
console.log(getNum(5, 9));
console.log(getNum("5", "你好"));

2.交叉类型

ts：

// 交叉类型
// 就是数学里的并集
// 既有a类型属性或方法也有b类型的属性或方法
interface IUser {
  id: number;
  name: string;
}
interface IInfo {
  score: number;
}
var user: IInfo & IUser = {
  score: 89,
  name: "jay",
  id: 2022230567,
};
console.log(user);
console.log(user.score);
console.log(user.name);
console.log(user.id);

编译成js:

var user = {
    score: 89,
    name: "jay",
    id: 2022230567,
};
console.log(user);
console.log(user.score);
console.log(user.name);
console.log(user.id);

3.可选类型

ts：

// 可选类型
// 使用工具类型中的Partial让对象的类型变成可选的
interface IStudent{
  id:number
  name:string
  // 可选
  score?:number
}
// 让对象中所有类型都变成可选
var user2 :Partial<IStudent>={
  name: "jay",
}
console.log(user2);

编译成js:

var user2 = {
    name: "jay",
};
console.log(user2);

4.条件类型

ts：

// 条件类型
// 相当于js中的三元表达式/三目表达式，只不过求得是类型
interface a {
  name1: string;
}
interface b {
  name2: number;
}
interface c {
  name3: boolean;
}
// 如果n等于a那么类型为b，否则为c
type T<n> = n extends a ? b : c;
var tn: T<a> = {
  name2: 123,
};
var tn2: T<b> = {
  name3: true,
};

编译成js:

var tn = {
    name2: 123,
};
var tn2 = {
    name3: true,
};

5.映射类型

{[P in K]:T} 拷贝

{[P in K]?:T} 可选

{[P in K]-?:T} 必填

{readonly [P in K]:T} 只读

{readonly [P in K]?:T} 只读可选

{-readonly [P in K]?:T} 可选

-? 改为必填的
? 可选的

ts：

//映射类型
// 其实就是把一个对象属性的类型处理成另一种对象的属性的类型，他们是一一对应的关系
type User = {
  name?: string;
  location: string;
  age?: number;
};
// keyof User=>name | location | age
// P in keyof User : P是一个类型变量，判断是否属于name | location | age 三个属性中的一个
type MyPartial<T> = {
  // [P in keyof T]-?:T[P]
  [P in keyof T]?: T[P];
};

谢谢观看如果有问题麻烦指出~点个赞吧❤