typescript学习

2022-01-27 14:05:35 阅读：121 来源： 互联网

标签：function typescript console string number 学习类型 log

前言

JavaScript是一门弱类型语言，无需编译就能运行，没有类型检查，无法提前预知错误，并且没有类型约束增加了沟通成本。我们知道，在开发时，越早发现错误越好。TypeScript是拥有类型的JavaScript超集，相当于JavaScript的加强版，它可以编译成完整的JavaScript代码。

JavaScript所拥有的特性，TypeScript全部都是支持的，并且它紧随ECMASript的标准，所以ES6、ES7、ES8等新语法标准，它都是支持的；TypeScript在语言层面上，不仅仅增加了类型约束，而且包括一些语法的扩展，比如枚举类型，元组类型等。

变量的声明

// var/let/const 标识符： 数据类型 = 值;
let message: string = '张三';
//当我们给 message 赋值其他类型的值，那么就会报错
message: 123   //不能将类型“number”分配给类型“string”。ts(2322)

变量的类型推导

// 有时候我们开发时不需要每次声明变量都要事先定义好数据类型，而是可以通过ts的类型推导来推断出变量类型
let age = 123
age = '123'  // 不能将类型“string”分配给类型“number”。ts(2322)

数据类型

/* JavaScript */
let age: number = 22			//number
let name: string = 'zhangsan'	//string
let isReload: boolean = true	//boolean
let arr: number[] = [1, 2, 3]	//Array
let arr1: Array<number> = [4, 5, 6]
let obj: object = {				//object
  name: 'zhangsan',
  age: 12,
  gender: 'male'
}
let s1: symbol = Symbol('zhangsan')		//symbol
let s2: symbol = Symbol('zhangsan')
let person = {
  [s1]: 'male',
  [s2]: 'female'
}
let n: null = null				// null
let u: undefined = undefined       //undefined

/* TypeScript */
let a: any = 'why'      // any 任意类型，宽松的（无约束）
a = 123  // 可以
let result: unknown;    // unknown 类型不确定的变量
function sum(num1: number, num2: number): void {	// void 通常用于指定函数没有返回值
  console.log(num1 + num2)
}
function loopErr(): never {				//never 表示永远不会发生值的类型，比如函数的死循环或者抛出异常（中断）,无法  返回值
  throw new Error()
}
let student: [string, number, string] = ['zhangsan', 12, 'male'];        // tuple元组类型，即多种数据类型组合的数组

函数的参数类型

函数是JavaScript非常重要的组成部分，TypeScript允许我们指定函数的参数和返回值的类型。

function delete(id: string): object{       // 这里指定传入的参数必须为 string 返回值是一个对象
  let res = {}
  return res
}
function search(searchInfo: {name: string, age: number}): object{       // 这里指定传入的参数必须为对象且属性，属性值需要对应符合
  let res = {}
  return res
}
search({name: 'zhangsan', age: 2})

可选类型

对象类型也可以指定哪些属性是可选的，可以在属性的后面添加一个?：
注意可选类型后面不能有必选类型，即可选类型一般放最后，类似于…rest(剩余参数)

function search(id: string, name?: string) {
console.log(id)
if(name) console.log(name)
}
search(‘123’,‘zhangsan’) // 123,zhangsan
search(‘123’) // 123

联合类型

TypeScript的类型系统允许我们使用多种运算符，从现有类型中构建新类型

function printId(id: number | string) {
  if(typeof id === 'number') return id		
  else return id.length
}
console.log(printId(10))    //10
console.log(printId('abc'))   // 3

到这里其实可以看出，可选类型是某一类型与 undefined 的联合类型，如:

function printId(id?: number){
  console.log(id)
}
printId()
printId(123)  // 123

类型别名

在前面，我们通过在类型注解中编写对象类型和联合类型，但是当我们想要多次在其他地方使用时，就要编写多次。比如我们可以给对象类型起一个别名：

type Point = {x: number, y: number}

function printPoint(point:Point) {
  console.log(Point.x, Point.y)
}
printPoint({x: 1, y: 2})

类型断言as

有时候TypeScript无法获取具体的类型信息，这个我们需要使用类型断言

// 不使用断言
function printLength(n: string | number) {
  console.log(n.length);    //类型“string | number”上不存在属性“length”。类型“number”上不存在属性“length”。ts(2339)
}

// 使用断言
function printLength(n: string | number) {
  console.log((n as string).length);
}

函数的默认参数

从ES6开始，，JavaScript是支持默认参数的，TypeScript也是支持默认参数的：

function getInfo(id: string, status: number = 2) {
  console.log(id, status)
}
foo('213')   // 213, 2
// 这个时候y的类型其实是 undefined 和 number 类型的联合。

函数的剩余参数

从ES6开始，JavaScript也支持剩余参数，剩余参数语法允许我们将一个不定数量的参数放到一个数组中。

function sum(...nums: number[]) {
  let total = 0
  for(let num of nums) {
    total += sum
  }
  console.log(total)
}
sum(1, 2, 3)   // 6

函数的重载

function sum(num1: number, num2: number): number;    
function sum(num1: string, num2: string): string;   //重载外部不可见
function sum(num1: any, num2: any): any {
	return num1 + num2
}
console.log(sum(1, 2))    // 3
console.log(sum('zhang', 'san'))  // zhangsan

