TypeScript概述
1．TypeScript是拥有类型的JavaScript，可以编译成JavaScript。同时拥有 类型检查、语言扩展、工具属性。
2．它的好处：接口定义直接生成文档，让前端开发者重塑类型思维。
3．啥是强类型语言：不允许改变变量的数据类型，除非进行强制类型转换。
4．静态类型语言：在编译阶段确定所有变量类型（C＋＋）
5．动态类型语言：在执行阶段确定所有变量类型（JavaScript）核心差异是灵活、性能
6．提前进行类型检查。方便V8编译器进行优化。
基本类型
元祖 - Tuple
元祖用来定义数组中每一项什么类型。
// 类型是固定的
let arr1: [number, string]
arr1 = [1, "2"]
// 会导致类型不固定
function useFetch() {
const response: string = '1'
const age: number = 1
return [response, age]
}
// response 类型是string｜number
const [response] = useFetch()
枚举 - Enum
提供一个名称，也可以给名称一个默认枚举值
// 枚举
enum Days {
Sun,
Mon,
Tue = 4,
}
console.log("枚举", Days["Sun"]); // 0
console.log("枚举", Days["Mon"]); // 1
console.log("枚举", Days[1]); // Mon
未知的 - Unknown
当你这个类型可能是未来的某种类型的时候，为了不是定义为any，我们使用Unknown
let arr2: unknown[] = []
arr2.push(1)
arr2.push("1")
arr2.push({ 1: 1 })
类型断言
直接推断出一个类型，能够告诉程序我知道我自己在做什么，我来推断。
// 第一种：
let someValue: unknown = "this is a string";
let strLength: number = (someValue as string).length
// 第二种：
let someValue: unknown = "this is a string";
let strLength: number = (<string>someValue).length;
高级类型
类型别名
我们可以为创建一个新的名称作为类型别名，有时候与interfaces（接口）很像。
// Second 类型是number
type Second = number;
let timeInSecond: number = 10;
let time: Second = 10;
// 可以配合泛型
// 用户就可以自己传递了
type Tree<T> = {
value: T;
left?: Tree<T>;
right?: Tree<T>;
};
interface 和 type 的区别
- 多个相同的 interface 能够合并。比如对Vue进行扩展。type 不行。
- 扩展的方式不同
泛型
对类型的封装，当前封装的类型是由使用的地方传递进来的。
function identity<Type>(arg: Type): Type {
return arg;
}
identity<string>("111")
// 如果你的参数确定是某种类型的数组
function identity<Type>(arg: Type[]): Type {
return arg;
}
identity<string>("111")
// 用接口定义一个通用的泛型
interface GenericIdentityFn {
<Type>(arg: Type): Type;
}
function identity<Type>(arg: Type): Type {
return arg;
}
let myIdentity: GenericIdentityFn = identity;
keyof
能够返回key的类型。
type Mapish = { [k: string]: boolean };
type M = keyof Mapish; // M number | string
上面的M有两种类型，是因为在 JavaScript 中，object的key始终能够给你转成string。就像是obj[0]和obj["0"]是一样的。
总结
- 对于 TypeScript 的简单例子
- 并不完全，是英文文档翻译且自己理解的。
