不得不学的Typescript的基础用法(转载)

1.认识TypeScript

• 编程语言分为动态类型语言如JavaScript和静态类型语言如Java。
  动态类型语言没有编译阶段，而js本身具有非常大的灵活性，比如它没有类型约束，一个变量可能初始化为字符串，但也可以被赋值为数字，这使得我们用js编程时常常出现意外的错误或者隐患，从而导致运行时错误。
  而静态类型语言在编译阶段就能确定每个变量的类型，能够发现大部分的错误。TypeScript就属于静态类型语言。
  TypeScript是可扩展的JavaScript。兼容js，具有es6-es10的语法支持，能够兼容各种浏览器，使用ts能够减少代码错误，能够使程序更容易理解和维护,其代码补全、接口提示等功能能够提高我们的开发效率。
  下面为大家介绍一些TypeScript的基础和常用语法。

2.安装TypeScript

// 安装
npm install -g typescript
// 编译
// 如果代码有错误，会在编译的时候报错
// 编译完成后会生成一个编译好的hello.js文件
tsc hello.ts
// 运行
node hello.js

3.常用数据类型

布尔值

let isDone:boolean = false

// 注意Boolean是js中的构造函数，
// 使用new Boolean()创造的不是布尔值，而是一个Boolean对象
let createdByNewBoolean: Boolean = new Boolean(1);

let createdByNewBoolean: boolean = new Boolean(1);
// Type 'Boolean' is not assignable to type 'boolean'.

//直接调用 Boolean 也可以返回一个 boolean 类型
let createdByBoolean: boolean = Boolean(1);

字符串

let firstName:string = 'TOM'

数值

let age:number =  20 

Null和Undefined

ts中，undefined 和 null 是所有类型的子类型。也就是说 undefined 类型的变量，可以赋值给 number 类型的变量

// 这样不会报错
let num: number = undefined;

any

any表示任意类型，可以被改变，也可以访问任意属性和方法，不会报错。常用any表示数组中允许出现任意类型值

//变量如果在声明的时候，未指定其类型，那么它会被识别为任意值类型
let notSure:any = 4
notSure = 'may be a string'
let something  //等价于 let something:any
something = 'seven'
something = 7

数组
数组有两种表示方式，1是:类型+方括号, 2是数组泛型 Array<类型>

let arr:number[]=[1,2,3] //数字类型数组，不允许有其他类型值

let arr2: number[] = [1, '1', 2, 3, 5];
// Type 'string' is not assignable to type 'number'.

let arr3: number[] = [1, 2, 3, 5];
arr3.push('8');
// Argument of type '"8"' is not assignable to parameter of type 'number'

数组泛型

let arr:Array<number> = [1, 2, 3]

类数组：常用的类数组都有自己的接口定义，如 IArguments, NodeList, HTMLCollection 等
function sum() {
    let args: IArguments = arguments;
}

元组

let user:[string,number]=['Tom',20] //指定了数组的长度和类型
user[0].slice(1)
user[1].toFixed(2)
user.push('123') //只能push两种类型中的一种

接口

ts中，使用接口来定义对象的类型，用于对（对象的形状）进行描述

interface Person { //接口一般首字母大写
  name:string;
  age:number;
  address?:string; 
  // ?表示可选属性
  readonly id:number; 
  // readonly表示只读属性，初始化对象后不可以重新赋值
  [propName:string]:any; 
  // [propName: string]定义任意属性，
  // 一旦定义了任意属性，那么确定属性和可选属性的类型都必须是它的类型的子集
}
// tom变量的形状要和接口Person保持一致，多一个属性都不行
let tom:Person = {
  name:'Tom',
  age:20，
  id:898，
  gender:'male'
}

函数

1.函数声明
// 传参数值类型x和y，并返回数值类型的数据
function sum(x:number,y:number):number {
  return x+y
}
// 输入多余的或少于要求的参数，是不可以的
// 可以用？表示可选参数，可选参数必须接在必需参数后面
function add(x:number,y:number,z?:number):number{
 if(typeof z === 'number'){
   return x+y+z
 }else{
   return x+y
 }
 // 允许给参数添加默认值
 function build(first:string,last:string='hello'){
   return first + last
 }
 let tom = build('Tom')
2.函数表达式
let mySum: (x: number, y: number) => number = function (x: number, y: number): number {
    return x + y;
};
// ts中 =>用来表示函数的定义，左边是输入类型，需要用括号括起来，右边是输出类型。

3.用接口定义函数形状
interface ISum {
 (x:number,y:number):number;
}
let add:ISum = function(x:number,y:number){
  return x+y
}

never

当一个函数永远也执行不完，如抛错，可以给函数指定never返回值
function throwError(message:string,errorCode:number):never{
  throw {
    message,
    errorcode
  } 
} // 永远也无法执行到这一行

来自
作者：小蝉儿
链接：https://juejin.cn/post/6967679826568151048
来源：掘金