ts项目的创建以及ts基础

原创

已于 2023-08-31 21:36:16 修改 · 776 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript

于 2023-08-17 17:43:46 首次发布

本文详细介绍了如何创建Typescript项目，包括使用vue create创建、安装与使用ElementUI，以及解决scss样式问题。此外，文章还深入讲解了Typescript的基础知识，如数据类型、泛型、函数、接口、枚举等，以及类型系统中的概念，如可选参数、泛型、类型别名、交叉类型和联合类型。同时，讨论了懒加载、命名空间、类型断言和类型保护等高级特性，并针对实际遇到的Promise问题进行了探讨。

Typescript项目创建

Ts文档：https://jkchao.github.io/typescript-book-chinese
vue-property-decorator：https://github.com/kaorun343/vue-property-decorator
在创建目录下打开cmd（在路径框输入cmd后按回车）：

创建项目：vue create study-ts
安装element-ui
npm install element-ui -S
在main.js中引入js和css
import ElementUI from ‘element-ui’;
import ‘element-ui/lib/theme-chalk/index.css’
使用：Vue.use(ElementUI)
安装后解决scss样式的问题：（出现报错：expected css(css lcurlyexpected)）
下载vetur组件

在文件的preferences的setting中输入html进行修改

for…in和 for…of

for…in… 一般用来遍历对象，遍历的是key，且key为string，对于单数组对应的key便是数组的下标，不可枚举的属性不会被遍历出来
for…of…用来遍历数组，遍历的是value

// 数组中有可枚举的类型 或 数组原型链上的属性 都能被访问到
// 如果不希望得到他们,在for-in循环的时候添加hasOwnProperty()方法来过滤掉非自有属性
var b = new Array(1,2,3,4)    //创建一个数组
b.name = '小明'               //给数组添加一个属性
Array.prototype.age = 12      //给数组的原型也添加一个属性 
for(let key in b){
   
   
  console.log(key)
}
//output 0 1 2 3 name age

Typescript的数据类型

any、number、string、boolean、enum、void、null、undefined、never、数组类型要自己去定义
！强调不为空，？属性可有可不有
数字类型
深入理解 TypeScript

var a: number = 123

字符串类型

 var str: string = '你好'

数组

 var arr: number[] = [1,2,3,4] 或者 var arr: Array<number> = [1,2,3]

元组类型

 var arr: [string, number, boolean] = [ 'ts', 3.14, true]

枚举类型（没有赋值默认输出索引值，某个赋值，其后的更随前面赋值的）

enum Flag {
   
   success=1, error=-1}
var f: Flag = Flag.success
console.log(f) // 输出1

null 和undefined

 var num: number
console.log(num)  // 输出：undefined 报错

var num1: undefined
console.log(num1) // 输出：undefined 正确

var num2: number | undefined
console.log(num2) // 输出：undefined 正确

void 表示没有任何类型，一般用于定义方法的时候方法没有返回值

function run(): void {
   
   
  console.log('run')
}

function run(): number {
   
   
  return 123
}

Never类型：是其他类型（包括null和undefined）的子类型，代表从不会出现的值

函数

var fun = function():number {
   
   
  return 123
 }
 fun()

ts定义方法传参

function getInfo(name: String, age:number): string {
   
   
  return `${
     
     name}-${
     
     age}`
 }

可选参数：可选参数必须配置到参数的最后面（加问号）

function getInfo(name: String, age?:number): string {
   
   
  if (age) {
   
   
    return `${
     
     name}-${
     
     age}`
  } else {
   
   
    return `${
     
     name}-保密`
  }
 }

默认参数

function getInfo(name: String, age:number = 2 ): string {
   
   
  if (age) {
   
   
    return `${
     
     name}-${
     
     age}`
  } else {
   
   
    return `${
     
     name}-保密`
  }
 }

剩余参数

function sum(a: Number, ...result: number[]): numer {
   
   
  var sum = a
  for(let i = 0; i < result.length; i++) {
   
   
    sum+=result[i]
  }
  return sum
}