TypeScript 快速上手

文档中心

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;}

比如说像这样

TypeScript 快速上手

接口

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

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'// 多余的属性});

TypeScript 快速上手

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

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

索引签名

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

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

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

TypeScript 快速上手