TypeScript基础简介

TypeScript是Javascript的一个超集。 TypeScript在原有的基础之上又添加了编译器类型检查的功能，意味着如果使用ts进行开发，会对变量的类型进行较为严格的验证，防止程序员写出可能出错的代码，规范变成习惯，适合大项目开发。

复制代码

let a = 100;
a = 'hello world';

let a:string = '100';

`TypeScript`代码的编写及运行方式

Typescript代码写在后缀为.ts的文件中，这种文件可以被typescript编译器编译解析。该编译器读取ts文件后，将会把ts代码转成一套功能相同的js代码，输出到一个js文件中，这个过程成为编译。 ts代码是无法直接运行的，它只是提供了一套编译环境，将ts转成js，最终程序还是要执行js代码。

安装`Typescript`编译器

shell 复制代码

npm install -g typescript    # 安装ts编译器
npm install -g ts-node       # 安装ts-node运行环境，集成到vscode中
npm install -g  tslib  @types/node  #

如果报错，检查安装库的名字是否正确，必要时还可以修改以下镜像仓库地址。

安装完毕后，就可以使用tsc命令，对ts文件进行编译：

shell 复制代码

tsc  hello.ts

将会编译hello.ts，如果编译通过，将会生成hello.js。

vscode开发工具中有一个插件可以直接运行ts文件（自动编译，自动执行js）CodeRunner

查阅ts中文网：

https://www.tslang.cn/index.html

`Typescript`提供的基本数据类型

javascript 复制代码

// 01_basic.ts   体会ts的基本数据类型
let pName:string = '亮亮';
let pAge:number = 18;
let pMarried:boolean = false;
//  Type 'number' is not assignable to type 'string'. 
//  不能将数据"15"分配给类型"string"。
//  pName = 15;

// 声明一个变量，描述数组类型的数据
// string[]用于描述字符串数组类型  这个数组内只能放字符串
let pHobby:string[] = ['吃', '喝', '玩', '乐']
let pFav:Array<string> = ['健身', '摊煎饼', '背麻袋']
console.log(pHobby.join('; '))
console.log(pHobby.join(' / '))

// 声明变量描述一个元组类型的数据   Tuple内部的元素数据类型可以不同
let params:[string, number, number] = ['杀手', 1, 100] 
// 元组用于整合一些不同类型的数据，当做一个整体来进行后续处理
params = ['熊猫', 2, 20]
params = ['杀手', 1, 12]

// 可以使用元组简单的描述一个对象
let toy:[string,number,number,string] = ['奥特曼', 20, 500, '软胶'] 
toy = ['变形金刚', 30, 800, '塑料']

// 枚举 enumerate
// enum类型是对JavaScript标准数据类型的一个补充。 
// 像C#等其它语言一样，使用枚举类型可以为一组数值赋予友好的名字。

// 假设有一组数据，存储四个人的年龄  18 28 38 48
let yuAge = 18
let xinAge = 28
let liangAge = 38
let huaAge = 48
// 枚举可以非常方便的定义一组数据保存这些数字，提供了便捷的访问语法
enum Age {Xiaoyu=18, Xiaoxin=28, Liang=38, Hua=48}
// 如上语法即可定义个枚举类型，类型名称是：Age类型，包含有4个常量
// 如下访问：
console.log('晓宇的年龄：' + Age.Xiaoyu)
console.log('亮亮的年龄：' + Age.Liang)
// 什么时需要使用枚举来定义一些变量呢？
// 当编写代码的时候发现程序中需要提供一组相同类型的数据，且这些数据
// 一般情况下还没有什么变化，希望访问时有更好的代码可读性。

// 如果没有为每一个枚举名赋值，则默认从0开始自动分配：
enum Num {numA, numB, numC, numD, numE}
console.log(Num.numA)
console.log(Num.numB)
console.log(Num.numC)
// 由于枚举类型有如上特点，所以通常情况下会定义如下枚举类型，方便编码：
enum Gender {Male, Female}
enum OnOff {Off, On}
enum Married {No, Yes}
console.log('亮亮的婚姻状况：' + Married.Yes)
console.log('亮亮的性别：' + Gender.Male)
console.log('灯开着呢么？' + OnOff.On)

// 定义一个枚举类型，保存一组url后缀路径：
enum URLS {
  ACTOR_ADD = '/actor/add',
  ACTOR_LIST = '/actor/list',
  ACTOR_QUERY_BY_NAME = '/actor/query/name',
  ACTOR_DELETE = '/actor/del'
}
let BASEURL = 'http://localhost:3010'

console.log(BASEURL + URLS.ACTOR_ADD)
console.log(BASEURL + URLS.ACTOR_DELETE)
console.log(BASEURL + URLS.ACTOR_LIST)
console.log(BASEURL + URLS.ACTOR_QUERY_BY_NAME)


