TypeScript :关键字-阿里云开发者社区

前言

在 TypeScript 的开发过程中，理解核心类型和工具类型是编写高质量代码的重要基础。本文将深入探讨 TypeScript 中的一些关键概念，首先介绍 interface 和 type 的基本用法与区别，帮助开发者选择合适的声明方式。接下来，我们将讨论一些高级类型，如 keyof、Record、Pick、Partial、Readonly 和 Omit，这些工具类型能够显著提高代码的灵活性与可重用性。

interface

interface（接口）是 TS 设计出来用于定义对象类型的，可以对对象的形状进行描述。

需要相同里面的属性

定义对象类型如果使用了这个类型就需要和这个接口一样

则更适合用于定义对象的结构，以及类的契约。以下是一个使用interface定义对象结构的示例：

interface 用来定义对象结构

type 来给变量定义类型

别名会重合

interface Axxsxs{
    name:String
}
let a:Axxsxs={
    name:"youren",
}

索引签名

interface Axxsxs {
    name: String
    age: number
    [propName: string]: any
}
let a: Axxsxs = {
    name: "youren",
    age: 12,
    a: 1,
    b: 2,
}
// 只需要  前面的  name,age  符合，后面的 就可以不用管

可选操作符加上问号就可有可无

interface Axxsxs {
    name: String
    age?: number
}
let a: Axxsxs = {
    name: "youren",
}

只读不可以改

interface Axxsxs {
     readonly cd: () => boolean
     readonly :id    //id 一般不可改
   // cd: () => boolean
}
let a: Axxsxs = {
    cd: () => {
        return false;
    }
}
a.cd = () => {
    return true
}

定义函数类型

interface Fn{
    (name: string):number[]
}
const fn:Fn=function(name:string){
    return [1]
}

当缺少interface 里面的属性的时候会报这个错误

<script setup lang="ts">
interface a {
  name: string;
}
interface b extends a{
  submit():void;
}
const youren :b={
  name: 'youren',
  submit() {
    console.log("submit");
  }
}
console.log(youren)
youren.submit()
</script>

type

基本使用

//在 TypeScript 中，type 关键字用于创建自定义类型别名。

其作用就是给类型起一个新名字，可以作用于原始值（基本类型），联合类型，元组以及其它任何你需要手写的类型

主要用于创建联合类型、交叉类型、以及定义复杂的类型别名。下面是一个使用type定义联合类型的示例：

类型别名

<script setup lang="ts">
// ts 里面 string 中s 用小写
//  定义一个ID 标识符 可以是 number or  string
type ID = number | string
// 表示一个人的 对象  包含 name and age
type person = {
  name:string,
  age:number
}
//  表示一个坐标  用 元组表示
type Coordinates = [number, number]
//  表示一个回调函数 ，接受一个参数 并返回 void
type Callback = (result:any)=>void
//  使用 类型别名时  可以直接将别名 作为 类型注解 或 类型 指定
function personID(id:ID){
  //  处理标识符
  console.log(id)
}
// 使用元组
function moveTo(coordinates:Coordinates){
  //  可以传一个 元组
    console.log(coordinates)
}
function fetchData(callback: Callback) {
  // 获取数据并调用回调函数
}
</script>

联合类型

let phone: number | string=123
console.log(phone)

interface People {
    name: string,
    age: number
}
interface Man {
    sex: number
}
const youren = (man: People & Man): void => {
    console.log(man);
}
youren({ name: "youren", age: 10, sex: 1 })

断言  as
const fn =(type:any):boolean=>{
    return type as boolean
}
let b = fn(1)
console.log(b);

any
function warnUser(): void {
    console.log("This is my warning message");
}
never
// 返回never的函数必须存在无法达到的终点
function error(message: string): never {
    throw new Error(message);
}
obj
object 表示非原始类型，也就是除 number ， string ， boolean ， bigint ， symbol ， null 或 undefined 之外的类型。

as 
let someValue: any = "this is a string";
let strLength: number = (someValue as string).length;

// @errors: 2339
interface Bird {
  fly(): void;
  layEggs(): void;
}
interface Fish {
  swim(): void;
  layEggs(): void;
}
declare function getSmallPet(): Fish | Bird;
let pet = getSmallPet();
pet.layEggs();
// 只有两种可能类型中的一种可用
pet.swim();

