深入浅出 TypeScript | 青训营

80 阅读2分钟

# JS和TS的异同

相同:都是脚本语言。

不同: JavaScript :是轻量级的解释性脚本语言,可嵌入到 HTML 页面中,在浏览器端执行。 TypeScript :是JavaScript 的超集(ts是微软开发的开源编程语言,vue3的底层代码也是ts),即包含JavaScript 的所有元素,能运行JavaScript 的代码,并扩展了JavaScript 的语法。(ts包含了js的库和函数,ts上可以写任何的js,调用任何的js库,可以在ts中使用原生js语法)。相比于JavaScript ,它还增加了静态类型、类、模块、接口和类型注解方面的功能,更易于大项目的开发。

ts基础类型

TS 支持的变量类型如下:

类型 描述 boolean 限制为布尔类型, true 或者 false

number 限制为任意的数字。 二进制,八进制,十进制,十六进制均可

string 限制为任意的字符串。单引号,双引号,反引号均可 字面量 限制为某个字面量的值

any 限制为任意类型

void 限制为 undefined, 一般用来限制函数的返回值

never 限制函数没有返回值

object 限制为对象类型

array 限制为数组类型

tuple 元组 限制为固定长度与类型的数组

enum 枚举 限制为枚举的数据

# type 和 interface 的区别

不同点: type 在声明类型别名之后实际上是一个赋值操作,它需要将别名与类型关联起来。也就是说类型别名不会创建出一种新的类型,它只是给已有类型命名并直接进行引用。interface是定义了一个接口类型。 type 能够表示非对象类型, 而 interface 则只能表示对象类型。 interface可以继承其他的接口、类等对象类型, type 不支持继承。

相同点 :- 都可以用来定义 对象 或者 函数 的结构,而严谨的来说,type 是引用,而 interface是定义。

泛型用法

  console.log(arg);
  return arg;
}
test<number>(111);// 返回值是number类型的 111
test<string | boolean>('hahaha')//返回值是string类型的 hahaha
test<string | boolean>(true);//返回值是布尔类型的 true
interface Search {
  <T,Y>(name:T,age:Y):T
}

let fn:Search = function <T, Y>(name: T, id:Y):T {
  console.log(name, id)
  return name;
}
fn('li',11);//编译器会自动识别传入的参数,将传入的参数的类型认为是泛型指定的类型

 name:T;
 constructor(name: T){
  this.name = name;
 }
 action<T>(say:T) {
   console.log(say)
 }
}
let cat = new Animal('cat');
cat.action('mimi')