TypeScript学习——数组、元组、接口(2)

数组

数组类型注解

const numberArr: (number | string)[] = [1, '2', 3]; //既可以是number 也可以是string
const stringArr: string[] = ['1', '2', '3'];
const underfinedArr: undefined[] = [undefined];

定义类型别名或者class 一定要满足class里面的类型属性，如果不一致会报错

type User={ name: string; age: number }

const objectArr1: User[] = [
  {
    name: 'dell',
    age: 28,
  },
];

class Teacher {
  name: string;
  age: number;
}
const objectArr2: Teacher[] = [
    new Teacher(),
  {
    name: 'dell',
    age: 28,
  },
];

元组tuple

一个数组长度是固定的,每一项都是固定的类型 可以通过元组去约束

//比如读取csv 文件格式
const teacherInfo: [string, string, number] = ['Dell', 'male', 18]; //多一个少一个，类型不对应都会报错
const teacherList: [string, string, number][] = [
  ['Dell', 'male', 18],
  ['Dell', 'male', 18],
  ,
  ['Dell', 'male', 18],
];

接口interface

接口在开发过程重,ts会去做代码提示工具，编译成JavaScript之后并不会出现,会被剔除掉

interface和type 的区别

interface和type 相类似，但并不完全一致

1.type Person1可以代表是string

2.interface Person只能代表是个对象或者函数,没有办法代表是基础类型

规范：一般是先用interface 去定义，实在不行的情况才用type

interface Person{
    name:string;
}
type Person1={
     name:string;
}
const getPersonName=(person:Person)=>{
console.log(person.name);
};

const setPersonName=(person:Person,name:string)=>{
    person.name=name;
}

接口继承

interface Person{
    readonly msg:string;//表示只能读，不能写
    name:string;
    age?:number;//age不是必传的
    [propName:string]:any;//可以接收其他的额外属性
    say():string//返回值string
}
//接口可以继承另一个接口！注意如果定义为Teacher类型，必须同时满足Teacher+Person的方法和属性
interface Teacher extends Person{ //继承Person接口的属性和方法
    teach():string;
}
const person = {
  name: 'dell',
  sex: 18,
  say() {
    return 'say hello';
  },
  teach() {
    return 'teach';
  },
};
//person: Teacher 必须要求Person的属性和方法之后  还得满足Teacher的
const setPersonName = (person: Teacher, name: string): void => {
  person.name = name;
};
//类的继承
class User implements Person{ //必须具备接口的那些内容 不然会报错
    name='ok';
    say(){
        return 'hello';
    }
}

定义函数类型

interface SayHi{ //定义函数的类型
    (word:string):string//接收string类型的函数  返回值必须是string
}
//定义函数类型
const say: SayHi = (word:string) => {
    return word
};

初始化ts文件配置

tsc --init

编译成JavaScript

tsc 文件名.ts

运行ts文件

 ts-node demo.ts