TS
typescript是拥有类型的javaScript超集, 它可以编译成普通\干净\完整的js代码 ES3
js所拥有的内容ts都支持, 并且js有ES67... ts也都支持这些语法.
1.ts全局安装typescript
npm install -g typescript
tsc 文件名.ts //转换为js文件
node 文件名.js //运行的js文件
2.数据类型
<1>number
//number
let num:number=123
let decLiteral: number = 6;//10进制
let binaryLiteral: number = 0b1010;//2进制
let hexLiteral: number = 0xf00d;//16进制
let octalLiteral: number = 0o744;//8进制
<2>boolean
//boolean
//布尔类型只有两个值 true和false
let flag: boolean = true;
flag = false;
<3>string
let name:string="小爱"
let msg:string="hello"
msg = `${name}`
<4>null和undefined
//js中null和undefined是两个基本数据类型
//在ts中 null和undefined他们是类型 也是值
let u: undefined = undefined;
let n: null = null;
<5>symbol
let name:symbol=Symbol("name")
let name1:symbol=Symbol("name")
const obj = {
[name]: "hello",
[name1]: "你好",
}
<6>void
// 当一个函数没有返回值时,你通常会见到其返回值类型是 void
function fn(num:number, num1:number): void{
console.log(num+num1)
}
let sum = fn(5,3)
<7>never
//never表示永远都不会发生值的类型
function fn(): never{
throw new Error("手动错误")
}
fn()
<8>any
//这个数据的数据类型可以是任何的数据
let num:any="123"
num = 123;
num = null;
2.TS中的类型
<1>联合类型
let num:number|string=123
num="123"
<2>交叉类型
//交叉类型表示需要满足多个条件
//交叉类型使用的是&
let b=number&string
//表达的含义是number和string要同时满足
//但是不可能有一个值同时是number和string的, 所以b这个类型其实是一个never类型
<3>可选类型
function fn(msg?:string){ // undefined | string
console.log(msg)
}
fn();
fn(undefined);//undefined
fn("hello world")
//可选类型 可以看作undefined和所写类型的一个联合类型
3.TS中的类
<1>ts中类的成员修饰符
//在typeScript中 类的属性和方法支持三种修饰符
//1 public
// 修饰的是在任何地方可见 公有的属性或方法 默认编写的属性就是public的
//2 private
// 修饰的是仅在同一类中可见 私有的属性或方法(不参与继承)
//3 protected
// 修饰的是仅在类自身及子类中可见 受保护的属性或方法(不能读写)
//4 readonly
// 修饰的是这个属性我们不希望外界可以任意的修改,只希望确定值之后直接使用(只能读)
//1.public
class Person{
public name!:string;
public age:number;
constructor(name:string, age:number) {
this.name = name;
this.age = age;
}
running(){
console.log(this.name + " running")
}
eating(){
console.log(this.name + " eating")
}
}
class Student extends Person{
public learn: string;
constructor(name:string, age:number, learn: string) {
super(name, age);
this.learn = learn
}
running(){
//this ==> s
//super===> Person
super.running()
console.log(this.name + " Student running")
}
}
let s: Student = new Student("学生", 20, "TypeScript");
s.running();
s.eating();
console.log(s)
//2.private
class Person{
private name:string;
constructor(name:string) {
this.name = name;
}
}
let p = new Person("aa");
//3.protected
class Person{
protected name:string;
constructor(name:string) {
this.name = name;
}
}
let p = new Person("aa");
//4.readonly
class Person{
readonly name:string;
constructor(name:string) {
this.name = name;
}
}
let p = new Person("aa");
4.TS中的接口interface
<1>接口声明
interface Person{
name:string,
age:number
}
let obj:Person={
name:"haha",
age: 18
}
<2>interface的继承
interface Obj {
name: string,
run: () => void
}
interface Obj2 {
age: number
}
//接口是支持多继承的(类的继承只能继承一个)
interface Obj3 extends Obj, Obj2 {
jump: () => void
}
let obj: Obj3 = {
name: "你好",
age: 18,
run(){},
jump(){}
}
<3>interface和type的区别
//interface和type都可以用来定义类型
//1. 如果定义的是对象类型,那么通常推荐使用interface
//2. 如果定义的是非对象 function Direction 推荐使用type
//1.interface可以重复声明 type不能重复声明
//2.type定义的别名, 别名是不能重复
interface Person {
name: string,
run:()=>void
}
interface Person {
age: number
}
let obj: Person = {
name: "aa",
run(){},
age: 18
}
<4>interface字面量赋值
//在ts通过字面量直接赋值的过程中, 为了进行类型推导会进行严格的类型限制
//但是我们之后讲一个 变量 赋值给其他变量的时候, ts会进行一个(freshness)擦除操作
interface Person{
name: string,
age: number
}
let obj = {
name: "你好",
age: 18,
flag: true
}
let p:Person = obj;
5.TS的泛型
//T: type的缩写, 类型
//K/V: key和value的缩写, 键值对
//E: element的缩写, 元素
//O: object的缩写, 对象
//泛型函数
//函数中在函数名的后面通过<形参>的形式,接受传递过来的类型
function fn<T=string>(arg:T):T{
console.log(arg)
return arg
}
//泛型函数调用
//1通过<类型> 的方式将类型传递给函数
fn<string>("1234")
//2通过类型推导,自动的推导出我们传入变量的类型
// 在这里会推导出他们是字面量类型, 当然字面量类型对我们的函数也是适用的
fn<number>(123)
//引用类型会推导出想要的效果
fn<number[]>([1,2,3])