认知TypeScript，对TypeScript有一个基本概念

TypeScript 笔记

当我们新建成一个函数之后立即使用node执行ts文件是不可以的，我们必须将他用tsc转换成js文件，其实简单的说ts就是js的高级语言

1 TypeScript的一个最主要的特点就是可以定义静态类型

const count : number = 1;
:number其实就是定义了一个静态类型
这样定义后 count这个变量在程序中就永远都是数字类型不能改变了
如果我们去让 count = ‘jsxu’ 重新赋值一个字符串的话，他就会报错了
我们因为定义的类型是number类型，这个时候我们是可以使用number的方法和属性的

2 自定义静态类型使用interface

interface XiaoJieJie{
uname:string,
age:number
}

const xiaohong :XiaoJieJie = {
uname:‘小红’,
age:18
}
这个时候我们声明const变量，假如说与我们自定义的静态类型不一致的话就会导致报错，如果我们使用了静态类型，其实也就意味着变量的类型不能改变了，不能说从number改为string，总的来说类型的属性方法随着你选择的静态类型就确定了。

3 TypeScript基础静态类型和对象类型

在TpeyScript中静态类型分为两种，一种是基础静态类型，一种是对象类型。

– 基础静态类型
基础静态类型非常简单，只要在声明变量的后边加一个 : 号，然后在上对应的类型即可
const count :number = 918;
const myName :string = ‘jsxu’

console.log(count,myName)

– 对象静态类型
自定义静态类型其实也可以采用这中方式去写，直接在后方指定
const xiaoJieJie:{name:string,age:number} = {name:‘快乐’,age:20}
console.log(xiaoJieJie.age)

我们可以为类型设置羁绊 String 首字母大小写都可以
这个其实就相当于于数组里面的值只能是字符串类型
const xiaoJieJie1 :String []=[‘1’,‘y’,‘z’]
console.log(xiaoJieJie1)

我们也可以对类进行设置羁绊
这个其实就是相当于 :后面指定的是一个类，那么我们给其赋值的时候就必须是这个类对应的new才可以

class Person{} //声明的类
const per : Person = new Person()

再有说就是如果我们想定义一个函数类型，并且确定他的返回值的话
const fun 😦)=> string = ()=>{return ‘’}

总结对象类型
对象类型，数组类型，类类型，函数类型

4 类型注释和类型推断

类型注解其实就是成名一个变量类型
这其实就是变量注解
let count :number;
count = 123

类型推断其实就是我不给变量设置类型注解，ts会自动给我们分析成对应值的类型
这个时候变量类型其实就是number类型
let counts = 123

变量注解例子这样虽然不会报错，但是我们需要的是两个number值相加，而不是说数字与字符串，或者其他类型的数值相加
function abc(one,two){
return one + two
}
const total = abc(1,‘2’)

实现变量注解
function abc1(one:number,two:number){
return one+two
}
total1 可以加类型，也可以不加
const total1:number = abc1(1,2)

总的来说再写TypeScript代码的时候一个重要的宗旨就是每个变量，每个对象的属性类型都应该是固定的，如果ts可以自动推断的话就让他推断，推断不出来的时候我们就可以进行注解。

5函数参数和返回类型定义

函数有返回值时给函数的返回值加上类型注解
function getTotal(one:number,two:number) :number{
return one+two
}
const total = getTotal(1,2)

函数没有返回值时给函数加上类型注解，如果我们加了返回值就会报错的那种,排除return空值的情况
function sayHello():void{
console.log(‘hello world!’)

}
sayHello()

函数永远执行不玩或者说死循环的时候定义返回值never
function forNever() :never{
while(true){}
console.log(‘hello Jsxu’)
}

函数参数时对象（解构时）

function obj({one,two}:{one:number,two:number}) :number{
return one+two
}
const objNum = obj({one:1,two:2})
意思就是传入一个对象，为对象指定的键传入变量注解 :最后面的：string其实就是设置返回值return的类型
function obj1({one} :{one:string}):string{
return one
}
const obj1Str = obj1({one:‘name’})

6数组类型的定义

const numberArr = [1,2,3]
/**

const numberArr:number[] = [1,2,3]
/
console.log(numberArr)
const stringArr = [‘a’,‘b’,‘c’]
/*
const stringArr : string [] = [‘a’,‘b’,‘c’]
*/
console.log(stringArr)

const undefinedArr : undefined[]=[undefined,undefined]
console.log(undefinedArr)

如果我们需要的数组之中有number 还有 string
我们只需要加一个（）在在里面加一个 | 分割分类即可
const arr :(number|string)[] = [‘1’,1,‘2’]

数组对象形式指定变量注解的话
const xiao :{name:string,age:number}[]=[
{name:‘快乐’,age:18},
{name:‘小小’,age:20}
]

我们可以采用type来定义一个类别别名定义别名就需要以type关键字
也可以使用interface来定义
type lady ={
name:string,
age:number
}
const xiaom :lady[] = [
{name:‘快乐’,age:18},
{name:‘小小’,age:20}
]
console.log(xiaom)

也可以使用class类来进行限制作用也都是一样的

7 元组的基本应用

元组简单来说就是严格限制数组中对应位置的类型

8 interface接口

我们可以把两个重复的变量注解，定义成统一的接口
interface Girl {
readonly name : string, readonly只读属性，不能更改
age : number,
bust : number,
wh ?: string,
say(): string, 这个就代表定义了一个函数，返回值时string
}
interface接口和type的区别
interface必须是对象
type可以是单个类型
?:代表可写可不写
当我们使用如上方法定义接口时，不能声明的对象变量多，也不能少（?:除外）
而且我们不可以添加未定义的属性如上方来举例,不能在拿他定义时加上num
如果我们想打破这个规则，就可以使用我们的任意属性，那么只需要在interface上添加一个
[propName:string]:any; 就可以了
当我们添加了[propName:string]:any;之后就可以向里添加任意属性，方法也是可以添加的
say():string;
class类也可以集合接口 implements指定接口制定了接口就意味着要匹配一致，否则就会报错
class xiao implements Girl{
name=“刘英”
age=18
bust=90
say(){
return ‘欢迎光临，红浪漫洗浴！！’
}
}

接口与接口之间也可以使用继承
interface Teacher extends Girl{
teach():string
}
简单的来说接口只是对我们开发的约束，在生产环境中并没有体现。
也就是说接口只是在我们开发时的约束，在生产环境中并没有体现，也就是说接口只是在TypeScript里帮我们做语法校验的工具，编译成正式的js代码，就没有用处了。