typescript 类型声明

typescript 类型声明

typescript 在线编辑网站

声明类型

typescript 中对变量的类型更加严格

var [变量名] : [类型] = 值;
例子
var num:number = 1

num = "2" //error          
var num:number = "123"  //error

声明变量时候没有声明类型 默认是赋值时的类型

var num = 2
num = "2" //error

let obj = {
    name: 'John'
}
obj.age = 20; // error!
obj.name = 250; // error!

ts可以声明多类型

let str:number|string =  "2"
str = 1      //success

let obj: {
    name: string | number;
    age?: number;
} = {
    name: 'John'
}
obj.age = 20; // success
obj.name = 250; // success

使用type

// good one
let user = {
    name: 'Lucy',
    age: 20
}
type User = typeof user;
 
 
// deprecate
type User = {
    name: string;
    age: number;
};
let user: User = {
    name: 'Lucy',
    age: 20'
}

如上第一种写法，我们在声明user变量时，即得到了值，又获得了类型！反之，第二种写法就有点啰嗦了。

数组类型

//类型[]
let arr :number[]=[1,2,3]
//数组内只允许时数字
let arr Array<number> = [1,23,4]

函数类型

function([形参]:[类型],[形参]:[类型]):[返回值类型]{
。。。
}
function sum(x: number, y: number): number {
    return x + y;
}

函数表达式

let mySum = function (x: number, y: number): number {
    return x + y;
};

这是可以通过编译的，不过事实上，上面的代码只对等号右侧的匿名函数进行了类型定义，而等号左边的 mySum，是通过赋值操作进行类型推论而推断出来的。如果需要我们手动给 mySum 添加类型，则应该是这样：

let mySum: (x: number, y: number) => number = function (x: number, y: number): number {
    return x + y;
};
或者用接口的形式
interface sumType{
    (x: number, y: number): number;
}

let mySum: sumType;
mySum = function (x: number, y: number): number {
    return x + y;
};

函数可选参数

function buildName(firstName: string, lastName?: string) {
    if (lastName) {
        return firstName + ' ' + lastName;
    } else {
        return firstName;
    }
}
?就是表示这个参数可选

参数默认值

function buildName(firstName: string, lastName: string = 'Cat') {
    return firstName + ' ' + lastName;
}

函数重载定义多类型

function reverse(x: number | string): number | string {
    if (typeof x === 'number') {
        return Number(x.toString().split('').reverse().join(''));
    } else if (typeof x === 'string') {
        return x.split('').reverse().join('');
    }
}

这个无法表达出输入字符串返回字符串输入数字返回数字
重载

function reverse(x: number): number;
function reverse(x: string): string;
function reverse(x: number | string): number | string {
    if (typeof x === 'number') {
        return Number(x.toString().split('').reverse().join(''));
    } else if (typeof x === 'string') {
        return x.split('').reverse().join('');
    }
}

interface 和 type

//定义对象的类型
interface User {
  name: string
  age: number
}
let user:User

//定义函数
interface SetUser {
  (name: string, age: number): void;
}

let setUser:SetUser=(name:string,age:number)=>{
   ... 
}

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

let user:User
type SetUser = (name: string, age: number)=> void;
let setUser:SetUser=(name:string,age:number)=>{
   ... 
}

继承

interface Name { 
  name: string; 
}
interface User extends Name { 
  age: number; 
}

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

类的类型 class

class Animal {
    name: string;
    constructor(name: string) {
        this.name = name;
    }
    sayHi(): string {
      return `My name is ${this.name}`;
    }
}

let a: Animal = new Animal('Jack');
console.log(a.sayHi());

//接口方式
interface Alarm {
    alert(): void;
}

class Door {
}

class SecurityDoor extends Door implements Alarm {
    alert() {
        console.log('SecurityDoor alert');
    }
}

class Car implements Alarm {
    alert() {
        console.log('Car alert');
    }
}

泛型

function createArray<T>(length: number, value: T): Array<T> {
    let result: T[] = [];
    for (let i = 0; i < length; i++) {
        result[i] = value;
    }
    return result;
}

createArray<string>(3, 'x'); // ['x', 'x', 'x']

上例中，我们在函数名后添加了 ，其中 T 用来指代任意输入的类型，在后面的输入 value: T 和输出 Array 中即可使用了。

附加内容
可选属性

interface Person {
    name: string;
    age?: number;
}

let tom: Person = {
    name: 'Tom'
};

任意属性

interface Person {
    name: string;
    age?: number;
    [propName: string]: any;
}

let tom: Person = {
    name: 'Tom',
    gender: 'male'
};

只读属性

interface Person {
    readonly id: number;
    name: string;
    age?: number;
    [propName: string]: any;
}

let tom: Person = {
    id: 89757,
    name: 'Tom',
    gender: 'male'
};

tom.id = 9527;

// index.ts(14,5): error TS2540: Cannot assign to 'id' because it is a constant or a read-only property.