TypeScript 是由微软开发和维护的一种开源的编程语言，它是 JavaScript 的一个超集。所谓超集，意味着 TypeScript 不仅包含了 JavaScript 的所有特性，还在其基础上进行了扩展，主要扩展之处在于引入了静态类型系统。
JavaScript 是一种动态类型语言，在代码运行时才会进行类型检查，而 TypeScript 在代码编译阶段就会进行类型检查。它通过类型注解的方式，让开发者可以为变量、函数参数、返回值等指定类型，例如可以指定一个变量为数字类型、字符串类型等。
简单先演示下：
这里声明了一个响应式的变量num，规定类型为number，给num赋初始值的为字符串的时候就会报错。本文使用vue3+ts来演示下ts的基本使用
安装命令
npm install -g typescript声明类型
在声明基础数据类型的时候，只需要<> 即可，给num赋值为字符串，给message赋值为数字则会提示编译错误
<script setup lang="ts">
import { reactive, ref ,watch,onMounted} from 'vue';
// 声明变量为number类型
const num=ref<number>(10);
const message=ref<string>('aaaa');
</script>
声明函数参数类型和返回值类型
const num = ref<number>(10);
// 声明函数的参数类型和返回值类型
const numMuti = (num: number): number => {
return num * num;
};
// watch监听源类型和回调函数的类型
watch<number>(num, (newvalue: number, oldvalue: number) => {
console.log("num", num);
});interface
声明对象需要使用 interface接口，它是 TypeScript 中用于定义对象类型结构的一种方式。主要用于描述对象的形状，规定对象应该具有哪些属性和方法，以及这些属性和方法的类型。接口可以被继承和实现，并且支持声明合并，即可以多次声明同一个接口，后续声明会对前面的声明进行扩展。
<script setup lang="ts">
import { reactive, ref, watch, onMounted } from "vue";
interface infoInterface {
name: string;
age: number;
// 声明方法 ? 代表可选属性。 在使用该接口的时候即使不使用该属性也不会提示编辑错误
sayMyName?: () => void;
// 声明数组，元素为number类型
account: Array<number>;
// 声明数组，元素为string类型
firends: Array<string>;
// 声明数组，元素为string类型（第二种写法）
phone?: string[];
// 只读属性 使用关键字readonly
readonly name2?:string
}
const info: infoInterface = reactive({
name: "Heisenberg",
age: 11,
account: [22121, 2222],
firends: ["zs", "ls"],
});
// 函数类型接口 确保函数的参数和返回值类型符合预期，避免在运行时出现类型错误
// 定义一个函数类型接口
interface MathOperation {
(a: number, b: number): number;
}
// 实现该接口的函数
let add: MathOperation = function(a: number, b: number) {
return a + b;
};
let subtract: MathOperation = function(a: number, b: number) {
return a - b;
};
// 使用这些函数
let result1 = add(5, 3); // 8
let result2 = subtract(5, 3); // 2
// 可索引类型接口 用于描述可以通过索引访问的对象，比如数组和对象。它允许我们定义对象的索引签名，即指定可以使用哪些类型的索引（如数字或字符串）以及通过这些索引访问的值的类型
// 定义一个数字索引类型接口
interface StringArray {
[index: number]: string;
}
// 使用该接口
let myArray: StringArray = ['apple', 'banana', 'cherry'];
let firstItem = myArray[0]; // 'apple'
// 定义一个字符串索引类型接口
interface Dictionary {
[key: string]: number;
}
// 使用该接口
let myDict: Dictionary = { 'one': 1, 'two': 2, 'three': 3 };
let value = myDict['two']; // 2
// 接口继承
interface a1{
wid:string
}
// extends继承
// a2继承a1的wid属性，并添加了属性heig
interface a2 extends a1{
heig:string
}
// wid和heig不使用的话 会提示已经声明但未使用报错
const a3:a2={
wid:'200px',
heig:'10px'
}
</script>
type
type关键字用于创建类型别名，也就是为现有类型或者自定义类型取一个新的名字。通过类型别名，能让代码更加简洁、易读，并且可复用性更强
<script setup lang="ts">
// 联合类型别名 表示一个值可以是几种类型之一
type stirngOrNumber = string | number;
function getValue(value: stirngOrNumber) {
console.log("value", value);
}
getValue("aaa");
getValue(222);
// 交叉类型别名 将多个类型合并为一个类型
type info1 = {
name: string;
age: number;
};
type info2 = {
sex: string;
firends: Array<string>;
};
type allInfo = info1 & info2;
const info: allInfo = {
name: "zs",
age: 11,
sex: "男",
firends: ["qq", "ww"],
};
// 元组类型别名 表示一个已知元素数量和类型的数组，每个元素的类型不必相同
type arrTypes = [string, number, Object, Array<string>];
const list:arrTypes = ["11", 22, { name: "aa" }, ["qqqqq"]];
// 函数类型别名 可以为函数类型创建别名，让函数类型的定义和使用更加方便。
type MathOperation = (a: number, b: number) => number;
let add: MathOperation = function (a, b) {
return a + b;
};
let subtract: MathOperation = function (a, b) {
return a - b;
};
// 泛型类型别名 通过泛型可以创建更灵活的类型别名
type container<T>={value:T};
const num:container<number>={value:15};
const message:container<string>={value:'111'}
const infos:container<object>={value:{name:'zz',age:1222}}
</script>end