常见类型

原始类型

string
number
boolean

数组

number[],string[]都可以表示数组。

any

不希望一个值导致类型检查错误的时候，就可以设置为 any 。

函数

参数类型注解

function fn(name: string) {
  
}

返回类型注解

function fn(name: string):string{
  return "test"
}

对象类型

function fn1(obj: { a: number, b: number }):number {
  return obj.a + obj.b;
}
console.log(fn1({a:1,b:2}));

可选属性 ,在属性名后添加一个 ?

function fn1(obj: { a: number, b?: number }):number {
  return obj.a + (obj.b || 0);
}
console.log(fn1({a:1,b:2}));

联合类型

// 联合类型
function fn2(id:number| string) {
  console.log(id);
  
}
fn2(1);
fn2("1");

类型别名type

type person = {
  x:number,
  y:number,
}
function fn3(value:person){
  console.log(value.x);
  console.log(value.y);
}
fn3({x:11,y:22})

type myString = string;
function fn4(val:myString):myString{
  return val;
  
}
console.log(fn4("jd"));

接口Interfaces

interface person2 {
  x:number,
  y:number
}
function fn5(value:person2){
  console.log(value.x,value.y);
  
}
fn5({x:88,y:99})

type和Interfaces区别

Interfaces基本所有的特性都可以在type中使用，二者最大的区别就是，type本身是无法在添加属性，但是Interfaces是可以通过拓展属性的，也可以直接添加新的属性。

// 通过继承拓展属性
interface person3 extends person2{
  z:number
}
function fn6(value:person3){
  console.log(value);
}
// 已存在的接口添加属性
interface person3 {
  a:number;
}
fn6({a:0,x:0,y:0,z:0})

类型断言

如果使用 document.getElementById，TypeScript 仅仅知道会返回一个 HTMLElement，但是却不知道实际要获取的其实是一个 HTMLCanvasElement。这时候就可以使用类型断言

const myCanvas = document.getElementById("main_canvas") as HTMLCanvasElement;

字面量类型

字面量类型结合联合类型的使用

function fn7(location:'top'|'botom'|'left'|'right'):void{
  console.log(location);
}
fn7("top")

null和undefined

JavaScript中有两个原始类型，null和undefined，null表示空对象，undefined表示定义未赋值。

检查这两项主要取决是否打开了strictNullChecks选项

非空断言操作符

function fn8(value?:string|null){
  console.log(value!.toUpperCase());
  
}
fn8("null")

不常见原始类型

bigint：表示非常大的数。
symbol：表示可以创建唯一引用。

void和never区别

void表示函数不返回任何值，实际上是可以返回undefined的。
never表示永不存在的值的类型，通常表示函数内部抛出异常或者无限循环

泛型

泛型提供了一种方式，使得你编写的代码可以灵活地适应多种数据类型，而无需为每种数据类型都编写专门的代码。

在没有泛型之前，如果你想编写一个可以接受任何类型参数的函数或类，你可能会使用any类型。然而，使用any会丢失类型检查带来的好处，因为你告诉TypeScript“别担心类型，我什么都能接受”。泛型则提供了一种更安全、更灵活的解决方案。

泛型函数

泛型函数通过在函数名后面添加<T>（其中T是一个类型参数）来定义。这个T之后可以用在函数内部任何地方，代表传入函数的具体类型。

function fn1<T>(arg: T): T {  
  return arg;  
}  
console.log(fn1<string>('a'));
console.log(fn1<number>(9));

TS学习总结

常见类型

type和Interfaces区别

void和never区别

泛型

泛型函数