12-07 10:10 阅读 335

TypeScript 简单例子(typescript教程)

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 的简单例子
并不完全，是英文文档翻译且自己理解的。

作者：蘑菇放辣椒
链接：https://juejin.cn/post/7038882759758069768