本篇文章适合刚上手ts的同学入手

1. 1.学到ts的优点
2. 2.ts的特点
3. 3.安装方式
4. 4.常用的类型使用方式
5. 5.关键字的用法 持续更新中... ...
6. 
   

typescript是什么？？？

TypeScript是JavaScript的一个超集，扩展了JavaScript的语法；也就是说，javascript里所有的语法都适用于typescript;可以像写JavaScript一样写typescript，但是typescript也有他独特的功能

typescript的优势

如果和JavaScript完全一样，那么typescript也不会受到那么多人的追捧，所以typescript到底解决了什么问题？又有什么优势呢？

优点：

1. 减少bug；在写js的时候，总会有手残的时候造成低级错误，ts可以为变量指定类型，边写边编译，如果出现错误，会立即提示
2. 规范数据类型，有利于前后端对接数据
3. 智能提示，在编写代码时，能把你用的类、变量、方法和关键字都给你提示出来
4. 增加了代码的可读性和可维护性
5. 
   

特点：

特点：与js相比ts多了哪些东西

1. 1.类型检测：在Typescript里需要事先为变量指定类型，比如当你为这个变量指定的是数字类型的值的时候，下面你再赋值使用时IDE会做出类型检查，然后告诉你这里可能会有错误，这个特性会减少你在开发阶段犯错误的几率。
2. 2.特性是语法提示：在IDE里面去编写TypeScript的代码时，IDE会根据当前的上下文，把能用的类、变量、方法和关键字都给提示出来，你只要直接去选就可以了，这个特性会大大提升你的开发效率。
3. 3.重构：你可以很方便的去修改变量或者方法的名字或者是文件的名字，当你做出这些修改的时候，IDE会自动帮你在引用这个变量或者调用这个方法的地方的代码给自动修改掉，这个特性一个是会提高你的开发效率，另一个是可以很容易的提升代码质量
4. 
   

TS的安装与使用

方法一：

全局安装

npm install typescript -g

查看版本

tsc -v

需要先将ts转化为js才能运行，所以如果要单独的写ts时(或者学习ts时)还要装ts-node工具

npm install -g ts-node

执行

ts-node 文件名

方法二： 使用在线工具

对于刚入门 TypeScript 的小伙伴，也可以不用安装 typescript，而是直接使用线上的 TypeScript Playground 来学习新的语法或新特性。在线工具www.typescriptlang.org/play/

方法三： ts经常会搭配着项目一起使用（使用vite）

可以使用vite创建ts的项目

首先先安装一下vite

yarn create @vitejs/app

安装好后创建项目

create-vite-app 项目名称
//或者使用缩写
cva 项目名称

然后根据提示，进入目录

可以按照vite官网搭建ts项目

基本语法

不高深，小白完全能看懂，看完立马能上手

ts与js的大致写法一样，不过比js多写了一个类型

TypeScript 的基础类型

string类型

const c:string= 'hi'

number类型

const d:number= 1

boolean类型

const isTrue:boolean= false

symbol类型

const e:symbol= Symbol('hi')

数组类型

const arr:Array<string|number>= ['a','d',55]  
//尖括号内是数组值的类型（泛型,|表示两种类型都可以）

函数类型

//函数的写法一：a和b是数字类型，返回值也是数字类型
const add1 = (a:number,b:number):number=>{
    return a+b
}
//函数的写法二：
const add2:(a:number,b:number)=>number = (a,b)=>{
    return a+b
}
//函数的写法三：优先推荐
type Add=(a:number,b:number) => number
const add3:Add=(a,b)=>{
    return a+b
}
//函数的写法四：如果函数有一个属性的，且这个属性和其他值类型不同
    //先设置函数类型
interface AddWithProps{
    (a:number,b:number) : number
    name:string
}
const add4:AddWithProps=(a,b)=>{
    return a+b
}
add4.name = 'dong'

特有的类型

any 是任何类型都可以，没有任何限制,可以是数字，也可以是字符串、布尔......

let a:any = 1

unknown 现在不知道是什么类型，使用之前需要先猜测一下（断言）

let b:unknown= JSON.parse('{"name"}:"oldUath"') 
//但是用的时候必须明确是什么类型
type B={name:string}
//断言
(b as B).name

void 函数的返回值可以为空，没有值

let see:()=>void = function(){}

never 空集，表示不可能

//Dir类型规定只有这几个值
type Dir = 1|2|3|undefined
let dir:Dir
switch(dir){
    case 1:
        break;
    case 2:
        break;
    case 3:
        break;
    case undefined:
        break;
    default:
        console.log(dir)
        break; 
}

type

type关键字 是定义一个类型别名

type lady={name:string,age:number}
const xiaojiejie:lady[]=[
    {name:'刘亦菲',age:18},
    {name:'佟丽娅',age:22}
]

interface

interface 接口：TypeScript的核心原则之一是对值所具有的结构进行类型检查。 它有时被称做“鸭式辨型法”或“结构性子类型化”。 在TypeScript里，接口的作用就是为这些类型命名和为你的代码或第三方代码定义契约。

const yang:Dong={
    uname:'dongyang',
    age:15
}

?:

?:表示这个变量可有可无

interface Dong{
    uname:string;
    age:number;
    phone ?: number;
}

只读属性

interface Person {
  readonly name: string;
  age?: number;
}

持续更新中... ...