首页 > 其他分享> 文章详细

TypeScript

2022-01-12 11:02:16 阅读：142 来源： 互联网

标签：TypeScript string number interface let 类型 type

首先基于vue和react开发全面拥抱TypeScript是一个趋势，所以简单写一下TypeScript

TypeScript 是 Microsoft 开发和维护的一种面向对象的编程语言，是JavaScript（以下称JS）超集，简称TS

优点：

代码的可读性和可维护性
在 编译阶段 就发现大部分错误，避免了很多 线上bug

增强了编辑器和 IDE 的功能，包括 代码补全 、 接口提示 、 跳转到定义 、 重构 等

缺点：

有一定的 学习成本 ，需要理解接口（Interfaces）、泛型（Generics）、类（Classes）、枚举类型（Enums）等前端工程师可能不是很熟悉的概念
会增加一些 开发成本 ，当然这是前期的，后期维护更简单了

一些JavaScript库需要 兼容 ，提供声明文件，像vue2，底层对ts的兼容就不是很好。
ts编译是需要 时间 的，这就意味着项目大了以后，开发环境启动和生产环境打包的速度就成了考验

TS类型

常用（ boolean、number、string、array、enum、any、void）
不常用（tuple、null、undefined、never）

let isDone: boolean = false; // boolean布尔值
let price: number = 24 // number数值
let name: string = 'TypeScript' // string字符串
let me: [string, number] = ['孙悟空', 120] // array数组
enum ThemeEnum { // enum枚举
  DARK = 'dark',
  LIGHT = 'light',
}
ThemeEnum['DARK'] // 'dark'
let someAny: any = 'whatever' // any任意值 相当于没有类型限制，可以把任意数据类型数据赋值给该变量 
someAny = 1
function sayHello(): void { // 没有返回值的函数: void空值
  console.log("hello world");
}
const LOL: [string, string, number] = ["zed", "darts", 25]; // tuple元组
let u: undefined = undefined; // undefined
let n: null = null; // null
function errorFuntion(): never { // 一个函数是永远也执行不完的，就可以定义返回值为 never
  throw new Error();
  console.log("Hello World");
}
// 联合类型
let myFavoriteNumber: string | number;
myFavoriteNumber = 'seven';
myFavoriteNumber = 7;

定义类型的方式——接口（Interfaces）、类型别名（type alias）

简单理解interface 和 type 的区别：

interface只能定义对象类型
type声明的方式可以定义组合类型、交叉类型和原始类型
相同点：
1、都可以描述一个对象或者函数
2、都允许拓展（extends）
不同点
1、type可以声明基本类型别名、联合类型、元祖等类型
2、type语句中还可以使用typeof获取实例的类型进行赋值
3、 interface能够声明合并
总结：一般来说，能用interface实现，就用interface，如果不能就用type，type 更强大

interface Person {
    name: string;
    age: number;
}
let tom: Person = {
    name: 'Tom',
    age: 25
};

type Name = string;
type NameResolver = () => string;
type NameOrResolver = Name | NameResolver;
function getName(n: NameOrResolver): Name {
    if (typeof n === 'string') {
        return n;
    } else {
        return n();
    }
}

泛型 T（Type）

简单说就是：泛指的类型，不确定的类型，可以理解为一个 占位符 （使用T只是习惯，使用任何字母都行）,输出类型是跟参数类型一致的

K（Key）：表示对象中的键类型；
V（Value）：表示对象中的值类型；

E（Element）：表示元素类型。

// T 自定义名称
function myFun<T>(params: T[]) {
   return params;
}
myFun <string> (["123", "456"]);
// 定义多个泛型
function join<T, P>(first: T, second: P) {
  return `${first}${second}`;
}
join <number, string> (1, "2");

断言

断言用来手动指定一个值的类型。 值 as 类型 or <类型>值
<类型>在 ts 中除了表示类型断言之外，也可能是表示一个泛型,故建议大家在使用类型断言时，统一使用 值 as 类型 这样的语法

interface Cat {
    name: string;
    run(): void;
}
interface Fish {
    name: string;
    swim(): void;
}

function isFish(animal: Cat | Fish) {
    if (typeof (animal as Fish).swim === 'function') {
        return true;
    }
    return false;
}

需要注意的是，类型断言只能够「欺骗」TypeScript 编译器，无法避免运行时的错误，反而滥用类型断言可能会导致运行时错误

标签：TypeScript,string,number,interface,let,类型,type
来源： https://blog.csdn.net/m0_61317966/article/details/122448731

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

TypeScript

TypeScript 是 Microsoft 开发和维护的一种面向对象的编程语言，是JavaScript（以下称JS）超集，简称TS

优点：

缺点：

TS类型

定义类型的方式——接口（Interfaces）、类型别名（type alias）

泛型 T（Type）

断言