// 枚举类型还支持反查操作（通过值查名字）
// 查询18岁的是谁？
console.log(Age[18])
// 查询48谁的是谁？
console.log(Age[48])
// 查询0是代表男性还是女性？
console.log(Gender[0])

// Any类型 
// 一般情况下用于描述动态获取到的内容，这种数据不清楚其具体类型
let res1:any = {code:200, msg:'ok', data:['吃','喝','玩']}
let res2:any = {code:200, msg:'ok', data:{title:'电影名', actor:'吴京'}}
// any类型的变量可以指向数据结构不确定的一组数据 
// any的作用是为了告诉ts编译器：这个数据类型比较复杂，不需要检查它
// 一旦变量为any类型，导致编译器不晓得变量保存的具体数据结构，没有提示
let str = '{"code":200, "msg":"ok", "data":["吃","喝","玩"]}'
res1 = JSON.parse(str)
console.log(res1.code)


// ---------类型断言---------------------------------------
// 模拟发送请求，得到的响应数据
let respText = '{"code":200, "msg":"ok", "data":[1,2,3,4,5]}'
// 将响应文本转成js对象
let respObj:any = JSON.parse(respText)
// 若respObj是any类型，则不会有相应的数据结构的提示
console.log(respObj.code, respObj.data) 

// 遇到这种情况后，可以对respObj做一次类型断言（人工断定数据类型）
let resp: {
  code:number, 
  msg:string, 
  data:number[]
} = JSON.parse(respText)
console.log(resp.code, resp.data)
// 类型断言的作用就是告诉ts编译器
// 放心：resp一定是一个对象，里面的属性一定是。。。。。。。。

let r1:any = 1 + 3
let s1:string = r1       // 类型断言any能强制断言成string

`Typescript`中的函数

和javascript一样，Typescript函数可以创建有名字的函数和匿名函数。

javascript 复制代码

function name(param1, param2){
    return param1 + param2
}

ts函数与js函数不同的是：ts函数需要明确的指定涉及到的数据类型：参数的类型、返回值的类型等。

javascript 复制代码

function add (x:number, y:number) :number {
  return x + y
}

javascript 复制代码

//02_func.ts
function add (x:number, y:number) :number {
  return x + y
}
let myAdd = function (x:number, y:number) :number {
  return x + y
}

let r:number = add(5, 6)
let r2 = myAdd(3, 4)  // 类型推论   r2的类型就是方法返回值的类型

// 声明一个函数：getArea(半径)，求圆的面积 (保留2位小数)
function getArea(r:number): string{
  return (Math.PI*r*r).toFixed(2)
}
let area = getArea(5)
console.log(area)

// 匿名函数   指定函数类型变量的数据类型  (参数列表类型)=>返回值类型
let getArea2 : (r:number)=>string = 
  function (r:number): string{return (Math.PI*r*r).toFixed(2)}


// 函数的参数
// 调用ts的函数时，传递的参数列表必须与函数声明的参数列表保持一致
console.log(add(10, 5))
// console.log(add(10, '5'))  // Error   数据类型要匹配
// console.log(add(10, 5, 1))  // Error  参数数量要匹配


// TS函数的可选参数
function getMovies(
  keyword:string, page:number = 1, pagesize?:number){
    console.log('查询关键字：' + keyword)
    console.log('查询页码：' + page)
    console.log('每页条目数：' + pagesize)
}
getMovies('杀手', 2)
getMovies('杀手', 3, 100)
getMovies('杀手', 100)

// 剩余参数，ts会把参数列表剩余参数都封装到一个数组中
function buildName (firstName:string, ...restName:string[]){
  return firstName + "·" + restName.join('·')
}
console.log(buildName('亮', '小', 'Smith', '成'))

面向对象编程 一种编程思维逻辑

ts 复制代码

let p1 = new Person('liangliang', 38, 'male')
let p2 = new Person('xiaoxin', 28, 'male')
p1.compare(p2)

类型和对象

`Typescript`中的自定义类型

通过自定义类型就可以描述世界上一类事物。通过该自定义类型创建的对象就相当于该类事物的一个具体的实例。

ts 复制代码

class Person{}  描述人类    
	new Person() 一个具体的人   
	new Person() 第二个具体的人
class Animal{}  描述动物
    new Animal() 一个具体的动物
    new Animal() 第二个具体的动物

TypeScript基础简介

TypeScript代码的编写及运行方式

安装Typescript编译器

Typescript提供的基本数据类型

Typescript中的函数

Typescript中的自定义类型

`TypeScript`代码的编写及运行方式

安装`Typescript`编译器

`Typescript`提供的基本数据类型

`Typescript`中的函数

`Typescript`中的自定义类型