TypeScript中类型标注符号:与<>的作用及区别是什么

1. 类型标注语法 : #

: 是TypeScript里最基础的类型绑定语法，作用就是给一个具体的变量、参数、属性直接绑定固定类型，相当于给这个值打类型标签，TypeScript会基于这个类型做后续的静态校验，不符合的用法会直接编译报错。

常见使用场景：

• 变量声明指定类型：const count: number = 10
• 函数参数、返回值指定类型：

// 给参数str绑定string类型，给函数返回值绑定number类型
function getLength(str: string): number {
  return str.length
}

• 对象属性、类属性指定类型：

interface Goods {
  id: string
  price: number
}

class Shop {
  name: string
  address: string
}

你示例中给函数参数test指定string类型，用的就是这个语法。

2. 泛型参数传递语法 <> #

<> 是用来给泛型传递类型参数的语法，核心作用是给可复用的泛型模板传入自定义的具体类型，生成对应场景的专属类型。
你可以把泛型理解成TS里的「类型函数」：预先定义好模板逻辑，你传入什么类型参数，它就返回对应的定制化类型。你示例中用到的React useState 就是官方提前写好的泛型函数，它本身不知道你要存储什么类型的状态，所以需要你通过<>把你需要的User类型传进去。

常见使用场景：

• 调用泛型函数时传入类型：

// 告诉useState当前状态的类型是User，后续setUser只能传入User类型的值
const [user, setUser] = useState<User>();

• 使用泛型类型/泛型工具时传入类型：

// 定义泛型类型Response，T是占位的类型参数
type Response<T> = {
  code: number
  message: string
  data: T
}

// 传入User类型，得到专属的用户接口返回类型
const userRes: Response<User> = {
  code: 200,
  message: 'success',
  data: {
    id: '123',
    name: '小明',
    avatar: 'xxx.png'
  }
}

// TS内置泛型工具的使用，比如把User的所有属性设为可选
const partialUser: Partial<User> = { name: '小明' }

两者的核心差异 #

• : 是直接给具体的值绑定类型，用在需要直接指定某个值类型的场景
• <> 是给泛型模板传类型参数，用在需要让泛型工具生成定制化类型的场景

内容的提问来源于stack exchange，提问作者Bruno Vercelli