大厂也用《TypeScript》 在不卷起来，就得打螺丝了

问：优秀的JavaScript没有缺点吗？

 

有！比如es5的var声明变量作用域问题、代码运行后才知道语法是否错误 等。。

问：JavaScript是不是在蓬勃发展，

对！你看看都Es几了，不可否认的是，JavaScript正在慢慢变得越来越好，无论是从底层设计还是应用层面，ES6、7、8等的推出，每次都会让这门语言更加现代、更加安全、更加方便，但你发现没JavaScript在类型检测上依然是毫无进展。。网友说就跟着图一样

 

目录

认识 TypeScript 

下载Ts 

使用 ts

JavaScript类型

定义类型 string

定义类型 number 

定义类型 Array 

定义类型 boolean

 定义类型 Symbol

 定义类型 null和undefined

TypeScripte 类型 （5种）

定义类型 any

定义类型 unknown

定义类型 void

 定义类型 never

  定义类型 tuple

 数据类型

 对象类型、接口都可以规定对象的形状

接口 

 可选类型 

联合类型 

类型断言

ts中type和interface的区别

---

认识 TypeScript 

官网解释：TypeScript is a typed superset of JavaScript that compiles to plain JavaScript. 

      我们可以将 TypeScript理解成加强版的JavaScriptES6、ES7、ES8等新语法标准，它都是
支持的,ts在编译阶段就会提示是否报错，第一次赋值变量如果不指定类型，会自动类型推论
很多公司并不是不想使用ts，因为很多人无法使用ts完成项目，有挺多的人刚开始将 ts使用成了any类型
数组里面统一的类型叫数组，不统一叫元组，如果没接触过ts，看不懂没关系，往下看，看到最后看不懂请揍我！

建议去撸一遍官方文档5分钟上手TypeScript · TypeScript中文网 · TypeScript——JavaScript的超集 

下载Ts 

• TypeScript最终会被编译成JavaScript来运行，所以我们需要搭建对应的环境：

# 安装命令
npm install typescript -g
# 查看版本
tsc --version

 编写了TypeScript之后可以直接运行在浏览器上，编写了TypeScript之后可以直接运行在浏览器上那就需要用到ts-node

• 另外ts-node需要依赖 tslib 和 @types/node 两个包：

npm install ts-node -g
npm install tslib @types/node -g

现在，我们可以直接通过 ts-node 来运行TypeScript的代码：

 ts-node xxx.ts

使用 ts

JavaScript类型

定义类型 string

let message: string = 'Hello 活在风浪里。。'

1.  发现什么异样了吧，对ts就是类型严格，在变量声明前就规定好了类型，
2. ts在编译阶段就会提示是否报错
3. 第一次赋值变量如果不指定类型，会自动类型推论，例如你写10就是number类型，现在是string类型，因为你写的是字符串啊
4. 注意：这里的string是小写的，和String是有区别的
   string是TypeScript中定义的字符串类型，String是ECMAScript中定义的一个类
5. 如果我们给message赋值非string的值，那么就会报错

定义类型 number 

在开始就说了它支持es6、es7...ES6新增了二进制和八进制的表示方法，而TypeScript也是支持二进制、八进制、十六进制的表示：

let num1: number = 100 // 十进制
let num2: number = 0b100 // 二级制
let num3: number = 0o100 // 八进制
let num4: number = 0x100 // 十六进制
console.log(num1, num2, num3, num4) // 100 4 64 256

定义类型 Array 

 第一种 常用

const uname: string[] = [] ;

 第二种 react jsx 中有冲突 

const uname: Array<string> = []

定义类型 boolean

let flag: boolean = true

 定义类型 Symbol

在ES5中，如果我们是不可以在对象中添加相同的属性名称的，比如下面的做法 

const userinfo = {
  uname: 'holle',
  uname: 'holle' // 报错 不可以在对象里定义相同属性
}

 所以就可以用到es6的symbol 

const uname= Symbol('uname')
const uname= Symbol('uname')
const info = {
  [uname]: 'tom',
  [uname]: 'tom'// 两个tom是不一样的
}

      Es6引用了一种新的原始数据类型symbol，表示独一无二的值，js的第七种语言, 特点：symbol的值是唯一的，用来解决变量的问题，值不能与其他数据进行运算，创建symbol S要大写，直接传值使用symbol值是不一样的,使用函数对象 symbol.for 创建 的编号是一样的状态码

直接传两个相同的值使用symbol编号是不一样的