联合类型

使用联合的一种常用技术是使用字面量类型的单个字段，您可以使用该字段来缩小 TypeScript 可能的当前类型。例如，我们将创建一个包含三种类型的联合，这些类型具有一个共享字段。

type NetworkLoadingState = {
  state: "loading";
};
type NetworkFailedState = {
  state: "failed";
  code: number;
};
type NetworkSuccessState = {
  state: "success";
  response: {
    title: string;
    duration: number;
    summary: string;
  };
};
// 创建一个只代表上述类型之一的类型，但你还不确定它是哪个。
type NetworkState =
  | NetworkLoadingState
  | NetworkFailedState
  | NetworkSuccessState;

interface ErrorHandling {
  success: boolean;
  error?: { message: string };
}
interface ArtworksData {
  artworks: { title: string }[];
}
interface ArtistsData {
  artists: { name: string }[];
}
// 这些接口被组合后拥有一致的错误处理，和它们自己的数据
type ArtworksResponse = ArtworksData & ErrorHandling;
type ArtistsResponse = ArtistsData & ErrorHandling;
const handleArtistsResponse = (response: ArtistsResponse) => {
  if (response.error) {
    console.error(response.error.message);
    return;
  }
  console.log(response.artists);
};

interface and type

属性容器和对象容器

语法：type 使用 type 关键字来定义类型别名，interface 使用 interface 关键字来定义接口。
功能：type 可以创建任意类型的别名，包括基本类型、联合类型、交叉类型、函数类型等；interface 主要用于定义对象的形状，描述对象的属性和方法。
可选属性：interface 可以定义可选属性，即属性名后面加上 ? 符号；type 别名不支持可选属性的定义。
合并声明：interface 支持合并声明，即可以多次声明同一个接口，编译器会将它们合并为一个接口；type 别名不支持合并声明。
实现类：interface 可以被类实现，类可以通过 implements 关键字来实现接口；type 别名不能被类实现。
扩展类型：interface 可以通过 extends 关键字来扩展其他接口；type 可以使用交叉类型 & 来扩展其他类型。

总体来说，type 主要用于定义类型别名，可以创建任意类型的别名；interface 主要用于定义对象的形状，描述对象的属性和方法。在实际使用中，可以根据具体需求选择使用 type 还是 interface

接口可以扩展，但type不能使用extends和implement,但是type可以通过交叉类型实现interface的extends行为。interface 可以extends type，同时type也可以与interface类型交叉

interface 定义两个会重合

type 会报错

implement

  interface Person{
    id:number,
  }
  // implements  一个类继承一个接口
  class Student implements Person{
    //  可以而外的添加，但是原有的必须有
    id:number;
    sex:number
  }
  let xiaoming:Student = {
    id:1,
    sex:1
  }
  console.log(xiaoming)

extends

继承

继承另一个类

所用时需要用到继承的属性

先定义一个大类都可以需要的，然后都可以继承他

比如id 大家都要就可以选择继承，

interface Person{
        id:number,
    }
    // extends  一个接口 扩展一个接口
    interface Student extends Person{
        sex:number
    }
    let xiaoming:Student = {
        id:1,
        sex:1
    }
    console.log(xiaoming)

typeof

// typeof操作符用于获取变量的类型，因此操作符后面接的始终是一个变量。 // 假如我们在定义类型之前已经有了对象obj，就可以用typeof来定义一个类型。

将一个对象拥有的属性提取出来再得到一个新的类型

const  p = {
  name:"c3",
  age:19
}
type Person = typeof p
const p1:Person={
    name:"youren",
    age:10
}
console.log(p1)
//  等同于
// type Person = {
//   name:string,
//   age:number
// }

// 如果对象是一个嵌套的对象，typeof也能够正确获取到它们的类型。
const p1  = {
  name:"c2",
  age:10,
  address:{
    city:"nanchang"
  }
}
type Person = typeof p1
//  等同于
type Person  = {
  name:string,
  age:number,
  address:{
    city:string
  }
}

