P: ¿No hay desventajas en un buen JavaScript?

¡tener! Por ejemplo, el problema del alcance de la variable de declaración var de es5 y si la sintaxis es incorrecta hasta que se ejecuta el código. .

P: ¿JavaScript está en auge?

¡Correcto! Puede ver cuántos Ess hay. Es innegable que JavaScript está mejorando cada vez más. Ya sea desde el diseño subyacente o el nivel de la aplicación, la introducción de ES6, 7, 8, etc. hará que el lenguaje sea cada vez más más importante cada vez Moderno, más seguro y más conveniente, pero descubre que JavaScript todavía no está cerca de la verificación de tipos. . Los internautas dicen que es como la imagen.

En la publicación del blog, usaré los términos más simples y fáciles de entender para explicar los puntos complejos , como las variables definidas. Para que la gente entienda, se pueden cambiar a su gusto. Lo llamo aa bb xiaohong, etc . .

Conoce TypeScript

官网解释：TypeScript es un superconjunto escrito de JavaScript que se compila en JavaScript simple.

Podemos entender TypeScript como una versión mejorada de JavaScript ES6, ES7, ES8 y otros nuevos estándares de sintaxis, todos los cuales son
compatibles, ts le preguntará si debe informar un error durante la etapa de compilación, si la primera variable de asignación no especifica un tipo , inferirá automáticamente
muchos tipos No es que la empresa no quiera usar ts, porque muchas personas no pueden usar ts para completar proyectos, y muchas personas simplemente comenzaron a usar ts como cualquier tipo
. en la matriz se llama matriz, y el tipo no uniforme se llama tupla.Si nunca has tocado ts, no importa si no entiendes, mira hacia abajo, y si no entiendes en el final, por favor golpéame!

Se recomienda revisar la documentación oficial durante 5 minutos para comenzar con TypeScript · Sitio web chino de TypeScript · TypeScript: un superconjunto de JavaScript

Descargar Ts

TypeScript finalmente se compilará en JavaScript para ejecutarse, por lo que debemos crear el entorno correspondiente:

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

Después de escribir TypeScript, puede ejecutarse directamente en el navegador.Después de escribir TypeScript, puede ejecutarse directamente en el navegador, luego necesita usar ts-node

Además, ts-node necesita depender de dos paquetes, tslib y @types/node:

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

Ahora, podemos ejecutar código TypeScript directamente a través de ts-node:

 ts-node xxx.ts

uso ts

tipo de JavaScript

definir tipo de cadena

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

¿Cuál es la diferencia? Para ts, el tipo es estricto y el tipo se especifica antes de la declaración de la variable.
ts le preguntará si debe informar un error durante la etapa de compilación
Si asignas una variable por primera vez sin especificar un tipo, automáticamente escribirá inferencia, por ejemplo, si escribes 10, es de tipo número, y ahora es de tipo cadena, porque lo que escribiste es una cadena.
Nota: La cadena aquí está en minúsculas, que es diferente de String
.String es un tipo de cadena definido en TypeScript, y String es una clase definida en ECMAScript.
Si asignamos un valor que no sea una cadena al mensaje, se informará un error

definir número de tipo

Al principio, dije que es compatible con es6, es7...ES6 ha agregado representación binaria y octal, y TypeScript también admite representación binaria, octal y hexadecimal:

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

Definir tipo Array

El primero de uso común

const uname: string[] = [] ;

Hay un conflicto en el segundo react jsx.

const uname: Array<string> = []

definir tipo booleano

let flag: boolean = true

Definir tipo Símbolo

En ES5, si no podemos agregar el mismo nombre de propiedad al objeto, como el siguiente

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

Entonces puedes usar el símbolo es6

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

Es6 se refiere a un nuevo símbolo de tipo de datos primitivo, que representa un valor único, el séptimo lenguaje de js, características: el valor del símbolo es único, se usa para resolver el problema de las variables, el valor no se puede operar con otros datos, crea un el símbolo S debe estar en mayúscula, y es diferente usar el valor del símbolo para pasar el valor directamente.El número creado usando el objeto de función symbol.for es el mismo código de estado.

Es diferente pasar dos valores idénticos directamente y usar el número de símbolo

let s1 = Símbolo('Zhang San');

let s2 = Símbolo('Zhang San');

console.log(s1====s2); //false no es igual, aunque todos sirven a Zhang San, pero los números de memoria son diferentes

Definir tipos nulo e indefinido

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

Tipos de TypeScripte (5 tipos)

definir tipo cualquiera

En algunos casos, realmente no podemos determinar el tipo de una variable, y tal vez cambie, en este momento podemos usar cualquier tipo


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

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

definir tipo desconocido

unknown es un tipo especial en TypeScript, que se utiliza para describir variables de tipo incierto

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)

definir tipo vacío

void generalmente se usa para especificar que una función no tiene valor de retorno, entonces su valor de retorno es de tipo void:

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

sum(20, 30)

definir tipo nunca

Si una función es un ciclo infinito o lanza una excepción, no es apropiado escribir el tipo void u otros tipos como el tipo de valor devuelto, podemos usar el tipo nunca. nunca representa un tipo cuyo valor nunca ocurrirá

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

definir tipo tupla

Por lo general, se recomienda almacenar elementos del mismo tipo en una matriz, y no se recomienda colocar elementos de diferentes tipos en una matriz. (Se puede colocar en un objeto o en una tupla) Se puede obtener el valor correspondiente según el índice

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

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

tipo de datos

Los tipos de objetos y las interfaces pueden especificar la forma de un objeto.

//对象类型

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 })//类型传入正确

interfaz

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

tipo opcional

//对象类型

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


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

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

tipo de unión


function obj ( v : number | string) {

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

     console.log(v) // abc

  } else {

    console.log(v) // 123

  }
}

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

tipo aserción

Como dije al principio, si el tipo no está especificado por defecto, el tipo se afirmará automáticamente

actualizando . .

2022 / 3 / 2

La gran fábrica también usa "TypeScript", si no lo enrollas, tienes que atornillarlo.