typescript基础(1)

TypeScript 是一种由微软开发的的强类型编程语言。它是JavaScript的一个超集，可以编译成纯Javascript，兼容JavaScript，提供类和模块的概念，它的最大的特点就是类型化。未来前端开发的趋势。不能在浏览器或node中直接运行需要先编译为Javascript才能运行。

typescript编译环境

方式一全局安装typescript npm i typescript -g tsc -v 查看安装版本
在命令行使用 tsc xxx.ts 将ts编译生成对应的js文件
方式二全局安装ts-node npm i ts-node -g
在命令行使用 ts-node xxx.ts 执行ts文件，不会生成js文件就可以运行

typescript配置文件

npm init -y 创建package.json

tsc –init 创建一个 tsconfig.json配置文件

{
  "compilerOptions": {
    "target": "es5", // 指定 TS 编译成 JS 后的js版本
    "module": "commonjs", // TS 编译成 JS 后采用的模块规范 commonjs amd cmd  es等
    "lib": ["DOM","ES2020"], // 指定 TS 编码期间可以使用的库文件版本
    "outDir": "./dist", // 指定 TS 文件编译成 JS 后的输出目录
    "rootDir": "./src", // 指定 TS 文件源码目录
    "strict": true, // 启用严格检查模式
    "allowJs": true, // 允许编译js文件  允许在TS中引入js文件
    "strictNullChecks":false,// null和undefined 只能赋值给any,unknown和它们各自的类型
    "noImplicitAny": true, // 一般是指表达式或函数参数上有隐含的 any类型时报错
    "experimentalDecorators": true, // 启用ES7装饰器实验开启选项
    "emitDecoratorMetadata": true, // 启用装饰器元数据开启选项
    "declaration": true, // 指定 TS 文件编译后生成相应的.d.ts文件
    "removeComments": true, // TS 文件编译后删除所有的注释
    "baseUrl": "src", // 工作根目录  解析非相对模块的基地址
    "paths": { "@/datatype/*": ["datatype/*"] }, // 路径别名的配置
    "esModuleInterop": true,  // TS 可以用import from导入
  },
  "include": [ "./src/**/*.ts", "src/common/util"], // 需要编译的ts文件路径
  "exclude": [ "./src/**/test", "./src/**/premit"] // 需要忽略编译的ts文件路径
}

数据类型

基础数据类型 boolean、number、string、undefined、null、symbol、enum、any、void、never、tuple、array、object

高级类型 union 组合类型、Nullable 可空类型、Literal 预定义类型

/*
boolen 布尔值  var isDone:boolen = false
number 数值型  var isNumber:number = 6
string 字符型  var name:string = 'bob'
never 不会出现的值
array  数组 在元素类型后加[]  arr:number[]=[1,2]
元祖  数组长度固定，元素类型也固定 let x:[string,number]=['1',2]
*/
// TypeScript中数组使用'[]'来声明
var list:number[] = [1,2,3] // 同 list = [1,2,3]  list:Array<number> = [1,2,3]
var name:string[] = ['赵','钱','孙','李']
// 通过下标访问数组元素
console.log(list[1]) // 2
// 使用泛型+关键字Array+any 定义任意类型的数组 使用
var arr:Array<any> = [1,2,3,'赵','钱',false,{},3.2];
console.log(list[6]) // {}
// 使用any声明 任意类型数组
var arr:any[] = [1,2,3,'赵','钱',false,{},3.2];
// 元组 tuple 数组长度固定 类型也固定 元祖声明时必须指定类型
const arr:[number, string, undefined] = [1, '2', undefined]

enum 枚举类型用于定义数据集合用关键字enum来声明

// 1. 如果不声明第一项的值 那么Red值就是0,然后每一项都加1
enum Color{
  Red, // 枚举元素列表
  Green,
  Blue
};
var c:Color = Color.Blue
console.log(c); // 2
// 2. 另外枚举类型还有一个比较特殊的功能，假如我们有一个数值，但是我们不知道枚举类型中是否有定义，可以用以下方式来获取，代码如下
enum Color {
  Red = 1,
  Green,
  Blue
};
var colorName: string = Color[2]; //访问第二个枚举子元素Green
console.log(colorName); // Green
colorName = Color[4];
console.log(colorName); // undefined
// 3. 数值类枚举 是一个双向映射的集合
enum Color {
  Red, // 枚举元素列表
  Green = 5, // 如果为某一项指定一个值则后面的值依次递增
  Blue
}
console.log(Color) // {'0': 'Red', '5': 'Green', '6': 'Blue', Red: 0, Green: 5, Blue: 6 }
console.log(Color.Red) // 0
console.log(Color[6]) // Blue
console.log(Color['Blue']) // 6
console.log(Color.Blue) // 6
// 4. 字符串枚举只能是有key取value 不能双向
enum Week {
  year = '年',
  month = '月',
  day = '日'
}
console.log(Week) // { year: '年', month: '月', day: '日' }
console.log(Week['year']) // 年
console.log(Week.year) // 年