let s1 = Symbol('张三');

let s2 = Symbol('张三');

console.log(s1===s2); //false 不相等 虽然都是为张三服务但是内存编号是不一样的

 定义类型 null和undefined

const aa: null = null
const bb: undefined = undefined

TypeScripte 类型 （5种）

定义类型 any

• 在某些情况下，我们确实无法确定一个变量的类型，并且可能它会发生一些变化，这个时候我们可以使用any类型

// 在不想给某些 变量 添加具体的数据类型时可以用any

let message: any = 'Hello World'
message = 123
message = true
message = {}
console.log(message)

定义类型 unknown

• unknown是TypeScript中比较特殊的一种类型，它用于描述类型不确定的变量

function str() { 
  return 'abc'
}

function num() {
  return 123
}

// unknow 类型只能复制给 any 和 unknow 类型
// any 类型可以赋值给任意类型 ！！

const flag = true
let result: unknown
if (flag) {
  result = str()
} else {
  result = num()
}

console.log(result)

定义类型 void

• void通常用来指定一个函数是没有返回值的，那么它的返回值就是void类型：

function sum(num1: number, num2: number): void {
  console.log(num1 + num2)//没有返回值，直接打印
}

sum(20, 30)

 定义类型 never

•  如果一个函数中是一个死循环或者抛出一个异常，那么写void类型或者其他类型作为返回值类型都不合适，我们就可以使用never类型。never 表示永远不会发生值的类型

function bar(): never {
  throw new Error()
}

  定义类型 tuple

• 数组中通常建议存放相同类型的元素，不同类型的元素是不推荐放在数组中。（可以放在对象或者元组中）根据索引可获取对应的值 

const info: [string, number, number] = ['why', 18, 1.88]

const name = info[0]
const age= info[1]

 数据类型

 对象类型、接口都可以规定对象的形状

//对象类型

function obj (num: { x: number; y: number }) {
  console.log(num.x)
  console.log(num.y)
}

// num('123') //报错
// num({ x: '123', y: '123' }) // 报错

obj({ x: 123, y: 321 })//类型传入正确

接口 

interface InfoType {
  name: string
  age: number
}
const obj: InfoType = {
  name: 'tom',
  age: 18
}

 可选类型 

//对象类型

function obj (num: { x: number; y?: number }) {// y 非必传
  console.log(num.x)
  console.log(num.y)
}


obj({ x: 123, y: 321 })//类型传入正确

obj({ x: 354})// 正确

联合类型 

function obj ( v : number | string) {

  if (typeof v === 'string') {

     console.log(v) // abc

  } else {

    console.log(v) // 123

  }
}

obj(123)
obj('abc')// 传这两种类型都可以，联合类型就是将多种类型用 管道符 串联

类型断言

• 在开始说过，默认不指定类型，就会自动的断言类型

 

ts中type和interface的区别

在TypeScript中，type和interface都用于创建自定义类型。它们之间的区别在于：

1. interface主要用于对象的形状（属性和方法）描述，而type可以描述任何类型，包括基本类型、联合类型、函数类型等。

2. interface支持继承和合并，可以通过extends关键字扩展其它接口。而type不支持继承和合并，但可以使用交叉类型（&）组合多个类型。

3. type允许为已有类型定义别名，这样可以方便地重复使用类型。而interface不能定义别名。

一般来说，如果需要描述一个对象的形状，就使用interface；如果需要描述一个类型别名，或者需要描述更复杂的类型，就使用type。但是实际项目中，这两种方式也可以混合使用，根据实际需要灵活选择。

 

// 定义一个对象的接口
interface Person {
  name: string;
  age: number;
}

// 定义一个函数类型的别名
type AddFunc = (num1: number, num2: number) => number;

// 组合多种类型，定义一个包含字符串和数字的联合类型别名
type LogLevel = 'info' | 'warning' | 'error' | number;

// 定义一个继承自Person的接口
interface Student extends Person {
  grade: number;
}

// 实现一个函数，参数为一个Person对象，返回值为字符串
function getInfo(person: Person): string {
  return `My name is ${person.name}, and I am ${person.age} years old.`;
}

// 定义一个变量，类型为AddFunc的别名
const add: AddFunc = function(num1, num2) { 
  return num1 + num2; 
};

// 定义一个变量，类型为LogLevel的别名
const logLevel: LogLevel = 'info';

// 定义一个变量，类型为Student接口
const student: Student = { name: 'Alice', age: 18, grade: 12 };