export const locales = [
  {
    locale: 'se',
    language: 'Swedish'
  },
  {
    locale: 'en',
    language: 'English'
  }
] as const;
//  [number]  为 locale的 字段
type Locale = typeof locales[number]['locale'];
// type Locale = "se" | "en"
typeof locales 获取了 locales 数组的类型。
locales[number] 通过 [number] 索引访问，TypeScript理解为我们想要获取数组中任意一个元素（即任意索引处的元素）的类型。这是因为 number 在这里作为类型查询的一部分，表示我们正在引用一个数组元素的位置，而不是实际的数字值。
['locale'] 然后从该元素的类型中访问 locale 属性的类型。

const people = {
    name: 'liuyz',
    age: 18,
  }
  type INewPeople = typeof people
  // 等同于
  // type INewPeople = {
  //   name: number
  //   age: number
  // }


  const newPeople: INewPeople = {
    name: "zhi",
    age: 18,
  }
  
  type TKeys = keyof typeof newPeople
  // 等同于
  // type TKeys = "name" | "age"

keyof

将 type 里面有的可以分配给小的

// keyof操作符后面接一个类型，生成由string或者number组成的联合字面量类型。
type Person= {
  name:string,
  age:number
}
type PersonKeys= keyof Person
const key1 :PersonKeys = 'name'
const key2 :PersonKeys = 'age'
// Type '"addr"' is not assignable to type 'keyof Person'.
const key3: PersonKeys = 'addr';

// 我们希望获取一个对象给定属性名的值，为此，
// 我们需要确保我们不会获取 obj 上不存在的属性。所以我们在两个类型之间建立一个约束：
const getProperty = <T,k extends keyof T>(obj:T,key:k)=>{
  return obj[key]
}
const person = {
  name:"c3",
  age:10
}
//  得到了 person 下面的name 属性
console.log(getProperty(person,'name'))
// Argument of type '"addr"' is not assignable to parameter of type '"name" | "age"'.
console.log(getProperty(person, 'addr'));

keyof T返回T的联合字面量类型，extends用来对K进行约束，表示K为联合字面量类型中的一个。
由于我们使用了类型约束，这样我们在调用getProperty的时候，第二个参数key就必须为第一个参数obj中的属性。在尝试传入不存在的addr属性时 TypeScript 就会报错。

type optionsFlags<T>={
  [property in keyof T]:boolean
}
//  use the optionsFlags
type FeatureFlags={
  darkMode:()=>void;
  newUserProfile:()=>void
}
type FeatureOptions = optionsFlags<FeatureFlags>
//  等于
type FeatureOptions={
  darkMode:boolean,
  newUserProfile:boolean
}

在这个例子中，OptionFlags被定义为类型参数为T的一个泛型，[Property in keyof T]表示T所有属性名的迭代，方括号是索引签名语法。所以，OptionFlags包含T类型的所有属性，并将它们的值重新映射为boolean型。

可以基础方法

type OptionsFlag<T>={
[Property in keyof T]:T[Property] extends Function ? T[Property]:boolean
}
type Features={
  darkMode:()=>void
  newUserProfile:()=>void
}
type FeatureOptions = OptionsFlag<Features>
// 相当于
// type  FeatureOptions = {
//   darkMode:()=>void
//   newUserProfile:()=>void
// }

type OptionsFlags<T> = {
  [Property in keyof T]: T[Property] extends Function ? T[Property] : boolean;
};
// use the OptionsFlags
type FeatureFlags = {
  darkMode: () => void;
  newUserProfile: () => void;
};
type FeatureOptions = Record<keyof FeatureFlags,boolean >

record

// 可以看到，Record只是将所有属性映射为T类型之后返回的一个新类型。
// 所以我们可以很容易通过Record实现上面映射类型中的例子。
type Record<k extends keyof any,T>={
  [p in k]:T
}

type TKeys = 'A' | 'B' | 'C'
    // 类型
    interface IPeople {
        name : string,
        age ?: number,
    }
    type TRecord = Record<TKeys, IPeople>
    // ABC 都需要，并且有这些 属性
    let a : TRecord = {
        A: {
            name: "youren",
            age: 10
        },
        B: {
            name: "youren",
            age: 10
        },
        C: {
            name: "youren",
            age: 10
        },
    }
    console.log(a)
  // 等同于
  type TRecord = {
    B: IPeople;
    C: IPeople;
    A: IPeople;
  }

