TypeScript常见问题及概念

一、Ts静态类型有哪些

Ts常用基础静态类型包括null underfined symbol ,boolean,void number string。

可以写下下面这段代码：

const count:number = 12;
const name:string  = "小明";

我们还可以使用自定义静态类型，比如我定义并使用一个WangAYi静态类型，在声明变量时，可以使用此静态类型，代码如下：

//一般写作习惯以大写字母开头
interface WangAYi {
    name: string;
    age : number;
    use : () => void;
}
const ayi:WangAYi = {
    name: "王阿姨",
    age : 46,
    use(){ console.log("可以给我介绍小姐姐") } 
};
ayi.use();

二、Ts对象类型有哪些

typescript对象类型包括：

• 对象类型
• 数组类型
• 类类型
• 函数类型

几种类型如下：

//对象类型
interface Student{
    name: string;
    age: number;
    no: number
    sex: string
}

//数组类型
const nameList: string[] = ["苍井", "小泽玛丽", "吉泽明"];

//类类型class AVactor{    
    public name: string 
    private age: number
    public sex: string
    constructor(opt:{name: string, age: number, sex: string}){        
        this.name = opt.name        
        this.age  = opt.age        
        this.sex  = opt.sex    
    }}
const actor:AVactor = new AVactor({name:"吉泽明步",age: 36,sex: "女"})

//函数类型
const anmo: ()=>string = ()=>{
    return "按摩很舒服";
}

三、类型注释与类型推断

类型注释

这个概念，我们上述在使用ts过程中已经用到，理解起来其实很简单，即显式的告诉代码变量的类型。如下：

const age: number = 18;

类型推断

TypeScript里，在有些没有明确指出类型的地方，类型推论会帮助提供类型。

如以下代码，并没有注释类型，但是ts会自动把变量注释为数字类型

const age = 18;

四、有关函数类型定义

易错点

①函数范围类型不定义

如下错误示例,我们通过函数count希望求传入两个数的和，但是写错了，这个时候ts并不会提示报错。

function count(a:number,b:number){
    return a + b + '';
}

而当我们定义了函数返回类型，ts会提示我们代码写错了。

function count(a:number,b:number):number{
    return a + b + '';
}

②函数参数类型定义错误

如下为常见错误：

//错误
function person({name:string,age:number}){
    console.log(`姓名：${name},年龄：${age}`);
}

//正确
function person({name,age}:{name:string,age:number}){
    console.log(`姓名：${name},年龄：${age}`);
}

参数的泛型定义

function person<T,P,K>(first:T,second:P,third:K){
    return `identify is ${first}-${second}-${third}`;
}
person<string,string,number>("加藤","男",61);

//数组的使用
function card<T>(list:T[]){
    return list;
}
//或
function card<T>(list:Array<T>){
    return list;
}

参数联合类型

function person(arg:number|string){
    return arg;
}

五、类中泛型的定义

//一般情况
class AVgirl<T>{
    constructor(private lists:Array<T>){}
    getNames(index:number):T{
        return this.lists[index];
    }
}
const avgirls = new AVgirl<string|number>(["苍井","小泽玛丽","吉泽明",123]);
console.log(avgirls.getNames(1))

//扩展
type Name = {
    name: string
}
class AVgirl<T extends Name>{    
    constructor(private lists:Array<T>){}
    getNames(index:number):T{      
        return this.lists[index];    
    }
}
const avgirls = new AVgirl([
  { name: "苍井" },
  { name: "小泽玛丽" },
  { name: "吉泽明" },
]);
console.log(avgirls.getNames(1))

六、部分对象问题总结

树形类型定义

//树形类型
interface Menu{
    title: string;
    path: string;
    name: string;
    children: Menu[]
}

几个固定值的联合类型

type Anum = "1" | "2" | "123" | 1;

包含任意属性，任意类型

interface Menu{
    title: string;
    path: string;
    name: string;
    [prop:string]: any;
}

接口和类型别名的区别

两者用法基本一样，但也有稍许不同；

① 类型别名可以直接给类型或者对象，而接口必须给对象

type Age = number;
type Person = {
    name: string,
    age: number
}
interface People{
    sex: string;
    like: string
}

②语法不同

//定义语法就不说了
//扩展语法不同
interface Name {  name: string;}interface User extends Name {  age: number;}
type Userage = Name & {  age: number;}

一般情况下，基础类型结构可以使用type定义，比较复杂的对象类型就使用interface