接口的声明

interface People = {
  name: string
  age: number
}

接口中的可选属性

interface Person {
name: string
age: number
gender?: string
}
const person: Person = {
name: ‘zhangsan’,
age: 15,
gender: ‘female’
}
console.log(person.name) // zhangsan
console.log(person?.gender) // female
接口中的只读属性

interface Person {
readonly name: string
readonly age: number
gender?: string
}
const person: Person = {
name: ‘zhangsan’,
age: 12,
gender: ‘male’
}
person.age = 14 //无法分配到 “age” ，因为它是只读属性。ts(2540)

可以发现，readonly 和 const 有像似之处

同：用于约束数据的修改属性
异：const用于定义常量，而 readonly用于修饰属性

索引类型

interface Game {
  [index: string]: string
}
const game: Game = {
  'first': '天天酷跑'，
  'second': '五子棋'，
  'third': '象棋'
}
console.log(game.first)  //天天酷跑

接口继承

接口和类一样是可以进行继承的，也是使用extends关键字：

interface Person {
  name: string,
  eating: () => void
}

interface Animal {
  running: () => void
}

interface Student extends Person, Animal {
  gender: string
}

const student: Student = {
  gender: 'male',
  name: 'zhangsan',
  eating: function() {},
  running: function() {}
}

接口的实现

接口定义后，也是可以被类实现的：

如果被一个类实现，那么在之后需要传入接口的地方，都可以将这个类传入
这就是面向接口开发

interface ISwim {
swimming: () => void
}

interface IRun {
running: () => void
}

class Person implements ISwim, IRun {
swimming() {
console.log(‘swimming’)
}
```
running() {
  console.log('running')
}
```
}

function swim(swimmer: ISwim) {
swimmer.swimming()
}

const p = new Person()
swim§ //swimming

交叉类型

交叉类型用 & 符号表示，表示需要满足多个类型的条件

type x = number & string           // 没有同时满足条件的值，所以当交叉的类型是基本数据类型时相当于 never 类型

// 常用于对象类型进行交叉
interface Animal {
  eating: () => void
}

interfact Dog {
  running: () => void
}

type NewType = Dog & Animal
const dog: NewType = {
  eating: function() {}
  running: function() {}
}

枚举类型

枚举类型是TypeScript特性之一：

枚举其实就是将一组可能出现的值，一个个列举出来，定义在一个类型中，这个类型就是枚举类型
枚举允许开发者定义一组命名常量，常量可以是数字、字符串类型

enum Direction {
top,
right,
bottom,
left
}

枚举类型的值

枚举类型默认是有值的，比如上面的枚举，默认值是这样的

enum Direction {
  top = 0,
  right = 1,
  bottom = 2,
  left = 3
}
// 当然也可以赋值给其他类型
enum Direction {
  top = 'bottom',
  right = 'left',
  bottom = ,
  left = 
}

泛型

泛型是方便增强函数的复用性（抽象）

// 当我们需要封装一个函数， 传入一个参数，并且返回这个参数时。
function foo (arg: number): number {      //实现了number类型，但不符合string、boolean等类型
  return arg            
}
// 使用 any
function foo1(arg: any): any {
  return arg                 // 虽然可以实现需求，但这时候已经丢失了类型信息
}
// 使用泛型可以完美解决问题
function foo2<T>(arg: T): T {
  return arg                
}
console.log(foo2(1))
console.log(foo2(true))
console.log(foo2('sad'))

当需要传入多个类型时

function foo<T, E>(name: T, age: E) {
  console.log(name, age)
}

泛型接口

在定义接口的时候我们也可以使用泛型

interface Animal<T> {
  name: T,
  friends: T[],
  sayHello: (value: T) => void
}

const cat: Animal<string> = {
  name: '蓝猫'
  friends: ['虹猫','咖啡猫']
  sayHello: function(value: string) {
    console.log(value)
  }
}

泛型类

class Animal<T> {
  name: T
  shape: T
  
  constructor(name: T, shape: T) {
    this.name = name
    this. shape = shape
  }
}

const dog = new Animal('二哈','middle')
const cat = new Animal<string>('蓝猫', 'small')
const pig: Animal<string> = new Animal('天蓬', 'big')

泛型约束

有时候我们希望传入的类型有某些共性，但是这些共性可能不是在同一种类型中

比如string和array都是有length的，或者某些对象也是会有length属性的

interface ILength {
length: number
}

function getLength(args: T) {
return args.length
}
console.log(getLength(‘abc’)) //3
console.log(getLength([1,2,3])) //3
console.log(getLength({name: ‘zhangsan’, age: 12, length: 180})) //180

命名空间namespace

命名空间在TypeScript早期时，称之为内部模块，主要目的是将一个模块内部再进行作用域的划分，防止一些命名冲突的问题。

export namespace Time {
  export function format(time: string) {
    return '2022-01-27'
  }
}

export namespace Prize {
  export function format(price: number) {
    return '九磅十五便士'
  }
}

标签：function,typescript,console,string,number,学习,类型,log
来源： https://blog.csdn.net/weixin_44642382/article/details/122716623

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

typescript学习