keyof any: 等同于 string | number | symbol ，也就是说 K 只能是这三种类型
P in K: 指循环 K 类型

pick

//它允许从一个对象类型中选择一个或多个属性，并创建一个新类型。
type Pick<T, K  extends keyof T> = {
  [P in K]: T[P];
};

type Coord = Record<'x' | 'y', number>;
type CoordX = Pick<Coord, 'x'>;
// 等用于
type CoordX = {
    x: number;
}

keyof T 获取 T 中所有的 key 属性
K extends keyof T K 必须继承于 keyof T ,如果 K 中的属性有不属于 keyof T 的则会报错

interface IPeople {
    name:string,
    age?: number,
    sex: string,
  }
  //  大 | 小  
// 小存在于  大
  type TPick = Pick<IPeople, 'name' | 'age'>
  // 等同于
  type TPick = {
    name: string;
    age?: number | undefined;
  }

interface IPeople {
    name:string,
    age?: number,
    sex: string,
    [key: string]: any
  }
// 可以而外加一些其他的
  type TPick = Pick<IPeople, 'name' | 'age' | 'color'>
  等同于
  type TPick = {
    name: string;
    age?: number | undefined;
    color: any;
  }

Partial

局部

将类型定义的所有属性都修改为可选。

type Coord = Partial<Record<'x' | 'y', number>>;
// 等同于
type Coord = {
    x?: number;
    y?: number;
}

```Plain Text

interface IUser { name: string age: number department: string } type optional = Partiallet a:optional={ name:"youren" } console.log(a) // optional的结果如下 // type optional = { // name?: string | undefined; // age?: number | undefined; // department?: string | undefined; // } ```

Readonly

type Coord = Readonly<Record<'x' | 'y', number>>;
// 等同于
type Coord = {
    readonly x: number;
    readonly y: number;
}
// 如果进行了修改，则会报错：
const c: Coord = { x: 1, y: 1 };
c.x = 2; // Error: Cannot assign to 'x' because it is a read-only property.

omit

，它的作用主要是：以一个类型为基础支持剔除某些属性，然后返回一个新类型。

type  Person = {
  name:string,
  age:string,
  location:string,
}
// 接口 | 属性
// 大|小
type  PersonWithoutLocation=Omit<Person, 'location'>
  let a:PersonWithoutLocation={
  name:'youren',
  age:'10',
}
console.log(a)
//  等同于
type Person1={
  name:string,
  age:string
}

namesapce

namespace 用来建立一个容器，内部的所有变量和函数，都必须在这个容器里面使用。

先创建一个test.d.ts 文件

//该文件 ： typing.d.ts 
export declare namespace SHOEBOX {
    //export 该类型
   export type Shoe = {
        size:number
        name:string
    }
}

然后在项目中引入使用

<script setup lang="ts">
  import { Shoe } from './typings'

  const shoe : Shoe = {
    size: 1,
    name: "鞋子"
  }
  console.log(shoe)
</script>

主要用来区分的

避免命名冲突：通过将代码分组到不同的命名空间中，可以避免不同模块或库之间的命名冲突。

代码组织：namespace 允许你将相关的代码组织在一起，使得代码结构更加清晰。

模块化：在 TypeScript 中，namespace 可以被看作是一种模块化的方式，尽管在 ES6 中通常使用模块（import/export）来实现这一点。

合并声明：在多个文件中，你可以声明同一个 namespace，TypeScript 编译器会自动将它们合并为一个整体。

访问控制：虽然 TypeScript 中没有严格的访问控制，但 namespace 可以作为一种约定，表明某些内容是内部的，不应该在外部直接访问。

TypeScript :关键字

前言

interface

索引签名

定义函数类型

type

interface and type

implement

extends

继承

typeof

keyof

record

pick

Partial

Readonly

omit

namesapce

热门文章

最新文章

相关电子书

热门

活动广场

任务中心

开发者评测

高校计划

乘风者计划

训练营

阿里云MVP

话题

直播

下载

镜像站

技术资料

插件

TypeScript :关键字

前言

interface

索引签名

定义函数类型

type

interface and type

implement

extends

继承

typeof

keyof

record

pick

Partial

Readonly

omit

namesapce

热门文章

最新文章

相关电子书