TypeScript的学习笔记 [ Luat doc 社区文章静态页面 ]

初识：

TypeScript可能对于部分人不是很熟悉，对JavaScript比较熟悉。那TypeScript是什么呢？它是Javascript的超集，也可以说ta建立在JavaScript之上，但最终是转为JavaScript的。

环境（以下仅是个人安装环境）：

node: 10.16.0
npm: 6.9.0
ts-node: 9.1.1(非必须)
工具：vscode

安装命令

//建议全局安装 typescript
npm install -g typescript
//ts-node 用于直接运行ts文件
npm install ts-node

运行

如果未安装ts-node（ts文件不能直接运行，需要通过tsc xx.ts 命令执行转换成xx.js文件，再通过执行node xx.js方可执行）
运行命令：tsc xx.ts node xx.js

已安装ts-node
运行命令：ts-node xx.ts（即可）

构建第一个TypeScript文件

创建一个空文件，打开vscode，进到根目录下，创建空文件demo.ts（以 .ts 结尾文件名），内容如下：

1 2	var message : string = "hello world" console.log(message)

这样就创建好了一个ts文件了（刚开始可能有点懵，但是不要慌…）
下面运行它：tsc demo.ts
这个时候应该就能看到终端上打印出来 hello world 了。

那么恭喜你，你成功了，你成功的成为了一名菜鸟…

类型注解

TypeScript里的类型注解是一种轻量级的为函数或变量添加约束的方式。就是变量的类型，类比JavaScript中变量声明类型（可能我们再js中也不写….）
在你创建的第一个demo.ts文件中的 var message : string = "hello world" 的 string 就是类型注解。

命名规则

TypeScript 变量的命名规则：

变量名称可以包含数字和字母;
除了下划线 _ 和美元 $ 符号外，不能包含其他特殊字符，包括空格。
变量名不能以数字开头。
变量使用前必须先声明，我们可以使用 var 来声明变量。

格式：var [变量名]：[类型] = 值

数据类型

数据类型大致： any(任意类型)，number(数字)，string(字符串)，boolean(布尔)
此外，还有数组、元组、枚举、void、null、undefined、never(ts/js没有整数类型o)
下面看一下如何进行声明定义的：

let x:any = 123;  //是否设置初始值  可选
x = 1
x = "sssss"
x = true

let y: number = 999
let z: string = "合宙"
let con: boolean = true

下面说一下数组的声明

1 2	let arr: number[] = [1,2,34] let arr1: any[] = [1,true,"asasdasdad"]

元组类型用来表示已知元素数量和类型的数组，各元素的类型不必相同，对应位置的类型需要相同。

1
2
3

let yz: [string,number]   //声明了一个变量，并没有给值
yz = ["s",1]  //success
// yz = [1,"sd"] //error

函数返回值

1
2
3

function s() : void {    // void  用于标识函数的返回值类型，表示无返回值
  console.log("合宙")
}

其他：这里对never简单的进行一个声明

function getTotal(one: number,two: number):number{  //函数返回值类型确定防止出现未知问题
  return one+two
  // return one+two+""  //这样写就会报错，指定了函数返回值是number
}

var total = getTotal(1,2)
console.log(typeof(total),total)

function forEver():never{
  while(true){}
  console.log('111111')
}
forEver()

function errFunc():never{
  throw new Error()
  console.log("33333333")
}
errFunc()

null:对象缺失  
undefined:初始化未定义的变量值 
never: 是其它类型（包括 null 和 undefined）的子类型，代表从不会出现的值。
null/undefined 是其它所有类型的子类型  当一个类型变量可能会出先现null/undefined情况，可以使用 | 进行连接

let ss : number | null | undefined

ss = 1
ss = null
ss = undefined

// 总结：声明一个基础变量再变量名后 加上  :   后面跟上类型即可

对象数组

实际开发过项目的同学，应该很清除，最常见的格式就是数组中是对象的：[{},{},…]

1	var arr = [{name: 'lalalal', age: 9999}, {name: 'lalalal2', age: 99998}]

如何实现呢？

1	var arr1: {name: string, age:number}[] = [{name: 'lalalal', age: 9999}, {name: 'lalalal2', age: 99998}]

上述形式看起来可能有点麻烦，假如有多个类似的数组，那岂不是要写很多次么？

TypeScript 为我们准备了一个概念，叫做类型别名(type alias)

1
2
3

type user = {name: string, age: number}

var arr2: user[] = [{name: 'lalalal', age: 9999}, {name: 'lalalal2', age: 99998}]

思考，那能不能用类进行一个定义呢？yes

class UserH {
  name: string;
  age: number
}

var arr3: UserH[] = [{name: 'lalalal', age: 9999}, {name: 'lalalal2', age: 99998}]

函数

函数参数为对象时，如何进行传递和声明，下面先用js写两个简单的函数

function test({one}){
    return "这是哥测试"+one
}

test({one:1})

// function add({ one, two }) {
//   return one + two;
// }

// const total = add({ one: 1, two: 2 });

如何使用ts进行编写实现呢？

/* 错误写法：
function add({ one: number, two: number }): number {  //编译器会报错
  return one + two;
}
const total = add({ one: 1, two: 2 });
*/

// 正确写法：
function add({ one, two }: { one: number, two: number }): number {
  return one + two;
}

const total = add({ one: 1, two: 2 });

接口

interface

待续》》》…