这是我参与「第四届青训营」笔记创作活动的的第15天，今天主要记录的内容是初次学习typescript的小小总结,是本人的学习过程，将转换为文本记录.大白话记录，认真看一定可以学会。

一、文章内容

typescript和JavaScript比较
typescript环节搭建
typescript基础语法
typescript变量声明
typescript判断循环
typescript函数演示
typescript接口

二、引导课

typescript和JavaScript比较

TypeScript 是 JavaScript 的超集，扩展了 JavaScript 的语法，因此现有的 JavaScript
代码可与 TypeScript 一起工作无需任何修改，TypeScript 通过类型注解提供编译时的静态类型检查。
TypeScript 可处理已有的 JavaScript 代码，并只对其中的 TypeScript 代码进行编译。

图1 JavaScript和typescript对比

从图1可以看到JavaScript是基类也是typescript的父类，typescript基于JavaScript进行了许多细节的优化，然后typescript支持es6。

typescript环节搭建

1.使用本地搭建，可以参考网上的资料，比如csdb,菜鸟，我在这里就不搭建了，比较费劲，影响学习进度,更新到后期我会把这块内容补充上来的。

2.我也推介大家使用在线idea开发，就是官方的网站=>点我进入,我自己也在使用这种方法学习。

typescript基础语法

在写下文，我需要介绍一件事，typescript写的代码通过转换最后转为了JavaScript的代码，如图2所示， typescript的基础语法由；模块、函数、变量、语句、注释构成。基本语法跟JavaScript差不多，对象、函数、变量定义有点区别，不过本文会一一介绍的。 typescript注释也分单行和多行，单行是//,多行是/**/。

graph LR
123.ts --> tsc123.ts编译 --> 123.js

图2 typescript程序执行过程

三、核心课

typescript变量声明

从这里开始真正需要学习的东西来了，变量跟JavaScript里的完全不一样，我第一次学是很蒙的，但是咬牙看了下来，多写也就记住了。

在ts里变量名声明的语法规则：var name : type = value,其中var是es6的新标准，name是变量名可以随便写，不要出现数字作为变量名，可以用$、_、和英文字母，一般使用英文字母错不了。type就是变量名的类型了，比如：any、number、string、void、enum、boolean、null、undefined...

接下来看操作普通变量大家注意在type前加冒号就行了，重点是enum枚举类型跟c语言里的枚举类型一样。

字符串和number和布尔值

var my_name :string = '我是字符串'
var my_age : number =  18
var my_sex_boy : boolean = true

注意在typescript中同样是以行作为单位的，可以不加分号，编译器会帮助加，大家可以加，不要学我，如图3编译器为我们加了分号， 基本的类型很简单看一下就掌握了，核心在后面。

图3 编译器

any任意类型

图4 any类型

如图4any类型可以随便赋值，任意类型，null和undefined也可以。

数组类型

// 在元素类型后面加上[]
let arr: number[] = [1, 2];

// 或者使用数组泛型
let arr: Array<number> = [1, 2];

数组在typescript中有俩中方法，就是上图了,其中第二种是泛型其中的number可以修改为其他类型比如，string，Boolean... 当然typescript中还有元组，就是对数组的另一种指定了类型，操作跟数组差不多

元组操作

let x: [string, number];
x = ['Runoob', 1];    // 运行正常
x = [1, 'Runoob'];    // 报错
console.log(x[0]);    // 输出 Runoob

元组指定了输入的内容，必须输入数据类型跟预定数据类型一一对应，否则就像图5一样的错误。

图5 波浪线报错

枚举类型

enum Color {Red, Green, Blue};
let c: Color = Color.Blue;
console.log(c);    // 输出 2
console.log(Color[0])0 // red

语法enum 加变量名然后花括号里面是枚举的数据，然后在下文就可以调用了，在上述代码中，我们能定义了一个变量color是枚举类型，然后通过枚举里的元素找到了元素的下标，同时也可以通过数组的访问形式访问到red；当然我们可以指定其实坐标。如下代码。

enum Color {Red=10, Green, Blue};
console.log(Color[11]) ///green

判断循环

if 语句 - 只有当指定条件为 true 时，使用该语句来执行代码
if...else 语句 - 当条件为 true 时执行代码，当条件为 false 时执行其他代码

判断语句跟c语言JavaScript一样，只做简单的记录.

var pd : boolean = true
if (pd == true){
    console.log('真')
}else{
    console.log('假')
}

循环语法


var i : number = 0 
for(i ; i <5 ; i++){
    console.log(i)
}

输出 0 1 2 3 4

typescript函数演示

Js代码普通add函数：
function add(x,y){
    return x+y;
}

ts代码add函数：
function add(x:number,y:number) : number{
    return x+y;
}

通过二者对比基本没什么难度，主要是在参数和返回值的类型进行了变化加冒号和type类型，即可。

接口

所谓接口不用管概念多么复杂只需要知道它可以作为一种类型或者是帮助对象定义模板，如图6所示正常出了3，3，同时你看到接口point里有三个参数但我们传参的时候只填了俩个为什么呢？因为我们在第三个参数后面加了？意思是可以缺省。

图6 接口案例

我们可以看到接口可以作为一种类型传给函数.简化我们的操作.

interface point{
    x:number;
    y:number;
    z?:number
}

function get_dis(a:point,b:point) : point {
    return {x:a.x + b.x,y: a.y+b.y};
}

var ans:point = get_dis({x:1 ,y :1},{x:2,y:2})
console.log(ans.x, ans.y)

四、总结

整体学习了typescript的入门语法和常见的函数使用，接口，判断和循环基本的语句可以编写了，从JavaScript转向typescript会有一点不习惯，多写点代码就习惯了，理解其中的内涵了，有不懂的地方欢迎留言。

Typescript小白鸭入门 | 青训营笔记