TypeScript 快速上手

数据类型

在 JavaScript 当中是没有数据类型的，应该说是在声明变量的时候不需要声明数据类型，所以就会有问题，而且有很多问题是在编写代码的时候不能被发现，因为是动态类型，所以即使是代码编辑器也没办法对代码有正确的提示，只有在编译时才会报错，而 TypeScript 就是为了解决 JavaScript 的这些小问题而出现的，所以就先来讲一下 TypeScript 的写法

JavaScript

var num;
var str;

TypeScript

var num:number;
var str:string;

可以看见，TypeScript 和 JavaScript 的区别就是 type ，也就是说 TypeScript 是有类型的 JavaScript，在声明变量时就要规定它的类型

var num:number; 	// number 类型
var str:string;	    // string 类型
var arr1:string[];	// string 数组
var arr2:number[];	// number 数组
var obj:{};         // object 类型
var a:any;         	// 任意类型
var b:void;         // 空类型

其中 any 和 void 通常用在函数的返回类型当中

函数

函数跟 JavaScript 大体上也是一样的，不过要标明返回的数据类型，其实也可以不用，但这样的话不就又失去了 type 的作用了吗

function func1():void {
    console.log('hello world');
}

var func2 = function():void {
    console.log('hello world');
}

var func3 = ():void => {
    console.log('hello world');
}

在入参的后面也需要跟上数据类型，这样在调用时就不会出现任何参数都能塞进去的情况了

const sum = (x:number,y:number):number => {
    return x + y;
}

比如说像这样

接口

有时候需要用到入参是一个对象的时候可以这样写

const getInfo = (obj:{name:string,age:number}):string => {
    return `name: ${obj.name},age: ${obj.age}`;
}

但有些时候这样写就显得有些复杂了，这时候可以给入参加入一些约束，就需要用到接口

// 接口 用来约束对象中的参数
interface Info{
    name:string;
    age:number;
}

// 用接口作为入参
const getInfo = ({name,age}:Info):string => {
    return `name: ${name},age: ${age}`;
}

var info:string = getInfo({
    name:"张三",
	age:18
});

可选属性

可是有些时候，有些参数并不是必须的，就可以设置成可选属性，只需要在类型前加上一个 ?

interface Info{
    name:string;
    age?:number;	// 可选属性
}

const getInfo = ({name,age}:Info):string => {
    return `name: ${name} ${age?',age:' + age : ''}`;
}

var info1:string = getInfo({
	name:"张三",
    age:18		// 可选属性可以不输入
});

var info2:string = getInfo({
    name:"张三"
});

断言

有些时候我们还有可能会输入了一些多余的属性，比如不存在的属性，在传参的时候就会出现一些小问题

var info:string = getInfo({
    name:"张三",
    age:18,
    id:'name'	// 多余的属性
});

这时候就需要用到断言来让函数接受

var info:string = getInfo({
    name:"张三",
    age:18,
    id:'name'
} as Info);

索引签名

当然，还有更好的解决方法，把多余的参数也接收了

interface Info{
    name:string;
    age?:number;
    [prop:string]:any;
}

本文章首发于我的个人博客 TypeScript 学习笔记