TypeScript入门篇（一）

本文主要是介绍TypeScript入门篇（一），对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

一、还不抓紧学习TS？

1. TS是JS的超集，是建立在JS上的一门语言。
2. TS可以使用JS之外的扩展语法、面向对象、静态类型。
3. TS基础语法 -- 爬虫功能开发 -- TS语法进阶 -- 项目接口开发 -- TS高级语法 -- 项目代码重构 -- 项目前端开发 -- 总结

包含知识点：静态类型、类型注解、类型推断、泛型、类型定义文件、模块化、打包编译、装饰器、Metadata（元数据）、设计模式

二、TS基础语法

1. TS的定义

推荐使用VSCode编辑器。应为TS和VSCode都是微软推出的。VSCode做了很多对TS的适配。

参考文档：

1. www.tslang.cn/docs/home.h…
2. www.typescriptlang.org/

定义：TypeScript is a typed superset of JavaScript that compiles to plain JavaScript.TS是JS的超集，被编译为JS之后才可以运行。TS是静态代码类型。

// ts文件
let a = 123
a = '123'  // 不能将类型“"123"”分配给类型“number”。因为其为静态类型，因此不能从number类型变为string类型。

标准写法
let a: number = 123
复制代码

interface Person {
  name: string
}

const teacher: Person = {
  name: 'Fruit Bro'
}
复制代码

2. TS的优势

参考文档：7 个不使用 TypeScript 的理由

interface Point {
  x: number,
  y: number,
}
function tsDemo (data: Point) {
  return Math.sqrt(data.x ** 2 + data.y ** 2)
}

tsDemo({x: 1, y: 2})
复制代码

优势：

1. 开发过程中，发现潜在问题。
2. 更友好的编辑器自动提示。
3. 代码语义更清晰易懂。

3. TS基础环境搭建

参考文档：

1. nodejs.org/
2. nodejs.cn/

// 安装TS
npm install typescript -g 

tsc demo.ts 就生成了demo.js文件
node demo.js // 运行生成的文件

// 转化工具 简化上述过程
npm install -g ts-node
// 运行
ts-node demo.ts
复制代码

4. TS静态类型理解

// count为number类型之后，会具备number类型的所有属性和方法
const count: number = 2020 

复制代码

count.提示的都是number类型所对应的方法，如下图：

// 自定义类型

interface Point {
  x: number,
  y: number,
}

const point: Point = {
    x: 1,
    y: 2
}
复制代码

因此point变量具备Point所有的属性和方法。

总结：我们看到一个变量是静态类型，不仅仅意味着这个变量的类型不能修改，还意味这个变量的属性和方法已基本确定。

5. TS基础类型和对象类型

1. 基础类型

let count: number = 123
const personName: string = 'style'
复制代码

还有null, undefined, symbol, boolean, void

2. 对象类型

const teacher: {
  name: string,
  age: number,
} = {
  name: 'fruit',
  age: 18,
}
// 数组
const numbers: number[] = [1, 2, 3]

// 类
class Person {}
const fruit: Person = new Person() // fruit必须是个person类

// function， 返回值为number的函数
const getTotal: () => number = () => {
  return 123
}
复制代码

6. TS类型注解（type annotation）和类型推断(type inference)

let count: number;
复制代码

如上所示，显式声明变量类型的写法，称为类型注解。

let countInfernce = 123
const firstNumber = 1
const secondNumber = 2
const total = firstNumber + secondNumber
复制代码

在我们写的代码中，变量并没有使用类型注解，但并未报错，就是因为TS进行了类型推断。

如上所示，我们并未定义变量类型，TS会自动的去尝试分析变量的类型，称为类型推断。

如果TS会自动分析变量类型，我们就什么都不需要做了。 如果TS无法分析变量类型的话，我们就需要使用类型注释。

function getTotal(firstNumber: number, secondNumber: number) {
  return firstNumber + secondNumber;
}

const total = getTotal(1, 2) // 此时就不需要写类型注解了
复制代码

如上所示，此时是需要些类型注解的。

7. 函数相关类型

function add(first: number, second: number): number { // 定义返回类型
  return first + second
}
const total = add(1, 2)

// 如果不定义返回类型，如下写法不会报错
function add(first: number, second: number) { // 未定义返回类型
  return first + second + '' // 返回字符串
}
const total = add(1, 2)
复制代码

function sayHello (): void { // 无返回值void
  console.log('hello')
}
复制代码

// never：这个函数永远不会执行到最后，如下两种情况
function errorEmitter (): never {
  throw new Error()
  console.log('123')
}
function errorEmitter (): never {
  while(true) {}
}
复制代码

解构赋值的类型写法：

情况1：
function add({ first, second }: {first: number, second: number}): number {
  return first + second
}
const total = add({first: 1, second: 2})

情况2：
function getNumber ({first}: {first: number}) {
  return first
}
const count = getNumber({first: 1})
复制代码

8. TS基础语法

基础类型 boolean、number、string、void、symbol、undefined、null

对象类型 {}、function、[]、class

上图说明，如果声明和赋值放在两行写，则无法推断出变量类型。因此就需要类型注解。

函数写法1
const func = (str: string): number => {
  return parseInt(str, 10)
}
函数写法2
const func: (str: string) => number = (str) => {
  return parseInt(str, 10)
}
复制代码

如上图，提示了函数的类型。

如上图，可以不用写返回值，可以用类型推断。

如上图,自动推断出Date类型。

const rawData = '{"name": "fruit"}'
const newData = JSON.parse(rawData) // JSON.parse返回的内容并不能帮助TS推断newData的类型
复制代码

如下图，newData为any

因此可以改为如下写法：

interface Person {
  name: string
}
const rawData = '{"name": "fruit"}'
const newData: Person = JSON.parse(rawData)
复制代码

更多类型

let temp: number | string = 123 // temp变量有可能为number或string
temp = '456'
复制代码

这篇关于TypeScript入门篇（一）的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！