any 任意类型,动态的，能够赋予任意类型。声明时未指定类型,会被识别为任意类型

var notSure:any = 4;
notSure = 'maybe a string';
notSure = false;
var list:any[] = [1,true,'free'];
list[1] = {}
console.log(list[1]); // {}
notSure() // notSure is not a function

unknown 与 any类似使用时需要做判断可能会报错

var notSure:unknown = 4;
notSure = 'maybe a string';
notSure = false;
notSure() // notSure is not a function

union联合类型只能访问此联合类型的所有类型里共有的属性或方法

var union:string|number;
union = '字符串'
union = 2
console.log(union)
console.log(union.length) // 类型“number”上不存在属性“length”。

Literal字面量类型只能在声明的字面量里取值不能赋值为其他值

let literal:1|'a'|true|[1,3]
literal = true
literal = 3 // 不能将类型 3 分配给 “1|'a'|true|[1,3]”
console.log(literal)

void 函数无返回值

// 哈数默认的返回类型就是 void 仅能在函数中使用 返回类型指定为void,表示该函数不返回任何值
function warnUser():void{
  console.log('定义一个无返回值得函数')
}
console.log(warnUser()) // undefined

类型推断：当给一个变量赋值初始化时，如果变量类型没有给出时，TS会自动的去尝试分析变量的类型,如果TS无法分析变量类型的话，我们就需要使用类型声明

类型适配(类型断言)

let msg:any;
msg = 'ac' // 虽然声明为string 但类型还是any  无法自动提示字符串的方法
// console.log(msg.endsWith('c'))
// 类型适配方法1 (<string>msg)
let res = (<string>msg).endsWith('c')
// 类型适配方法2 (msg as string)
let res1 = (msg as string).endsWith('c')

函数的定义与调用

/*
return_type该函数的返回值类型 return data需要返回的数据
特殊的返回值类型  void 无返回值  never 不会执行
未指定返回类型 默认为 void
*/
function function_name(arg:number,arg1:number,....):return_type{
  return data
}
function add(x:number,y:number):number{
  return x+y
}
console.log(add(5,6)) // 11

函数的参数
注：可选参数和默认参数必须在参数列表的最后。

可选参数: 在参数名后面，冒号前面添加一个问号，则表明该参数是可选的

function buildName(firstName:string,lastName?:string){
  if (lastName) {
    return firstName + ' ' + lastName
  } else {
    return firstName
  }
}
console.log(buildName('Bob')) // Bob
console.log(buildName('Bob','Ada')) // Bob Ada

默认参数: 在参数名后直接给定一个值，如果这个值没有被传入，将会被赋值为默认值

function buildName(firstName:string, lastName='Smith'){
  return firstName + ' ' + lastName
}
console.log(buildName('JR')); // JR Smith
console.log(buildName('JR','James')); // JR James

解构赋值的参数类型

//           参数解构    参数类型声明            返回值类型
function add({ a, b }: { a: number, b: number }): number {
  return a + b
}
let c = add({ a: 2, b: 3 })
console.log(c) // 5

rest剩余参数

function info(name: string, ...rest: any) {
  console.log(name, rest)
}
info('tew', 12, true) // tew [ 12, true ]

xx.d.ts 声明文件类型描述文件类型定义文件

使用TS编写的文件,在编译时可以自动生成声明文件,并在发布的时候将 xx.d.ts 文件一起发布, 声明文件中只对类型定义, 不能进行赋值和实现

declare let/const  // 声明全局变量
declare function   // 声明全局方法
declare class      // 声明全局类
declare enum       // 声明全局枚举类型
declare namespace  // 声明（含有子属性的）全局对象
interface/type     // 声明全局类型

typescript编译环境

typescript配置文件

数据类型

函数的定义与调用

xx.d.ts 声明文件 类型描述文件 类型定义文件

xx.d.ts 声明文件类型描述文件类型定义文件