TypeScript 类型注解 冒号:限制类型,联合类型,类型别名,箭头函数,函数类型

33 阅读1分钟

总结:

  • 类型注解,限制类型,防止出错,好处提示对应类型的语法。let a:string
  • 联合类型,把多个类型合并为 1 个类型
  • 类型别名,好处:简化,复用
  • 可选参数 ?,需要放到末尾。
  • 无返回值 :void 与 undefined(明确的简单类型)不同
let arr1 :(string | number) [] = ['jack',100]
类型别名:
type ItemType = (string | number)[]
let arr3 :ItemType = ['jack',100]

也可以: let arr4 :number | string[]  是 number + string 类型的数组。


返回 声明的类型:

function noReturn(): void {
  // 有效,没有返回值
}

function returnUndefined(): undefined {
  return; // 这里隐式返回了 undefined
}

function returnExplicitUndefined(): undefined {
  return undefined; // 有效,显式返回 undefined
}

类型推断:
function returnNumber() {
  return 42; // TypeScript 推断返回类型为 number
}

function returnString() {
  return "hello"; // TypeScript 推断返回类型为 string
}

function noReturn() {
  console.log("No return here."); // TypeScript 推断返回类型为 void
}

function returnNothing() {
  return; // TypeScript 推断返回类型为 void
}


image.png

image.png

image.png

let count : number = 18

image.png

使用方法:

image.png

联合类型

let arr1 :(string | number) [] = ['jack',100]


类型别名:

type ItemType = (string | number)[]
let arr3 :ItemType = ['jack',100]

函数类型

image.png

箭头函数

image.png

直接实现 or 定义函数类型 + 实现 + 赋值

image.png

可选参数 ?,需要放到末尾。

image.png

无返回值 :void 与 undefined(明确的简单类型)不同

image.png

image.png

思考题: arr.join(split) :数组--》字符串。 image.png